Users, file manager, image generation, budgets and agent workflow

- User management: local accounts (Argon2) and OpenID Connect, admin/user
  roles, per-user folders plus admin-shared folders, read-only session
  sharing, event filtering per user
- File manager with CodeMirror editor and git client (status, diff,
  stage, commit, branches, fetch/pull/push, log, clone/init)
- Image generation via fal.ai: generate_image tool and image page
- Budgets: monthly limits per provider, provider balances/costs
  (OpenRouter, Anthropic admin cost report, fal.ai), price discovery
- Subagents on other models, background tasks, concurrency limits per
  host/model/subagent
- MCP tools loaded on demand (mcp_search/mcp_call), read-only hints
- Permission mode "auto", safe read-only commands always allowed
- Persistent message queue with attachments, deletable
- Live reasoning incl. <think> tags, activity animations, CSS themes,
  mobile layout, statistics per user, upload size handling
- Docker: named volume for state, localhost-bound port

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

web/src/components/QueueList.tsx

@@ -0,0 +1,48 @@
+import { del, post } from "../api";
+import { useT } from "../i18n";
+import { useStore } from "../store";
+import type { QueueItem } from "../types";
+
+const EMPTY: QueueItem[] = [];
+
+/** Messages waiting for the agent; deletable until delivered. */
+export function QueueList({ sessionId, busy }: { sessionId: string; busy: boolean }) {
+  const t = useT();
+  const items = useStore((s) => s.queue[sessionId] ?? EMPTY);
+  if (items.length === 0) return null;
+  return (
+    <div className="queue">
+      <div className="queue-head">
+        <span>{busy ? t("queue.pending", { n: items.length }) : t("queue.stopped", { n: items.length })}</span>
+        {!busy && (
+          <button className="small primary" onClick={() => post(`/sessions/${sessionId}/queue/flush`).catch((e) => alert(e.message))}>
+            {t("queue.sendNow")}
+          </button>
+        )}
+      </div>
+      {items.map((it) => {
+        const text = it.parts.map((p) => (p.type === "text" ? p.text : "")).join(" ").trim();
+        const images = it.parts.filter((p) => p.type === "image") as Extract<QueueItem["parts"][number], { type: "image" }>[];
+        return (
+          <div key={it.id} className="queue-item">
+            {it.source === "background" && <span className="chip">{t("tool.background")}</span>}
+            <span className="queue-text">{it.source === "background" ? t("queue.backgroundResult") : text || "—"}</span>
+            {images.map((p, i) => (
+              <img key={i} src={`data:${p.image.media_type};base64,${p.image.data}`} alt="" />
+            ))}
+            {it.source !== "background" && (
+              <button
+                className="small ghost"
+                aria-label={t("queue.remove")}
+                title={t("queue.remove")}
+                onClick={() => del(`/sessions/${sessionId}/queue/${it.id}`).catch((e) => alert(e.message))}
+              >
+                ×
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}