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/ColorSwatches.tsx

@@ -0,0 +1,29 @@
+import { useT, type Key } from "../i18n";
+
+/** Colour tags of chats: names, drawn in the colours of the active theme (see `[data-color]` in styles.css). */
+export const SESSION_COLORS = ["red", "orange", "yellow", "green", "aqua", "blue", "purple"] as const;
+
+/** Row of colour dots; the selected one is ringed, a second click (or ✕) removes the tag. */
+export function ColorSwatches({ value, onChange }: { value?: string; onChange: (color: string) => void }) {
+  const t = useT();
+  return (
+    <div className="color-swatches" role="radiogroup" aria-label={t("color.label")}>
+      {SESSION_COLORS.map((c) => (
+        <button
+          key={c}
+          type="button"
+          role="radio"
+          aria-checked={value === c}
+          className={`swatch ${value === c ? "on" : ""}`}
+          data-color={c}
+          title={t(`color.${c}` as Key)}
+          aria-label={t(`color.${c}` as Key)}
+          onClick={(e) => {
+            e.stopPropagation();
+            onChange(value === c ? "" : c);
+          }}
+        />
+      ))}
+    </div>
+  );
+}