fix: @ picker shows all agents (main + sub), marks self, files first

- AtPicker: show all sessions passed in (no mainSession prefix filter)
- AtPicker: isSelf flag renders "(You)" badge on current session
- AtPicker: agents include sub-sessions (deck_sub_*)
- AtPicker: show labels when available, fall back to short name
- SessionControls: merge main sessions + sub-sessions into agent list
- SubSessionWindow: pass subSessions through to SessionControls

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: IM.codes

web/src/app.tsx

@@ -1280,7 +1280,7 @@ export function App() {
                 </div>
               );
             })()}
-            <SessionControls ws={wsRef.current} activeSession={activeSessionInfo} inputRef={inputRef} onAfterAction={focusTerminal} onSend={(_name, text) => { addOptimisticUserMessage(text); scrollActiveToBottom(); }} onStopProject={handleStopProject} onRenameSession={() => activeSession && setRenameRequest(activeSession)} sessionDisplayName={activeSessionInfo?.project ?? null} quickData={quickData} detectedModel={activeSession ? detectedModels.get(activeSession) : undefined} hideShortcuts={false} activeThinking={!!activeThinkingTs} mobileFileBrowserOpen={showMobileFileBrowser} onMobileFileBrowserClose={() => setShowMobileFileBrowser(false)} sessions={sessions} />
+            <SessionControls ws={wsRef.current} activeSession={activeSessionInfo} inputRef={inputRef} onAfterAction={focusTerminal} onSend={(_name, text) => { addOptimisticUserMessage(text); scrollActiveToBottom(); }} onStopProject={handleStopProject} onRenameSession={() => activeSession && setRenameRequest(activeSession)} sessionDisplayName={activeSessionInfo?.project ?? null} quickData={quickData} detectedModel={activeSession ? detectedModels.get(activeSession) : undefined} hideShortcuts={false} activeThinking={!!activeThinkingTs} mobileFileBrowserOpen={showMobileFileBrowser} onMobileFileBrowserClose={() => setShowMobileFileBrowser(false)} sessions={sessions} subSessions={subSessions.map(s => ({ sessionName: s.sessionName, type: s.type, label: s.label, state: s.state, parentSession: s.parentSession }))} />
 
             {/* Sub-session bar */}
             {selectedServerId && (
@@ -1345,6 +1345,7 @@ export function App() {
           zIndex={subZIndexes.get(sub.id) ?? 1000}
           onFocus={() => bringSubToFront(sub.id)}
           sessions={sessions}
+          subSessions={subSessions.map(s => ({ sessionName: s.sessionName, type: s.type, label: s.label, state: s.state, parentSession: s.parentSession }))}
         />
       ))}
 

web/src/components/AtPicker.tsx

@@ -11,6 +11,8 @@ interface SessionEntry {
   name: string;
   agentType: string;
   state: string;
+  label?: string | null;
+  isSelf?: boolean;
 }
 
 interface AtPickerProps {
@@ -27,7 +29,7 @@ interface AtPickerProps {
 
 type PickerItem =
   | { kind: 'file'; path: string; basename: string; dir: string }
-  | { kind: 'agent'; session: string; shortName: string; agentType: string; busy: boolean };
+  | { kind: 'agent'; session: string; shortName: string; agentType: string; busy: boolean; isSelf: boolean };
 
 const MODES = ['audit', 'review', 'brainstorm', 'discuss'] as const;
 
@@ -118,7 +120,6 @@ const modeBtnHoverStyle: Record<string, string | number> = {
 export function AtPicker({
   query,
   sessions,
-  mainSession,
   wsClient,
   projectDir,
   onSelectFile,
@@ -135,24 +136,23 @@ export function AtPicker({
   const requestIdRef = useRef<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  // Filter agents by mainSession prefix
+  // Show all sessions as agents — label or short name, mark self
   const agents = useMemo(() => {
-    const prefix = mainSession + '_';
     return sessions
-      .filter((s) => s.name.startsWith(prefix))
       .map((s) => {
         const parts = s.name.split('_');
-        const shortName = parts[parts.length - 1];
+        const shortName = s.label || parts[parts.length - 1] || s.name;
         return {
           kind: 'agent' as const,
           session: s.name,
           shortName,
           agentType: s.agentType,
           busy: s.state !== 'idle',
+          isSelf: !!s.isSelf,
         };
       })
-      .filter((a) => !query || a.shortName.toLowerCase().includes(query.toLowerCase()));
-  }, [sessions, mainSession, query]);
+      .filter((a) => !query || a.shortName.toLowerCase().includes(query.toLowerCase()) || a.session.toLowerCase().includes(query.toLowerCase()));
+  }, [sessions, query]);
 
   // Build flat item list for keyboard nav
   const items = useMemo<PickerItem[]>(() => {
@@ -316,7 +316,12 @@ export function AtPicker({
     );
   }
 
-  if (items.length === 0 && !query) return null;
+  if (items.length === 0 && query) return (
+    <div ref={containerRef} style={containerStyle}>
+      <div style={{ ...itemStyle, color: '#64748b', justifyContent: 'center' }}>No results</div>
+    </div>
+  );
+  if (items.length === 0) return null;
 
   let flatIdx = 0;
 
@@ -365,19 +370,15 @@ export function AtPicker({
               >
                 <span style={{ fontWeight: 500 }}>{a.shortName}</span>
                 <span style={dimStyle}>{a.agentType}</span>
+                {a.isSelf && <span style={{ ...dimStyle, color: '#60a5fa', fontSize: 10, marginLeft: 4 }}>(You)</span>}
                 {a.busy && <span style={busyDotStyle} title="Busy" />}
               </div>
             );
           })}
         </>
       )}
 
-      {/* Empty state */}
-      {items.length === 0 && query && (
-        <div style={{ ...itemStyle, color: '#64748b', justifyContent: 'center' }}>
-          No results
-        </div>
-      )}
+      {/* Empty state handled above */}
     </div>
   );
 }

web/src/components/SessionControls.tsx

@@ -42,6 +42,8 @@ interface Props {
   onMobileFileBrowserClose?: () => void;
   /** All sessions — for @ picker agent list. */
   sessions?: SessionInfo[];
+  /** Sub-sessions — for @ picker agent list (includes deck_sub_*). */
+  subSessions?: Array<{ sessionName: string; type: string; label?: string | null; state: string; parentSession?: string | null }>;
 }
 
 type MenuAction = 'restart' | 'new' | 'stop';
@@ -81,7 +83,7 @@ function loadCodexModel(): CodexModelChoice | null {
   return null;
 }
 
-export function SessionControls({ ws, activeSession, inputRef, onAfterAction, onStopProject, onRenameSession, sessionDisplayName, quickData, detectedModel, hideShortcuts, onSend, onSubRestart, onSubNew, onSubStop, activeThinking, mobileFileBrowserOpen, onMobileFileBrowserClose, sessions }: Props) {
+export function SessionControls({ ws, activeSession, inputRef, onAfterAction, onStopProject, onRenameSession, sessionDisplayName, quickData, detectedModel, hideShortcuts, onSend, onSubRestart, onSubNew, onSubStop, activeThinking, mobileFileBrowserOpen, onMobileFileBrowserClose, sessions, subSessions }: Props) {
   const { t } = useTranslation();
   const swipeBackRef = useSwipeBack(onMobileFileBrowserClose);
   const [hasText, setHasText] = useState(false);
@@ -482,7 +484,24 @@ export function SessionControls({ ws, activeSession, inputRef, onAfterAction, on
         {atPickerOpen && ws && activeSession && (
           <AtPicker
             query={atQuery}
-            sessions={(sessions ?? []).map(s => ({ name: s.name, agentType: s.agentType, state: s.state }))}
+            sessions={[
+              // Main sessions
+              ...(sessions ?? []).map(s => ({
+                name: s.name,
+                agentType: s.agentType,
+                state: s.state,
+                label: s.label ?? null,
+                isSelf: s.name === activeSession.name,
+              })),
+              // Sub-sessions
+              ...(subSessions ?? []).map(s => ({
+                name: s.sessionName,
+                agentType: s.type,
+                state: s.state,
+                label: s.label ?? null,
+                isSelf: s.sessionName === activeSession.name,
+              })),
+            ]}
             mainSession={activeSession.project ? `deck_${activeSession.project}` : activeSession.name.replace(/_[^_]+$/, '')}
             wsClient={ws}
             projectDir={activeSession.projectDir ?? ''}

web/src/components/SubSessionWindow.tsx

@@ -32,6 +32,7 @@ interface Props {
   zIndex: number;
   onFocus: () => void;
   sessions?: SessionInfo[];
+  subSessions?: Array<{ sessionName: string; type: string; label?: string | null; state: string; parentSession?: string | null }>;
 }
 
 type ViewMode = 'terminal' | 'chat';
@@ -59,7 +60,7 @@ function saveLocal(id: string, geom: WindowGeometry, viewMode: ViewMode) {
 }
 
 export function SubSessionWindow({
-  sub, ws, connected, onDiff, onHistory, onMinimize, onClose, onRestart, onRename, zIndex, onFocus, sessions,
+  sub, ws, connected, onDiff, onHistory, onMinimize, onClose, onRestart, onRename, zIndex, onFocus, sessions, subSessions,
 }: Props) {
   const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
   const swipeBackRef = useSwipeBack(isMobile ? onMinimize : null);
@@ -359,6 +360,7 @@ export function SubSessionWindow({
           sessionDisplayName={sub.label ?? agentTag}
           activeThinking={!!activeThinkingTs}
           sessions={sessions}
+          subSessions={subSessions}
         />
       </div>
     </div>