feat(frontend): Active/Archive as independent accordions (replaces toggle)

frontend/src/shell/AppShell.tsx

@@ -35,7 +35,8 @@ export function AppShell() {
 
   const queryClient = useQueryClient();
   const [panelSession, setPanelSession] = useState<SessionSummary | null>(null);
-  const [showArchive, setShowArchive] = useState(false);
+  const [activeOpen, setActiveOpen] = useState(true);
+  const [archiveOpen, setArchiveOpen] = useState(false);
   const [renameTarget, setRenameTarget] = useState<SessionSummary | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<SessionSummary | null>(null);
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
@@ -211,10 +212,17 @@ export function AppShell() {
           </span>
         </div>
         <div className="flex-1 overflow-y-auto px-2 pb-4">
-          {showArchive ? (
-            <NavSessions sessions={archivedList} activeSessionId={activeSessionId} onOpenPanel={openPanel} menuFor={menuFor} />
-          ) : (
-            <div className="flex flex-col gap-3">
+          <button
+            type="button"
+            onClick={() => setActiveOpen((v) => !v)}
+            aria-expanded={activeOpen}
+            className="flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-bold uppercase tracking-wide text-primary hover:text-primary/80"
+          >
+            <span className="select-none">{activeOpen ? "▾" : "▸"}</span>
+            <span>Active sessions</span>
+          </button>
+          {activeOpen && (
+            <div className="flex flex-col gap-3 pb-2">
               {groups.map((g) => (
                 <div key={g}>
                   <button
@@ -249,12 +257,19 @@ export function AppShell() {
               </div>
             </div>
           )}
+
           <button
-            onClick={() => setShowArchive((v) => !v)}
-            className="mt-3 w-full rounded-md px-2 py-1.5 text-left text-[0.7rem] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent"
+            type="button"
+            onClick={() => setArchiveOpen((v) => !v)}
+            aria-expanded={archiveOpen}
+            className="mt-2 flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-bold uppercase tracking-wide text-muted-foreground hover:text-foreground"
           >
-            {showArchive ? "← Active sessions" : `Archive (${archivedList.length})`}
+            <span className="select-none">{archiveOpen ? "▾" : "▸"}</span>
+            <span>Archive ({archivedList.length})</span>
           </button>
+          {archiveOpen && (
+            <NavSessions sessions={archivedList} activeSessionId={activeSessionId} onOpenPanel={openPanel} menuFor={menuFor} />
+          )}
         </div>
       </aside>