fix: refine assistant controls

apps/nextjs/src/components/assistant/assistant-panel.module.css

@@ -1157,6 +1157,13 @@
   background: var(--mantine-color-default-hover);
 }
 
+.composerContext[data-compact] {
+  width: 1.75rem;
+  justify-content: center;
+  padding: 0;
+  border-radius: 50%;
+}
+
 .composerContext:focus-visible {
   outline: 2px solid var(--mantine-primary-color-filled);
   outline-offset: 2px;
@@ -1223,6 +1230,10 @@
   background: var(--mantine-color-body);
 }
 
+.composer:has(.composerInput:focus-within) {
+  box-shadow: inset 0 0 0 2px var(--mantine-color-red-filled);
+}
+
 .composerDropzone[data-dragging] .composer {
   box-shadow: inset 0 0 0 2px var(--mantine-primary-color-filled);
 }

apps/nextjs/src/components/assistant/assistant-panel.tsx

@@ -1527,7 +1527,7 @@ const ConversationContext = () => {
     ? Math.min(100, Math.round(((usage.contextUsed ?? 0) / Math.max(usage.contextLength ?? 1, 1)) * 100))
     : 0;
   const quickLabel = [
-    hasTokenUsage ? `${usage.totalTokens.toLocaleString()} ${t("usage.tokens")}` : t("usage.notReported"),
+    hasTokenUsage ? `${usage.totalTokens.toLocaleString()} ${t("usage.tokens")}` : undefined,
     hasCost ? formatCost(usage.cost) : undefined,
   ]
     .filter(Boolean)
@@ -1548,9 +1548,10 @@ const ConversationContext = () => {
         <UnstyledButton
           className={classes.composerContext}
           type="button"
-          aria-label={`${t("usage.contextWindow")}: ${quickLabel}`}
+          aria-label={quickLabel ? `${t("usage.contextWindow")}: ${quickLabel}` : t("usage.contextWindow")}
           aria-expanded={opened}
           aria-haspopup="dialog"
+          data-compact={!quickLabel || undefined}
           onClick={() => setOpened((value) => !value)}
         >
           <RingProgress
@@ -1559,9 +1560,11 @@ const ConversationContext = () => {
             roundCaps
             sections={hasContext ? [{ value: contextPercentage, color: getContextColor(contextPercentage) }] : []}
           />
-          <Text size="xs" fw={650} truncate>
-            {quickLabel}
-          </Text>
+          {quickLabel && (
+            <Text size="xs" fw={650} truncate>
+              {quickLabel}
+            </Text>
+          )}
         </UnstyledButton>
       </Popover.Target>
       <Popover.Dropdown className={classes.conversationContextPopover}>