Chat tabs, chat mode, own modes, compaction notice, CLI binaries again

- Terminals and file managers as tabs of a chat; chat terminals keep running on
  the server (no idle timeout) and re-attach from any device
- "Just chat" in New session and a built-in chat mode with a lean prompt and only
  web tools; custom modes with kind (coding/conversation), read-only and tool picker
- Mode selector as a dropdown
- The chat shows running compactions (automatic: tokens and share of the limit)
  and labels summaries
- Docker image builds and serves the terminal client binaries again
- Fix: atomic session updates; background title/usage writes no longer undo each
  other (auto compaction triggered one turn late)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/components/ChatView.tsx

@@ -8,7 +8,7 @@ import { fmtCompact, fmtCost, fmtNumber, fmtPercent, useT, type Key } from "../i
 import { navigate } from "../router";
 import { dismissError, loadSession, loadSessions, useStore } from "../store";
 import type { Aggregate, ImageData, Message, Part, Session } from "../types";
-import { ActivityLine, Dots, ThinkIcon, WorkBar } from "./Activity";
+import { ActivityLine, Dots, Spinner, ThinkIcon, WorkBar } from "./Activity";
 import { useReasoningMode } from "../prefs";
 import { Composer } from "./Composer";
 import { ShareDialog } from "./ShareDialog";
@@ -24,6 +24,7 @@ import { RewindDialog } from "./RewindDialog";
 import { ShellsChip } from "./ShellsPanel";
 import { TodoList, ToolCard } from "./ToolCard";
 import { confirmDialog, promptDialog, toast } from "../dialogs";
+import { ChatTabBar, ChatTabPanes, useChatTabs } from "./ChatTabs";
 
 type ToolResult = Extract<Part, { type: "tool_result" }>;
 
@@ -145,8 +146,10 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
   const allPermissions = useStore((s) => s.permissions);
   const allQuestions = useStore((s) => s.questions);
   const waiting = useStore((s) => s.waiting[sessionId]);
+  const compacting = useStore((s) => s.compacting[sessionId]);
   const readOnly = useStore((s) => !!s.readOnly[sessionId]);
   const isAdmin = useStore((s) => s.me?.role === "admin");
+  const tabs = useChatTabs(sessionId, session?.cwd ?? "");
   const [sharing, setSharing] = useState(false);
   const models = useModels();
   const [loadError, setLoadError] = useState<string>();
@@ -314,14 +317,14 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
             )}
             <button
               className="small ghost hide-mobile"
-              onClick={() => {
-                sessionStorage.setItem("codecraft.termCwd", session.cwd);
-                navigate("/terminal/new");
-              }}
+              onClick={() => void tabs.openTerminal()}
               title={t("terminal.here")}
             >
               <Icon name="terminal" />
             </button>
+            <button className="small ghost" onClick={tabs.openFiles} title={t("files.newTab")}>
+              <Icon name="folder" />
+            </button>
             {!session.parent_id && (
               <button className="small ghost" onClick={forkSession} disabled={busy} title={t("chat.fork")}>
                 <Icon name="fork" />
@@ -366,6 +369,9 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
           </>
         )}
       </div>
+      <ChatTabBar state={tabs} />
+      <ChatTabPanes state={tabs} />
+      <div className="chat-pane" hidden={tabs.tab !== "chat"}>
       {session.agent === "craft" && !session.parent_id && <PhaseBar phase={session.phase} deep={session.clean_room === false} />}
       <WorkBar active={busy && permissions.length === 0 && questions.length === 0} />
       <div
@@ -402,7 +408,13 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
             if (summary && summary.type === "summary") {
               return (
                 <details key={m.id} className="summary-divider">
-                  <summary>{t("chat.compacted")}</summary>
+                  <summary>
+                    {summary.auto
+                      ? t("chat.compactedAuto", { tokens: summary.tokens ? fmtCompact(summary.tokens) : "?" })
+                      : summary.tokens
+                        ? t("chat.compactedManual", { tokens: fmtCompact(summary.tokens) })
+                        : t("chat.compacted")}
+                  </summary>
                   <Markdown text={summary.text} />
                 </details>
               );
@@ -452,6 +464,19 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
               <AssistantParts parts={draft.parts} results={results} running={busy} live baseDir={session.cwd} />
             </div>
           )}
+          {compacting && (
+            <div className={`compacting-card ${compacting.auto ? "auto" : ""}`} role="status">
+              <Spinner small />
+              <div>
+                <b>{t(compacting.auto ? "chat.compactingAuto" : "chat.compactingManual")}</b>
+                {compacting.auto && compacting.tokens && compacting.limit && (
+                  <div className="hint">
+                    {t("chat.compactingDetail", { tokens: fmtCompact(compacting.tokens), limit: fmtCompact(compacting.limit), pct: fmtPercent(compacting.tokens / compacting.limit) })}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
           {(busy || waiting) && (
             <ActivityLine sessionId={sessionId} draft={draft} pendingTool={pendingTool} waiting={waiting} permissionPending={permissions.length > 0 || questions.length > 0} />
           )}
@@ -514,6 +539,7 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
         onUpdate={update}
       />
       )}
+      </div>
     </>
   );
 }