Claude Code engine, image viewer, colour tags, checks per turn and more

- Claude Code as an engine: chats on a "claude-code/<alias>" model run through
  the claude CLI (stream-json); tool approvals go through our permission
  system. Sign in from the web UI (URL + pasted code), CLI version and update
  from Settings; the Docker image contains the CLI.
- Small models (8k context) for side tasks: input is cut to the model's
  context window; one-line chat status, "What does this do?" on approvals,
  "Plan as automation" (job draft from a chat).
- Mobile: top bar no longer widens the page, image viewer (zoom, swipe, mark
  up, use in message), jump to previous own message, message menu, time under
  every message.
- Approvals: push actions (allow/reject), "always allow in this project"
  (never for dangerous commands) with revoke.
- Per turn: changed files with diffs and rollback; project check command with
  a green/red badge and "let the agent fix it".
- Colour tags for chats in the colours of the active theme.
- Project defaults for new chats, project page (timeline), offline queue.

Tested in a throwaway container with a mock model (8k small model): 26 API
checks passed (permissions, diffs, checks, defaults, job draft, side-task
budget, Claude Code status/login URL, unsigned-in chat).

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

web/src/components/Sidebar.tsx

@@ -1,3 +1,4 @@
+import { ColorSwatches } from "./ColorSwatches";
 import { Icon } from "./Icon";
 import { StatusLeds } from "./StatusLeds";
 import { cycleThemeMode, getThemeMode, onThemeChange } from "../theme";
@@ -25,7 +26,7 @@ function groupKey(ms: number): Key {
 const GROUP_BY = "codecraft.sidebarGroupBy";
 const COLLAPSED = "codecraft.sidebarCollapsed";
 
-const organise = (id: string, body: Partial<Pick<Session, "pinned" | "archived">> & { folder?: string }) => patch(`/sessions/${id}`, body).catch((e) => toast(e.message));
+const organise = (id: string, body: Partial<Pick<Session, "pinned" | "archived">> & { folder?: string; color?: string }) => patch(`/sessions/${id}`, body).catch((e) => toast(e.message));
 
 /** One session in the list, with a menu to pin, file or archive it. */
 function SessionRow({ s, active, attention, busy, folders }: { s: Session; active: boolean; attention: boolean; busy: boolean; folders: string[] }) {
@@ -53,11 +54,12 @@ function SessionRow({ s, active, attention, busy, folders }: { s: Session; activ
   };
   return (
     <div className={`session-row ${menu ? "menu-open" : ""}`}>
-      <button className={`session-item ${active ? "active" : ""}`} onClick={() => navigate(`/s/${s.id}`)}>
+      <button className={`session-item ${active ? "active" : ""}`} data-color={s.color} onClick={() => navigate(`/s/${s.id}`)}>
         <div className="title">
           {attention ? <i className="attn-dot" title={t("sidebar.needsInput")} /> : busy && <i className="busy-ring" title={t("activity.working")} />}
-          <span>{s.title || t("session.untitled")}</span>
+          <span className={s.color ? "color-badge" : undefined}>{s.title || t("session.untitled")}</span>
         </div>
+        {s.summary && <div className="summary" title={s.summary}>{s.summary}</div>}
         <div className="sub">
           {s.shared && <span title={t("sidebar.shared")}><Icon name="share" className="tiny" /> </span>}
           {basename(s.cwd)} · {s.agent} · {fmtRelative(s.updated_at)}
@@ -93,6 +95,7 @@ function SessionRow({ s, active, attention, busy, folders }: { s: Session; activ
               <Icon name="folder-up" /> {t("sidebar.removeFromFolder")}
             </button>
           )}
+          <ColorSwatches value={s.color} onChange={(color) => (setMenu(false), organise(s.id, { color }))} />
           <button role="menuitem" onClick={() => (setMenu(false), organise(s.id, { archived: !s.archived }))}>
             <Icon name="archive" /> {t(s.archived ? "sidebar.unarchive" : "sidebar.archiveOne")}
           </button>
@@ -194,6 +197,11 @@ function GroupHeader({
       )}
       {menu && (
         <div className="session-menu" role="menu" onClick={(e) => e.stopPropagation()}>
+          {g.id.startsWith("project:") && (
+            <button role="menuitem" onClick={() => (setMenu(false), navigate(`/p/${encodeURIComponent(g.id.slice("project:".length))}`))}>
+              <Icon name="clock" /> {t("project.open")}
+            </button>
+          )}
           <button role="menuitem" onClick={() => (setMenu(false), onPin?.())}>
             <Icon name="pin" /> {t(pinned ? "sidebar.groupUnpin" : "sidebar.groupPin")}
           </button>