feat: refine mobile session status bar header

Remove the per-row agent color dot (and its now-unused helpers), keeping only
the status indicator. Add a "+" button to the panel header that opens a new
session draft targeting the filtered project (or the most recently active
session's project under "All", falling back to the default target), and
restyle the close button to match it.

Show the context token usage next to the percentage (e.g. 5.1% 20.4K/400.0K)
at a larger, consistent size, and compute the percentage with a fraction
instead of the store's integer-rounded value.

packages/ui/src/components/chat/MobileSessionStatusBar.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useSessionUIStore } from '@/sync/session-ui-store';
-import { useSelectionStore } from '@/sync/selection-store';
 import { useAllSessionStatuses, useAllLiveSessions } from '@/sync/sync-context';
 import { useGlobalSessionsStore, ensureGlobalSessionsLoaded, refreshGlobalSessions } from '@/stores/useGlobalSessionsStore';
 import { useConfigStore } from '@/stores/useConfigStore';
@@ -9,7 +8,6 @@ import { useProjectsStore } from '@/stores/useProjectsStore';
 import type { Session } from '@opencode-ai/sdk/v2';
 import type { ProjectEntry } from '@/lib/api/types';
 import { cn, formatDirectoryName } from '@/lib/utils';
-import { getAgentColor } from '@/lib/agentColors';
 import type { SessionContextUsage } from '@/stores/types/sessionTypes';
 import { PROJECT_ICON_MAP, PROJECT_COLOR_MAP, ProjectIconImage } from '@/lib/projectMeta';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
@@ -172,17 +170,7 @@ function useSessionGrouping(
   return { sessions: processedSessions, totalRunning, totalUnread, totalCount: processedSessions.length };
 }
 
-function useSessionHelpers(agents: Array<{ name: string }>) {
+function useSessionHelpers() {
-  const getSessionAgentName = React.useCallback((session: Session): string => {
-    const agent = (session as { agent?: string }).agent;
-    if (agent) return agent;
-
-    const sessionAgentSelection = useSelectionStore.getState().getSessionAgentSelection(session.id);
-    if (sessionAgentSelection) return sessionAgentSelection;
-
-    return agents[0]?.name ?? 'agent';
-  }, [agents]);
-
   const getSessionTitle = React.useCallback((session: Session): string => {
     const title = session.title;
     if (title && title.trim()) return title;
@@ -194,7 +182,7 @@ function useSessionHelpers(agents: Array<{ name: string }>) {
     return (unseenCounts[sessionId] ?? 0) > 0;
   }, [unseenCounts]);
 
-  return { getSessionAgentName, getSessionTitle, needsAttention };
+  return { getSessionTitle, needsAttention };
 }
 
 // Per-project status indicators (running / unread) for the filter chips.
@@ -300,14 +288,29 @@ function UnreadIndicator({ count }: { count: number }) {
 function TokenUsageIndicator({ contextUsage }: { contextUsage: SessionContextUsage | null }) {
   if (!contextUsage || contextUsage.totalTokens === 0) return null;
 
-  const percentage = Math.min(contextUsage.percentage, 999);
+  // Recompute with a fraction: contextUsage.percentage is rounded to an integer
+  // in the store, which would always render as "X.0%".
+  const percentage = contextUsage.contextLimit > 0
+    ? Math.min((contextUsage.totalTokens / contextUsage.contextLimit) * 100, 999)
+    : 0;
   const colorClass =
     percentage >= 90 ? 'text-[var(--status-error)]' :
     percentage >= 75 ? 'text-[var(--status-warning)]' : 'text-[var(--status-success)]';
 
+  const formatTokens = (value: number): string => {
+    if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+    if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+    return String(value);
+  };
+
+  const tokens = contextUsage.contextLimit > 0
+    ? `${formatTokens(contextUsage.totalTokens)}/${formatTokens(contextUsage.contextLimit)}`
+    : formatTokens(contextUsage.totalTokens);
+
   return (
-    <span className={cn("text-[12px] tabular-nums font-medium", colorClass)}>
+    <span className="flex items-baseline gap-1.5 text-[15px] tabular-nums">
-      {percentage.toFixed(1)}%
+      <span className={cn("font-medium", colorClass)}>{percentage.toFixed(1)}%</span>
+      <span className="text-[var(--surface-mutedForeground)]">{tokens}</span>
     </span>
   );
 }
@@ -316,20 +319,16 @@ function TokenUsageIndicator({ contextUsage }: { contextUsage: SessionContextUsa
 function SessionItem({
   session,
   isCurrent,
-  getSessionAgentName,
   getSessionTitle,
   onClick,
   needsAttention,
 }: {
   session: SessionWithStatus;
   isCurrent: boolean;
-  getSessionAgentName: (s: Session) => string;
   getSessionTitle: (s: Session) => string;
   onClick: () => void;
   needsAttention: (sessionId: string) => boolean;
 }) {
-  const agentName = getSessionAgentName(session);
-  const agentColor = getAgentColor(agentName);
   const attention = needsAttention(session.id);
 
   return (
@@ -346,11 +345,6 @@ function SessionItem({
         <StatusIndicator isRunning={session._statusType !== 'idle'} needsAttention={attention} />
       </span>
 
-      <span
-        className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-        style={{ backgroundColor: `var(${agentColor.var})` }}
-      />
-
       <span className={cn(
         "flex-1 truncate text-[15px] leading-tight",
         isCurrent ? "font-semibold text-[var(--surface-foreground)]" : "text-[var(--surface-foreground)]"
@@ -500,8 +494,8 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
   const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
   const sessionStatus = useAllSessionStatuses();
   const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
+  const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
   const getContextUsage = useSessionUIStore((state) => state.getContextUsage);
-  const agents = useConfigStore((state) => state.agents);
   const getCurrentModel = useConfigStore((state) => state.getCurrentModel);
   const isMobile = useUIStore((state) => state.isMobile);
   const showMobileSessionStatusBar = useUIStore((state) => state.showMobileSessionStatusBar);
@@ -512,7 +506,7 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
   const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
 
   const { sessions: sortedSessions, totalRunning, totalUnread } = useSessionGrouping(sessions, sessionStatus);
-  const { getSessionAgentName, getSessionTitle, needsAttention } = useSessionHelpers(agents);
+  const { getSessionTitle, needsAttention } = useSessionHelpers();
   const getProjectStatus = useProjectStatus(sessions, sessionStatus, currentSessionId);
   const resolveProjectRoots = useProjectRootsResolver();
 
@@ -572,7 +566,28 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
     setOpen(false);
   };
 
-  const renderHeader = React.useCallback((closeButton: React.ReactNode) => (
+  // "+" — start a new session draft. Target the project selected in the filter;
+  // for "All", use the most recently active session's directory, falling back to
+  // the store's own default target when there are no sessions.
+  const handleNewChat = React.useCallback(() => {
+    setOpen(false);
+    if (filterProjectId) {
+      const project = projects.find((p) => p.id === filterProjectId);
+      if (project) {
+        openNewSessionDraft({ selectedProjectId: project.id, directoryOverride: project.path });
+        return;
+      }
+    }
+    const mostRecent = [...sessions].sort((a, b) => {
+      const aTime = (a as { time?: { updated?: number } }).time?.updated ?? 0;
+      const bTime = (b as { time?: { updated?: number } }).time?.updated ?? 0;
+      return bTime - aTime;
+    })[0];
+    const directory = mostRecent ? sessionDirectory(mostRecent) : '';
+    openNewSessionDraft(directory ? { directoryOverride: directory } : undefined);
+  }, [filterProjectId, projects, sessions, openNewSessionDraft, setOpen]);
+
+  const renderHeader = React.useCallback(() => (
     <div className="shrink-0">
       <div className="flex justify-center pt-2.5 pb-1">
         <div className="h-1 w-9 rounded-full bg-[color-mix(in_srgb,var(--surface-mutedForeground)_40%,transparent)]" />
@@ -586,7 +601,23 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
           <RunningIndicator count={totalRunning} />
           <UnreadIndicator count={totalUnread} />
           <TokenUsageIndicator contextUsage={contextUsage} />
-          {closeButton}
+          <button
+            type="button"
+            onClick={handleNewChat}
+            aria-label={t('mobile.sessions.newChat')}
+            className="flex size-8 items-center justify-center rounded-full text-[var(--surface-mutedForeground)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]"
+            style={{ touchAction: 'manipulation' }}
+          >
+            <Icon name="add" className="h-5 w-5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            className="flex size-8 items-center justify-center rounded-full text-[var(--surface-mutedForeground)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]"
+            style={{ touchAction: 'manipulation' }}
+          >
+            <Icon name="close" className="h-5 w-5" />
+          </button>
         </div>
       </div>
 
@@ -620,7 +651,7 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
         </div>
       )}
     </div>
-  ), [t, totalRunning, totalUnread, contextUsage, projects, filterProjectId, setFilterProjectId, formatProjectLabel, currentTheme, getProjectStatus]);
+  ), [t, totalRunning, totalUnread, contextUsage, projects, filterProjectId, setFilterProjectId, formatProjectLabel, currentTheme, getProjectStatus, handleNewChat, setOpen]);
 
   if (!isMobile || !showMobileSessionStatusBar) {
     return null;
@@ -646,7 +677,6 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
               key={session.id}
               session={session}
               isCurrent={session.id === currentSessionId}
-              getSessionAgentName={getSessionAgentName}
               getSessionTitle={getSessionTitle}
               onClick={() => handleSessionClick(session)}
               needsAttention={needsAttention}