Add Web Push, guided start screen, SVG icons, chunked uploads, rename

- Web Push (VAPID + RFC 8291, pure Rust): permission/question/finished
  notifications while no app window is visible; settings with test button
- Guided new-session flow: task, craft target (website/app/game/old
  software/fresh), clean room or deep, description, model, folder
  (new, existing or cloned git repository); originals upload to original/
- Craft phase bar (craft_phase tool) for study/specify/build/check/ready
- Chunked uploads (8 MB) up to server.max_upload_mb (default 500 MB)
- All UI glyphs and emojis replaced by themeable SVG icons
- Rename dialog with manual name or model-generated suggestion

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

web/src/api.ts

@@ -62,6 +62,7 @@ export function connectEvents(handlers: {
     ws = new WebSocket(`${proto}://${location.host}/api/ws`);
     ws.onopen = () => {
       retry = 0;
+      reportVisibility();
       handlers.onOpen();
     };
     ws.onmessage = (m) => {
@@ -80,7 +81,12 @@ export function connectEvents(handlers: {
   };
   open();
   // Reconnect immediately when the app comes back to the foreground (mobile PWA).
+  // The server sends push notifications only while no app window is visible.
+  const reportVisibility = () => {
+    if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "visibility", visible: document.visibilityState === "visible" }));
+  };
   const onVisible = () => {
+    reportVisibility();
     if (document.visibilityState === "visible" && ws && ws.readyState > WebSocket.OPEN) {
       clearTimeout(timer);
       open();
@@ -94,3 +100,28 @@ export function connectEvents(handlers: {
     ws?.close();
   };
 }
+
+const CHUNK = 8 * 1024 * 1024;
+
+/**
+ * Upload a file in 8 MB chunks (stays below reverse proxy body limits; up to the
+ * server's max_upload_mb). `onProgress` gets the uploaded fraction 0..1.
+ */
+export async function uploadFile(path: string, file: Blob, onProgress?: (fraction: number) => void): Promise<void> {
+  let offset = 0;
+  do {
+    const chunk = file.slice(offset, offset + CHUNK);
+    const res = await fetch(`/api/files/upload?path=${encodeURIComponent(path)}&offset=${offset}`, { method: "PUT", body: chunk, credentials: "same-origin" });
+    if (!res.ok) {
+      let msg = `HTTP ${res.status}`;
+      try {
+        msg = (await res.json()).error ?? msg;
+      } catch {
+        if (res.status === 413) msg = "too large for the reverse proxy";
+      }
+      throw new Error(msg);
+    }
+    offset += chunk.size;
+    onProgress?.(file.size ? offset / file.size : 1);
+  } while (offset < file.size);
+}

web/src/components/Activity.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useEffect, useState } from "react";
 import { fmtCompact, useT } from "../i18n";
 import { useStore, type Draft } from "../store";
@@ -143,8 +144,8 @@ export function ActivityLine({
       <span className="activity-text">{label}</span>
       {step && (
         <span className="activity-meta">
-          ({fmtElapsed(elapsed)} · ↑ {step.estimated ? "~" : ""}
-          {fmtCompact(step.promptTokens)} {t("activity.prefill")} · ↓ {prefill ? t("activity.prefilling") : `${fmtCompact(generated)} ${t("activity.generated")}`})
+          ({fmtElapsed(elapsed)} · <Icon name="arrow-up" className="tiny" /> {step.estimated ? "~" : ""}
+          {fmtCompact(step.promptTokens)} {t("activity.prefill")} · <Icon name="arrow-down" className="tiny" /> {prefill ? t("activity.prefilling") : `${fmtCompact(generated)} ${t("activity.generated")}`})
         </span>
       )}
     </div>
@@ -163,8 +164,8 @@ export function useTitleActivity() {
   const waiting = useStore((s) => s.permissions.length + s.questions.length);
   useEffect(() => {
     const base = "CodeCraft";
-    if (waiting > 0) document.title = `● ${t("activity.titleInput")} – ${base}`;
-    else if (busyCount > 0) document.title = `⏳ ${t("activity.titleBusy", { n: busyCount })} – ${base}`;
+    if (waiting > 0) document.title = `(!) ${t("activity.titleInput")} – ${base}`;
+    else if (busyCount > 0) document.title = `(${busyCount}) ${t("activity.titleBusy", { n: busyCount })} – ${base}`;
     else document.title = base;
   }, [busyCount, waiting, t]);
 }

web/src/components/Budget.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useFetch } from "../hooks";
 import { fmtCost, fmtPercent, useT } from "../i18n";
 
@@ -30,7 +31,7 @@ function Bar({ share, warning, exceeded }: { share: number; warning: boolean; ex
 
 function Remote({ r, t }: { r: BudgetRow["remote"]; t: ReturnType<typeof useT> }) {
   if (!r) return <span className="muted">–</span>;
-  if (r.error) return <span className="muted" title={r.error}>⚠ {t("budget.remoteError")}</span>;
+  if (r.error) return <span className="muted" title={r.error}><Icon name="warning" /> {t("budget.remoteError")}</span>;
   const cur = r.currency ?? "USD";
   if (r.spent_month !== undefined) return <span title={t("budget.orgWide")}>{t("budget.providerSpent", { v: fmtCost(r.spent_month, cur) })}</span>;
   if (r.remaining !== null && r.remaining !== undefined) return <span>{t("budget.balance", { v: fmtCost(r.remaining, cur) })}</span>;

web/src/components/ChatView.tsx

@@ -1,8 +1,9 @@
+import { Icon } from "./Icon";
 import { base64Size, FileChip, FileFigure, fileType } from "./FileFigure";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { del, get, patch, post } from "../api";
 import { useModels } from "../hooks";
-import { fmtCompact, fmtCost, fmtNumber, fmtPercent, useT } from "../i18n";
+import { fmtCompact, fmtCost, fmtNumber, fmtPercent, useT, type Key } from "../i18n";
 import { navigate } from "../router";
 import { dismissError, loadSession, loadSessions, useStore } from "../store";
 import type { Aggregate, ImageData, Message, Part, Session } from "../types";
@@ -10,6 +11,7 @@ import { ActivityLine, Dots, ThinkIcon, WorkBar } from "./Activity";
 import { useReasoningMode } from "../prefs";
 import { Composer } from "./Composer";
 import { ShareDialog } from "./ShareDialog";
+import { RenameDialog } from "./RenameDialog";
 import { QueueList } from "./QueueList";
 import { BudgetChip } from "./Budget";
 import { PermissionCard, QuestionCard } from "./Interaction";
@@ -47,7 +49,7 @@ function Reasoning({ text, live }: { text: string; live: boolean }) {
       <button className="reasoning-head" onClick={() => setToggled(!open)} aria-expanded={open}>
         {live ? <Dots /> : <ThinkIcon />}
         <span>{live ? t("chat.reasoningLive") : t("chat.reasoningDone", { n: words })}</span>
-        <span aria-hidden="true">{open ? "▾" : "▸"}</span>
+        <Icon name={open ? "chevron-down" : "chevron-right"} />
       </button>
       {open && (
         <div ref={bodyRef} className={`body ${live ? "streaming-text" : ""}`}>
@@ -240,27 +242,22 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
     <>
       <div className="topbar">
         <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}>
-          ☰
+          <Icon name="menu" />
         </button>
         <div className="grow">
-          {editingTitle ? (
-            <input
-              autoFocus
-              defaultValue={session.title}
-              onBlur={(e) => (setEditingTitle(false), update({ title: e.target.value }))}
-              onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
-              style={{ width: "100%" }}
-            />
-          ) : (
-            <h1 onDoubleClick={() => setEditingTitle(true)} title={t("chat.renameHint")}>
-              {session.parent_id && (
-                <a href={`#/s/${session.parent_id}`} style={{ marginRight: 8 }}>
-                  ↩
-                </a>
-              )}
-              {session.title || t("session.untitled")}
-            </h1>
-          )}
+          <h1 onDoubleClick={() => !readOnly && setEditingTitle(true)} title={readOnly ? undefined : t("chat.renameHint")}>
+            {session.parent_id && (
+              <a href={`#/s/${session.parent_id}`} style={{ marginRight: 8 }}>
+                <Icon name="undo" />
+              </a>
+            )}
+            {session.title || t("session.untitled")}
+            {!readOnly && (
+              <button className="ghost small title-edit" onClick={() => setEditingTitle(true)} title={t("rename.title")} aria-label={t("rename.title")}>
+                <Icon name="edit" />
+              </button>
+            )}
+          </h1>
           <div className="path">{session.cwd}</div>
         </div>
         {ctxShare !== undefined && (
@@ -271,8 +268,8 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
         {stats && (
           <button className="chip" style={{ border: "none" }} onClick={() => setShowStats((x) => !x)} title={t("chat.statsHint")}>
             <span className="hide-mobile">
-              {fmtCompact(stats.total.input_tokens + stats.total.cache_read_tokens + stats.total.cache_write_tokens)}↑{" "}
-              {fmtCompact(stats.total.output_tokens)}↓ ·{" "}
+              {fmtCompact(stats.total.input_tokens + stats.total.cache_read_tokens + stats.total.cache_write_tokens)}<Icon name="arrow-up" className="tiny" />{" "}
+              {fmtCompact(stats.total.output_tokens)}<Icon name="arrow-down" className="tiny" /> ·{" "}
             </span>
             {fmtCost(stats.total.cost, stats.currency)}
           </button>
@@ -285,17 +282,17 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
           <>
             {!session.parent_id && (
               <button className="small ghost" onClick={() => setSharing(true)} title={t("share.title")}>
-                ⇄
+                <Icon name="share" />
               </button>
             )}
             {!session.parent_id && (
               <button className="small ghost" onClick={forkSession} disabled={busy} title={t("chat.fork")}>
-                🔀
+                <Icon name="fork" />
               </button>
             )}
             <details className="menu-pop">
               <summary className="small ghost" title={t("chat.export")}>
-                💾
+                <Icon name="download" />
               </summary>
               <div className="menu-pop-body">
                 <a href={`/api/sessions/${sessionId}/export?format=md`} download>
@@ -307,14 +304,15 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
               </div>
             </details>
             <button className="small ghost" onClick={() => post(`/sessions/${sessionId}/compact`).catch((e) => toast(e.message))} disabled={busy} title={t("command.compact")}>
-              ⇊
+              <Icon name="compact" />
             </button>
             <button className="small ghost danger" onClick={remove} title={t("chat.delete")}>
-              🗑
+              <Icon name="trash" />
             </button>
           </>
         )}
       </div>
+      {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
         className="chat-scroll"
@@ -375,7 +373,7 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
                   {!busy && !readOnly && (
                     <div className="msg-actions">
                       <button className="small ghost" onClick={() => rewind(m)} title={t("chat.rewind")}>
-                        ✎
+                        <Icon name="edit" />
                       </button>
                     </div>
                   )}
@@ -417,7 +415,7 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
             <div key={e.id} className="error-box" role="alert">
               <span>{e.message}</span>
               <button className="small ghost" onClick={() => dismissError(sessionId, e.id)} aria-label={t("common.close")}>
-                ×
+                <Icon name="close" />
               </button>
             </div>
           ))}
@@ -438,11 +436,12 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
         {!following && (
           <div className="jump-latest">
             <button className="primary" onClick={jumpToLatest} title={t("chat.jumpLatest")} aria-label={t("chat.jumpLatest")}>
-              ↓
+              <Icon name="arrow-down" />
             </button>
           </div>
         )}
       </div>
+      {editingTitle && <RenameDialog sessionId={sessionId} title={session.title} onClose={() => setEditingTitle(false)} />}
       {sharing && <ShareDialog sessionId={sessionId} onClose={() => setSharing(false)} />}
       {rewinding && <RewindDialog sessionId={sessionId} messageId={rewinding.id} onDone={rewindDone} onClose={() => setRewinding(undefined)} />}
       {!readOnly && <QueueList sessionId={sessionId} busy={busy} />}
@@ -500,3 +499,32 @@ function fmtK(n: number) {
   if (n >= 1000) return `${Math.round(n / 1000)}k`;
   return String(n);
 }
+
+/** Craft workflow progress: Study → (Specify) → Build → Check → Ready. */
+function PhaseBar({ phase, deep }: { phase?: string; deep: boolean }) {
+  const t = useT();
+  const phases = deep ? ["study", "specify", "build", "check", "ready"] : ["study", "build", "check", "ready"];
+  const cur = phase ? phases.indexOf(phase) : -1;
+  return (
+    <div className="phase-bar" aria-label="Craft progress">
+      {phases.map((p, i) => {
+        const state = i < cur || (p === "ready" && cur === i) ? "done" : i === cur ? "current" : "";
+        return (
+          <span key={p} style={{ display: "contents" }}>
+            {i > 0 && <span className={`sep ${i <= cur ? "done" : ""}`} />}
+            <span className={`phase ${state}`}>
+              <span className="dot">
+                {state === "done" && (
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="m5 12 4.5 4.5L19 7" />
+                  </svg>
+                )}
+              </span>
+              {t(`phase.${p}` as Key)}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}

web/src/components/Composer.tsx

@@ -1,4 +1,6 @@
+import { Icon } from "./Icon";
 import { formatSize } from "./FileFigure";
+import { uploadFile } from "../api";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useAgents, useFetch } from "../hooks";
 import { useT, type Key } from "../i18n";
@@ -20,7 +22,7 @@ const MAX_SIDE = 2000;
 
 
 /** Read an image and downscale it: models don't use more detail, and uploads stay small. */
-async function readImage(file: File): Promise<ImageData> {
+export async function readImage(file: File): Promise<ImageData> {
   const bitmap = await createImageBitmap(file);
   const scale = Math.min(1, MAX_SIDE / Math.max(bitmap.width, bitmap.height));
   const canvas = document.createElement("canvas");
@@ -179,8 +181,9 @@ export function Composer({
         await fetch(`/api/files/create?`, { method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ path: `${session.cwd}/.codecraft/uploads`, dir: true }) });
         // Keep uploads out of git status without touching the project's .gitignore.
         await fetch(`/api/files/upload?path=${encodeURIComponent(`${session.cwd}/.codecraft/uploads/.gitignore`)}`, { method: "PUT", body: "*\n", credentials: "same-origin" });
-        const res = await fetch(`/api/files/upload?path=${encodeURIComponent(path)}`, { method: "PUT", body: f, credentials: "same-origin" });
-        if (!res.ok) throw new Error(`${f.name}: HTTP ${res.status}${res.status === 413 ? " – too large for the reverse proxy" : ""}`);
+        await uploadFile(path, f).catch((e) => {
+          throw new Error(`${f.name}: ${e.message}`);
+        });
         setFiles((cur) => [...cur, { name: f.name, path, size: f.size }]);
       } catch (e: any) {
         toast(e.message ?? String(e));
@@ -229,10 +232,10 @@ export function Composer({
           <div className="attachments">
             {files.map((f) => (
               <div className="att file" key={f.path} title={f.path}>
-                <span>📄 {f.name}</span>
+                <span><Icon name="file" /> {f.name}</span>
                 <small>{formatSize(f.size)}</small>
                 <button onClick={() => removeFile(f.path)} aria-label={t("common.remove")}>
-                  ×
+                  <Icon name="close" />
                 </button>
               </div>
             ))}
@@ -245,7 +248,7 @@ export function Composer({
               <div className="att" key={i}>
                 <img src={`data:${img.media_type};base64,${img.data}`} alt="" />
                 <button onClick={() => setImages((cur) => cur.filter((_, j) => j !== i))} aria-label={t("common.remove")}>
-                  ×
+                  <Icon name="close" />
                 </button>
               </div>
             ))}
@@ -310,14 +313,14 @@ export function Composer({
           </select>
           <ModelSelect value={session.model} onChange={(m) => onUpdate({ model: m })} title={t("composer.model")} />
           <label className="ghost" style={{ cursor: "pointer", padding: "3px 6px" }} title={t("composer.attach")}>
-            📎
+            <Icon name="clip" />
             <input type="file" multiple hidden onChange={(e) => e.target.files && (addFiles(e.target.files), (e.target.value = ""))} />
           </label>
           </div>
           <div className="composer-actions">
           {busy && (
             <button className="danger" onClick={onAbort} title="Esc">
-              ■ {t("composer.stop")}
+              <Icon name="stop" /> {t("composer.stop")}
             </button>
           )}
           <button className="primary" onClick={send} disabled={uploading > 0 || (!text.trim() && images.length === 0 && files.length === 0)}>

web/src/components/FileFigure.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useEffect, useState, type ReactNode } from "react";
 
 /** Human-readable file size. */
@@ -137,7 +138,7 @@ export function FileChip({ url, name, size, sizeText }: { url?: string; name: st
   const type = fileType(name, meta.mime);
   return (
     <a className="file-chip" href={url} target="_blank" rel="noreferrer" title={name}>
-      <span className="file-chip-icon">📎</span>
+      <Icon name="clip" className="file-chip-icon" />
       <span className="file-chip-name">{basename(name)}</span>
       {type && <span className="file-badge">{type}</span>}
       {(sizeText || sz !== undefined) && <span className="file-chip-size">{sizeText ?? formatSize(sz!)}</span>}

web/src/components/Files.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { del, get, post, put } from "../api";
 import { useFetch } from "../hooks";
@@ -45,13 +46,13 @@ const baseName = (p: string) => p.split("/").filter(Boolean).pop() ?? p;
 const dirName = (p: string) => p.replace(/\/[^/]+\/?$/, "") || "/";
 
 function icon(e: Entry) {
-  if (e.is_dir) return "📁";
-  if (IMAGE.test(e.name)) return "🖼";
-  if (/\.(wav|mp3|ogg|flac|m4a|xm|mod|s3m|it)$/i.test(e.name)) return "🎵";
-  if (/\.(glb|gltf|stl|obj|step|stp|igs|iges)$/i.test(e.name)) return "🧊";
-  if (/\.(pdf|docx|pptx|xlsx|xls|ods)$/i.test(e.name)) return "📑";
-  if (/\.(md|txt)$/i.test(e.name)) return "📝";
-  return "📄";
+  if (e.is_dir) return <Icon name="folder" className="ficon dir" />;
+  if (IMAGE.test(e.name)) return <Icon name="image" className="ficon" />;
+  if (/\.(wav|mp3|ogg|flac|m4a|xm|mod|s3m|it)$/i.test(e.name)) return <Icon name="music" className="ficon" />;
+  if (/\.(glb|gltf|stl|obj|step|stp|igs|iges)$/i.test(e.name)) return <Icon name="cube" className="ficon" />;
+  if (/\.(pdf|docx|pptx|xlsx|xls|ods)$/i.test(e.name)) return <Icon name="file-doc" className="ficon" />;
+  if (/\.(md|txt)$/i.test(e.name)) return <Icon name="file-text" className="ficon" />;
+  return <Icon name="file" className="ficon" />;
 }
 
 export function Files({ onMenu }: { onMenu: () => void }) {
@@ -243,13 +244,13 @@ export function Files({ onMenu }: { onMenu: () => void }) {
         )}
         <input className="files-search" placeholder={t("files.search")} value={search} onChange={(e) => setSearch(e.target.value)} />
         <button className="small" title={t("files.newFile")} onClick={() => newEntry(false)}>
-          + 📄
+          <Icon name="plus" className="tiny" /> <Icon name="file" />
         </button>
         <button className="small" title={t("files.newFolder")} onClick={() => newEntry(true)}>
-          + 📁
+          <Icon name="plus" className="tiny" /> <Icon name="folder" />
         </button>
         <button className="small" title={t("files.upload")} onClick={() => uploadRef.current?.click()}>
-          ⤒
+          <Icon name="upload" />
         </button>
         <input ref={uploadRef} type="file" multiple hidden onChange={(e) => e.target.files && upload(e.target.files)} />
         <button className={`small ${hidden ? "active" : ""}`} title={t("files.showHidden")} onClick={() => setHidden(!hidden)}>
@@ -277,7 +278,7 @@ export function Files({ onMenu }: { onMenu: () => void }) {
           ) : (
             hits.map((h) => (
               <button key={h.path} className="entry" onClick={() => (h.is_dir ? load(h.path) : openFile(h.path))}>
-                <span>{h.is_dir ? "📁" : "📄"}</span>
+                <Icon name={h.is_dir ? "folder" : "file"} className="ficon" />
                 <span className="name">{h.path.slice((listing?.path.length ?? 0) + 1)}</span>
               </button>
             ))
@@ -286,7 +287,7 @@ export function Files({ onMenu }: { onMenu: () => void }) {
           <>
             {listing?.parent && (
               <button className="entry" onClick={() => load(listing.parent!)}>
-                <span>↰</span>
+                <Icon name="folder-up" className="ficon" />
                 <span className="name">..</span>
               </button>
             )}
@@ -298,11 +299,11 @@ export function Files({ onMenu }: { onMenu: () => void }) {
                   <button className="entry-main" onClick={() => (e.is_dir ? load(e.path) : openFile(e.path))}>
                     <span>{icon(e)}</span>
                     <span className="name">{e.name}</span>
-                    {mark && <span className={`git-mark m-${mark === "•" ? "dot" : mark}`}>{mark}</span>}
+                    {mark && <span className={`git-mark m-${mark === "•" ? "dot" : mark}`}>{mark === "•" ? <Icon name="dot" className="tiny" /> : mark}</span>}
                     {!e.is_dir && <span className="size">{fmtCompact(e.size)}B</span>}
                   </button>
                   <details className="entry-menu">
-                    <summary aria-label={t("files.actions")}>⋯</summary>
+                    <summary aria-label={t("files.actions")}><Icon name="more" /></summary>
                     <div className="menu">
                       <button onClick={() => rename(e)}>{t("files.rename")}</button>
                       <button onClick={() => duplicate(e)}>{t("files.duplicate")}</button>
@@ -333,7 +334,7 @@ export function Files({ onMenu }: { onMenu: () => void }) {
         <div className="editor-pane">
           <div className="editor-bar">
             <button className="ghost small mobile-only" onClick={() => setMobileEditor(false)}>
-              ←
+              <Icon name="arrow-left" />
             </button>
             <b className="grow">{pane.title}</b>
           </div>
@@ -349,11 +350,11 @@ export function Files({ onMenu }: { onMenu: () => void }) {
       <div className="editor-pane">
         <div className="editor-bar">
           <button className="ghost small mobile-only" onClick={() => void confirmDiscard().then((ok): unknown => ok && setMobileEditor(false))}>
-            ←
+            <Icon name="arrow-left" />
           </button>
           <b className="grow" title={f.path}>
             {baseName(f.path)}
-            {dirty && <span className="dirty"> ●</span>}
+            {dirty && <span className="dirty"> <Icon name="dot" className="tiny" /></span>}
           </b>
           {(isMd || isImage) && !f.preview && (
             <button className="small" onClick={() => setPreview(!preview)}>
@@ -361,7 +362,7 @@ export function Files({ onMenu }: { onMenu: () => void }) {
             </button>
           )}
           <a className="button small" href={rawUrl(f.path, true)}>
-            ⤓
+            <Icon name="download" />
           </a>
           {!f.binary && (
             <button className="small primary" disabled={!dirty} onClick={() => save()}>
@@ -400,7 +401,7 @@ export function Files({ onMenu }: { onMenu: () => void }) {
     <>
       <div className="topbar">
         <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}>
-          ☰
+          <Icon name="menu" />
         </button>
         <div className="grow">
           <h1>{t("nav.files")}</h1>

web/src/components/GitPanel.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useEffect, useState } from "react";
 import { post } from "../api";
 import { fmtRelative, useT } from "../i18n";
@@ -104,17 +105,17 @@ export function GitPanel({
           {f.path}
         </button>
         <button className="small ghost" title={t("git.openFile")} onClick={() => openFile(abs(f))}>
-          ↗
+          <Icon name="external" />
         </button>
         {isStaged ? (
           <button className="small" title={t("git.unstage")} onClick={() => run("unstage", () => call("unstage", { files: [abs(f)] }))}>
-            −
+            <Icon name="minus" />
           </button>
         ) : (
           <>
             {f.index !== "?" && (
               <button className="small ghost danger" title={t("git.discard")} onClick={() => void confirmDialog({ message: t("git.discardConfirm", { file: f.path }), danger: true, confirmLabel: t("git.discard") }).then((ok): unknown => ok && run("discard", () => call("discard", { files: [abs(f)] })))}>
-                ↺
+                <Icon name="refresh" />
               </button>
             )}
             <button className="small" title={t("git.stage")} onClick={() => run("stage", () => call("stage", { files: [abs(f)] }))}>
@@ -153,7 +154,7 @@ export function GitPanel({
         </button>
         {status.upstream && (
           <span className="chip" title={status.upstream}>
-            ↑{status.ahead} ↓{status.behind}
+            <Icon name="arrow-up" className="tiny" />{status.ahead} <Icon name="arrow-down" className="tiny" />{status.behind}
           </span>
         )}
         <span className="spacer" />

web/src/components/Icon.tsx

@@ -0,0 +1,229 @@
+import type { ReactNode } from "react";
+
+/**
+ * Line icons drawn with `currentColor`: they take the text colour of their
+ * context, so every theme colours them (no per-theme icon sets needed).
+ */
+const P: Record<string, ReactNode> = {
+  menu: <path d="M4 6h16M4 12h16M4 18h16" />,
+  close: <path d="M6 6l12 12M18 6 6 18" />,
+  check: <path d="m5 12.5 4.5 4.5L19 7" />,
+  "x-mark": <path d="M7 7l10 10M17 7 7 17" />,
+  "arrow-up": <path d="M12 19V5M6 11l6-6 6 6" />,
+  "arrow-down": <path d="M12 5v14M6 13l6 6 6-6" />,
+  "arrow-left": <path d="M19 12H5M11 6l-6 6 6 6" />,
+  "chevron-right": <path d="m9 6 6 6-6 6" />,
+  "chevron-down": <path d="m6 9 6 6 6-6" />,
+  share: (
+    <>
+      <circle cx="18" cy="5.5" r="2.5" />
+      <circle cx="6" cy="12" r="2.5" />
+      <circle cx="18" cy="18.5" r="2.5" />
+      <path d="m8.2 10.8 7.6-4M8.2 13.2l7.6 4" />
+    </>
+  ),
+  fork: (
+    <>
+      <circle cx="6" cy="5" r="2" />
+      <circle cx="18" cy="5" r="2" />
+      <circle cx="12" cy="19" r="2" />
+      <path d="M6 7v2a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V7M12 12v5" />
+    </>
+  ),
+  download: <path d="M12 4v11M7 10l5 5 5-5M5 20h14" />,
+  compact: <path d="M8 4l4 4 4-4M8 20l4-4 4 4M4 12h16" />,
+  trash: <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6" />,
+  edit: <path d="M4 20h4L19 9l-4-4L4 16v4ZM13.5 6.5l4 4" />,
+  undo: <path d="M9 14 4 9l5-5M4 9h10a6 6 0 0 1 0 12h-3" />,
+  clip: <path d="m20 11-8.5 8.5a5 5 0 0 1-7-7L13 4a3.5 3.5 0 0 1 5 5l-8.5 8.5a2 2 0 0 1-3-3L14 7" />,
+  file: (
+    <>
+      <path d="M6 3h8l4 4v14H6Z" />
+      <path d="M14 3v4h4" />
+    </>
+  ),
+  "file-text": (
+    <>
+      <path d="M6 3h8l4 4v14H6Z" />
+      <path d="M14 3v4h4M9 12h6M9 16h6" />
+    </>
+  ),
+  "file-doc": (
+    <>
+      <path d="M6 3h8l4 4v14H6Z" />
+      <path d="M14 3v4h4M9 11h6M9 14h6M9 17h4" />
+    </>
+  ),
+  folder: <path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z" />,
+  "folder-up": (
+    <>
+      <path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z" />
+      <path d="M12 16v-5M9.5 13.5 12 11l2.5 2.5" />
+    </>
+  ),
+  folders: (
+    <>
+      <path d="M7 8a1 1 0 0 1 1-1h4l1.5 1.5H20a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1Z" />
+      <path d="M4 15V6a1 1 0 0 1 1-1h4" />
+    </>
+  ),
+  image: (
+    <>
+      <rect x="3" y="5" width="18" height="14" rx="2" />
+      <circle cx="9" cy="10" r="1.8" />
+      <path d="m4 17 5-4 4 3 3-2 4 3" />
+    </>
+  ),
+  music: (
+    <>
+      <path d="M9 18V6l11-2v12" />
+      <circle cx="6.5" cy="18" r="2.5" />
+      <circle cx="17.5" cy="16" r="2.5" />
+    </>
+  ),
+  cube: (
+    <>
+      <path d="m12 3 8 4.5v9L12 21l-8-4.5v-9Z" />
+      <path d="m4 7.5 8 4.5 8-4.5M12 12v9" />
+    </>
+  ),
+  external: <path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" />,
+  refresh: <path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" />,
+  lock: (
+    <>
+      <rect x="5" y="11" width="14" height="9" rx="2" />
+      <path d="M8 11V8a4 4 0 0 1 8 0v3M12 15v2" />
+    </>
+  ),
+  question: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5V14M12 17h.01" />
+    </>
+  ),
+  "radio-on": (
+    <>
+      <circle cx="12" cy="12" r="8" />
+      <circle cx="12" cy="12" r="3.5" className="fill" />
+    </>
+  ),
+  "radio-off": <circle cx="12" cy="12" r="8" />,
+  "box-on": (
+    <>
+      <rect x="4" y="4" width="16" height="16" rx="3" />
+      <path d="m8 12 3 3 5-6" />
+    </>
+  ),
+  "box-off": <rect x="4" y="4" width="16" height="16" rx="3" />,
+  play: <path d="M8 5v14l11-7Z" className="fill" />,
+  stop: <rect x="6" y="6" width="12" height="12" rx="2" className="fill" />,
+  warning: <path d="M12 4 2.5 20h19ZM12 10v4.5M12 17.5h.01" />,
+  brain: (
+    <>
+      <path d="M9 4a3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 2 5 3 3 0 0 0 6 1V5a2 2 0 0 0-3-1Z" />
+      <path d="M15 4a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-2 5 3 3 0 0 1-6 1" />
+    </>
+  ),
+  eye: (
+    <>
+      <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
+      <circle cx="12" cy="12" r="3" />
+    </>
+  ),
+  gear: (
+    <>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M12 2.5v3M12 18.5v3M21.5 12h-3M5.5 12h-3M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1M18.7 18.7l-2.1-2.1M7.4 7.4 5.3 5.3" />
+    </>
+  ),
+  robot: (
+    <>
+      <rect x="5" y="8" width="14" height="11" rx="3" />
+      <path d="M12 4v4M9 13h.01M15 13h.01M9.5 16h5M3 12v3M21 12v3" />
+    </>
+  ),
+  plug: <path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0ZM12 17v4" />,
+  shield: (
+    <>
+      <path d="M12 3 5 6v6c0 4.2 3 7.6 7 9 4-1.4 7-4.8 7-9V6Z" />
+      <path d="m9 12 2 2 4-4" />
+    </>
+  ),
+  users: (
+    <>
+      <circle cx="9" cy="8" r="3.2" />
+      <path d="M3 20a6 6 0 0 1 12 0M16 4.5a3.2 3.2 0 0 1 0 6.3M18 14.5a6 6 0 0 1 3 5.5" />
+    </>
+  ),
+  user: (
+    <>
+      <circle cx="12" cy="8" r="3.8" />
+      <path d="M4.5 20.5a7.5 7.5 0 0 1 15 0" />
+    </>
+  ),
+  toolbox: (
+    <>
+      <rect x="3" y="8" width="18" height="11" rx="2" />
+      <path d="M9 8V5h6v3M3 13h18M10 12v2M14 12v2" />
+    </>
+  ),
+  scroll: <path d="M7 4h11a2 2 0 0 1 0 4h-1v10a2 2 0 0 1-2 2H6a2 2 0 0 1 0-4h1ZM10 9h4M10 12h4" />,
+  terminal: (
+    <>
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <path d="m7 9 3 3-3 3M12 15h5" />
+    </>
+  ),
+  logout: <path d="M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5M15 8l4 4-4 4M19 12H9" />,
+  chart: <path d="M4 20V4M4 20h16M8 16v-4M12 16V8M16 16v-6M20 16V6" />,
+  wrench: <path d="M14.5 5.5a4 4 0 0 0 5 5L11 19a2.1 2.1 0 0 1-3-3l8.5-8.5a4 4 0 0 1-2-2Z" />,
+  sun: (
+    <>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2.5v2M12 19.5v2M21.5 12h-2M4.5 12h-2M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4M18.7 18.7l-1.4-1.4M6.7 6.7 5.3 5.3" />
+    </>
+  ),
+  moon: <path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z" />,
+  "theme-auto": (
+    <>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 3.5v17a8.5 8.5 0 0 0 0-17Z" className="fill" />
+    </>
+  ),
+  dot: <circle cx="12" cy="12" r="4.5" className="fill" />,
+  plus: <path d="M12 5v14M5 12h14" />,
+  minus: <path d="M5 12h14" />,
+  upload: <path d="M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />,
+  more: (
+    <>
+      <circle cx="5" cy="12" r="1.6" className="fill" />
+      <circle cx="12" cy="12" r="1.6" className="fill" />
+      <circle cx="19" cy="12" r="1.6" className="fill" />
+    </>
+  ),
+  copy: (
+    <>
+      <rect x="8" y="8" width="12" height="12" rx="2" />
+      <path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" />
+    </>
+  ),
+  sparkle: <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8Z" />,
+};
+
+export type IconName = keyof typeof P;
+
+export function Icon({ name, size, className, title }: { name: string; size?: number; className?: string; title?: string }) {
+  return (
+    <svg
+      className={`icon ${className ?? ""}`}
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      aria-hidden={title ? undefined : true}
+      role={title ? "img" : undefined}
+    >
+      {title && <title>{title}</title>}
+      {P[name] ?? P.dot}
+    </svg>
+  );
+}

web/src/components/Images.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useEffect, useState } from "react";
 import { del, post } from "../api";
 import { useFetch } from "../hooks";
@@ -63,7 +64,7 @@ export function Images({ onMenu }: { onMenu: () => void }) {
     <>
       <div className="topbar">
         <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}>
-          ☰
+          <Icon name="menu" />
         </button>
         <div className="grow">
           <h1>{t("nav.images")}</h1>
@@ -141,16 +142,16 @@ export function Images({ onMenu }: { onMenu: () => void }) {
                   </div>
                   <div className="row" style={{ gap: 4 }}>
                     <a className="button small" href={fileUrl(img.id)} download={img.path.split("/").pop()}>
-                      ⤓
+                      <Icon name="download" />
                     </a>
                     <button className="small" title={t("images.reuse")} onClick={() => setForm({ ...form, prompt: img.prompt, model: img.model })}>
-                      ↺
+                      <Icon name="refresh" />
                     </button>
                     <button className="small" title={t("images.copyPath")} onClick={() => navigator.clipboard?.writeText(img.path)}>
-                      ⧉
+                      <Icon name="copy" />
                     </button>
                     <button className="small danger" title={t("common.delete")} onClick={() => void confirmDialog({ message: t("images.deleteConfirm"), danger: true, confirmLabel: t("common.delete") }).then((ok): unknown => ok && del(`/images/${img.id}`).then(reload))}>
-                      🗑
+                      <Icon name="trash" />
                     </button>
                   </div>
                 </figcaption>

web/src/components/Interaction.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useState } from "react";
 import { post } from "../api";
 import { useT } from "../i18n";
@@ -43,7 +44,7 @@ export function PermissionCard({ req, currentId }: { req: PermissionRequest; cur
   return (
     <div className="card" role="alertdialog" aria-label={t("permission.title")}>
       <h3>
-        🔐 {t("permission.title")} <span className="chip mono">{req.tool}</span>
+        <Icon name="lock" /> {t("permission.title")} <span className="chip mono">{req.tool}</span>
       </h3>
       <SubagentHint sessionId={req.session_id} currentId={currentId} />
       <div style={{ margin: "6px 0" }}>{req.title}</div>
@@ -122,7 +123,7 @@ export function QuestionCard({ req, currentId }: { req: QuestionRequest; current
 
   return (
     <div className="card" role="dialog" aria-label={t("question.title")}>
-      <h3>❓ {t("question.title")}</h3>
+      <h3><Icon name="question" /> {t("question.title")}</h3>
       <div className="from">{source}</div>
       <SubagentHint sessionId={req.session_id} currentId={currentId} />
       {req.questions.map((q, qi) => (
@@ -143,7 +144,7 @@ export function QuestionCard({ req, currentId }: { req: QuestionRequest; current
                     onClick={() => toggle(qi, o.label, !!q.multi_select)}
                     onKeyDown={(e) => (e.key === " " || e.key === "Enter") && toggle(qi, o.label, !!q.multi_select)}
                   >
-                    <span>{q.multi_select ? (isSel ? "☑" : "☐") : isSel ? "◉" : "○"}</span>
+                    <Icon name={q.multi_select ? (isSel ? "box-on" : "box-off") : isSel ? "radio-on" : "radio-off"} />
                     <div style={{ flex: 1 }}>
                       {o.label === OTHER ? (
                         <input

web/src/components/Markdown.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { memo, useState, type ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -36,7 +37,7 @@ export function SvgBlock({ code, children }: { code: string; children?: ReactNod
         <img src={url} alt="SVG" />
       </FileFigure>
       <button className="small ghost" onClick={() => setShowCode(!showCode)}>
-        {showCode ? "▾ SVG" : "▸ SVG"}
+        <Icon name={showCode ? "chevron-down" : "chevron-right"} /> SVG
       </button>
       {showCode && children}
     </div>

web/src/components/ModelViewer.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 // 3D preview for GLB/GLTF, STL, OBJ and STEP/IGES (via OpenCascade WASM).
 // Loaded on demand only when such a file is opened.
 import { useEffect, useRef, useState } from "react";
@@ -147,7 +148,7 @@ export function ModelViewer({ url, ext }: { url: string; ext: string }) {
   return (
     <div className="model-viewer">
       <div ref={host} className="model-canvas" />
-      <div className="model-info">{state.loading ? "…" : state.error ? `⚠ ${state.error}` : state.info}</div>
+      <div className="model-info">{state.loading ? "…" : state.error ? <><Icon name="warning" /> {state.error}</> : state.info}</div>
     </div>
   );
 }

web/src/components/NewSession.tsx

@@ -1,7 +1,11 @@
-import { useEffect, useState } from "react";
-import { post } from "../api";
+import { Icon } from "./Icon";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { post, uploadFile } from "../api";
 import { useAgents, useFetch } from "../hooks";
-import { useT } from "../i18n";
+import { useT, type Key } from "../i18n";
+import type { ImageData } from "../types";
+import { readImage } from "./Composer";
+import { formatSize } from "./FileFigure";
 import { ModelSelect } from "./ModelSelect";
 
 interface DirListing {
@@ -14,124 +18,585 @@ interface DirListing {
 
 const LAST_DIR = "codecraft.lastDir";
 
+type Task = "build" | "plan" | "craft" | string;
+type Target = "website" | "app" | "game" | "software" | "fresh";
+
+// --- icons (SVG: identical on every system) -------------------------------------
+
+const svg = (children: ReactNode) => (
+  <svg viewBox="0 0 24 24" className="wiz-icon" aria-hidden="true">
+    {children}
+  </svg>
+);
+const ICONS: Record<string, ReactNode> = {
+  build: svg(<path d="m8 7-5 5 5 5M16 7l5 5-5 5M13.5 4l-3 16" />),
+  plan: svg(
+    <>
+      <path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z" />
+      <path d="M9 4v14M15 6v14" />
+    </>,
+  ),
+  craft: svg(
+    <>
+      <path d="m4 20 10-10M14 10l2-2" />
+      <path d="M17 3v3M15.5 4.5h3M20 8v2M19 9h2M11 3v2M10 4h2" />
+    </>,
+  ),
+  agent: svg(
+    <>
+      <rect x="5" y="7" width="14" height="11" rx="3" />
+      <path d="M12 3v4M9 12h.01M15 12h.01M9.5 15h5" />
+    </>,
+  ),
+  website: svg(
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18M12 3c2.5 2.8 3.5 5.8 3.5 9s-1 6.2-3.5 9c-2.5-2.8-3.5-5.8-3.5-9s1-6.2 3.5-9Z" />
+    </>,
+  ),
+  app: svg(
+    <>
+      <rect x="3" y="5" width="18" height="14" rx="2" />
+      <path d="M3 9h18M6 7h.01M8.5 7h.01" />
+    </>,
+  ),
+  game: svg(
+    <>
+      <path d="M7 9h10a4 4 0 0 1 4 4v1a3 3 0 0 1-5.4 1.8L14.5 14h-5l-1.1 1.8A3 3 0 0 1 3 14v-1a4 4 0 0 1 4-4Z" />
+      <path d="M8 11.5v3M6.5 13h3M15.5 12h.01M17.5 13.5h.01" />
+    </>,
+  ),
+  software: svg(
+    <>
+      <path d="M5 3h11l3 3v15H5Z" />
+      <path d="M8 3v5h7V3M8 21v-7h8v7" />
+    </>,
+  ),
+  fresh: svg(<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8ZM19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8Z" />),
+  clean: svg(
+    <>
+      <path d="M12 3 5 6v6c0 4.2 3 7.6 7 9 4-1.4 7-4.8 7-9V6Z" />
+      <path d="m9 12 2 2 4-4" />
+    </>,
+  ),
+  deep: svg(
+    <>
+      <circle cx="11" cy="11" r="6" />
+      <path d="m20 20-4.5-4.5M9 9l4 4M13 9l-4 4" />
+    </>,
+  ),
+  folder: svg(<path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z" />),
+  git: svg(
+    <>
+      <circle cx="6" cy="6" r="2.2" />
+      <circle cx="6" cy="18" r="2.2" />
+      <circle cx="18" cy="9" r="2.2" />
+      <path d="M6 8.2v7.6M18 11.2c0 3.5-4 3-9.6 5.6" />
+    </>,
+  ),
+  upload: svg(<path d="M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />),
+  clip: svg(<path d="m20 11-8.5 8.5a5 5 0 0 1-7-7L13 4a3.5 3.5 0 0 1 5 5l-8.5 8.5a2 2 0 0 1-3-3L14 7" />),
+  start: svg(<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8Z" />),
+};
+
+function Card({ icon, title, desc, active, onClick }: { icon: string; title: string; desc?: string; active: boolean; onClick: () => void }) {
+  return (
+    <button type="button" className={`wiz-card ${active ? "active" : ""}`} onClick={onClick} aria-pressed={active}>
+      {ICONS[icon] ?? ICONS.agent}
+      <span className="wiz-card-text">
+        <span className="wiz-card-title">{title}</span>
+        {desc && <span className="wiz-card-desc">{desc}</span>}
+      </span>
+      {active && (
+        <svg viewBox="0 0 24 24" className="wiz-check" aria-hidden="true">
+          <path d="m5 12 4.5 4.5L19 7" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+function Step({ n, title, children }: { n: number; title: string; children: ReactNode }) {
+  return (
+    <section className="wiz-step">
+      <h3>
+        <span className="wiz-num">{n}</span>
+        {title}
+      </h3>
+      {children}
+    </section>
+  );
+}
+
+const slug = (s: string) =>
+  s
+    .toLowerCase()
+    .normalize("NFKD")
+    .replace(/[̀-ͯ]/g, "")
+    .replace(/https?:\/\/(www\.)?/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .split("-")
+    .slice(0, 4)
+    .join("-")
+    .slice(0, 40);
+
+async function api(path: string, init: RequestInit) {
+  const r = await fetch(`/api${path}`, { credentials: "same-origin", ...init });
+  if (!r.ok) throw new Error((await r.text().catch(() => "")) || `HTTP ${r.status}`);
+  return r;
+}
+
+/** Guided start: what to do → (craft: what to recreate, clean room/deep) → describe → model & folder. */
 export function NewSession({ onMenu, onCreated }: { onMenu: () => void; onCreated: (id: string) => void }) {
   const t = useT();
-  const [path, setPath] = useState<string>(localStorage.getItem(LAST_DIR) ?? "");
   const roots = useFetch<{ path: string; name: string }[]>("/fs/roots").data ?? [];
-  const { data: listing, error: dirError } = useFetch<DirListing>(`/fs/dirs${path ? `?path=${encodeURIComponent(path)}` : ""}`);
   const config = useFetch<{ default_model?: string }>("/config").data;
+  const [task, setTask] = useState<Task>("craft");
+  const [target, setTarget] = useState<Target>("fresh");
+  const [deep, setDeep] = useState(false);
+  const [url, setUrl] = useState("");
+  const [text, setText] = useState("");
+  const [images, setImages] = useState<ImageData[]>([]);
+  const [files, setFiles] = useState<File[]>([]);
   const [model, setModel] = useState("");
-  const [agent, setAgent] = useState("build");
-  const [prompt, setPrompt] = useState("");
+  // Folder: a new one (name) inside a root, or an existing one (picked).
+  const [folderMode, setFolderMode] = useState<"new" | "existing" | "git">("new");
+  const [repoUrl, setRepoUrl] = useState("");
+  // Original software (zip, tar.gz, installer …) for the recreate workflow, uploaded in chunks.
+  const [originals, setOriginals] = useState<File[]>([]);
+  const [progress, setProgress] = useState<Record<string, number>>({});
+  const originalInput = useRef<HTMLInputElement>(null);
+  const [folderName, setFolderName] = useState("");
+  const [nameTouched, setNameTouched] = useState(false);
+  const [rootPath, setRootPath] = useState("");
+  const [picked, setPicked] = useState<string>(localStorage.getItem(LAST_DIR) ?? "");
   const [error, setError] = useState<string>();
-  const [creating, setCreating] = useState(false);
-  const agents = useAgents(listing?.path).filter((a) => a.mode === "primary");
+  const [creating, setCreating] = useState<string>();
+  const fileInput = useRef<HTMLInputElement>(null);
+  const agents = useAgents(undefined).filter((a) => a.mode === "primary");
+  const custom = agents.filter((a) => !["build", "plan", "craft"].includes(a.name));
 
   useEffect(() => {
     if (!model && config?.default_model) setModel(config.default_model);
   }, [config, model]);
-
-  // A remembered directory that vanished: fall back to the workspace root.
   useEffect(() => {
-    if (dirError && path) setPath("");
-  }, [dirError, path]);
+    if (!rootPath && roots.length) setRootPath(roots[roots.length - 1].path);
+  }, [roots, rootPath]);
+  // Old software is analysed in deep mode; websites default to clean room.
+  useEffect(() => {
+    if (target === "software") setDeep(true);
+    else if (target === "website") setDeep(false);
+  }, [target]);
+  // Working on existing code usually happens in an existing folder.
+  useEffect(() => {
+    setFolderMode((m) => (m === "git" ? m : task === "craft" ? "new" : "existing"));
+  }, [task]);
 
-  const create = async () => {
-    if (!listing) return;
-    setCreating(true);
-    setError(undefined);
+  const repoName = repoUrl.trim().replace(/\/+$/, "").replace(/\.git$/, "").split(/[/:]/).pop() ?? "";
+  const autoName = useMemo(
+    () => (folderMode === "git" && repoName ? slug(repoName) : "") || slug(target === "website" && url ? url : text) || (task === "craft" ? `${target}-project` : "project"),
+    [text, url, target, task, folderMode, repoName],
+  );
+  useEffect(() => {
+    if (!nameTouched) setFolderName(autoName);
+  }, [autoName, nameTouched]);
+
+  const ideas: Key[] =
+    task !== "craft"
+      ? task === "plan"
+        ? ["wizard.idea.planFeature", "wizard.idea.planRefactor"]
+        : ["wizard.idea.buildTests", "wizard.idea.buildBug"]
+      : ({
+          website: ["wizard.idea.siteLanding", "wizard.idea.siteShop"],
+          app: ["wizard.idea.appTodo", "wizard.idea.appNotes"],
+          game: ["wizard.idea.gameSnake", "wizard.idea.gameBreakout"],
+          software: ["wizard.idea.swDos", "wizard.idea.swTool"],
+          fresh: ["wizard.idea.freshBakery", "wizard.idea.freshSnake"],
+        } as Record<Target, Key[]>)[target];
+
+  const addFiles = async (list: FileList | File[]) => {
+    const all = [...list];
+    const imgs = all.filter((f) => f.type.startsWith("image/") && target !== "software");
     try {
-      localStorage.setItem(LAST_DIR, listing.path);
-      const s = await post<{ id: string }>("/sessions", { cwd: listing.path, model: model || undefined, agent });
-      if (prompt.trim()) await post(`/sessions/${s.id}/prompt`, { text: prompt.trim() });
-      onCreated(s.id);
+      const read = await Promise.all(imgs.map(readImage));
+      setImages((cur) => [...cur, ...read]);
     } catch (e: any) {
       setError(e.message);
-      setCreating(false);
+    }
+    setFiles((cur) => [...cur, ...all.filter((f) => !imgs.includes(f))]);
+  };
+
+  const needsUrl = task === "craft" && target === "website";
+  const isRecreate = task === "craft" && target === "software";
+  const canStart =
+    !creating &&
+    (text.trim() || (needsUrl && url.trim()) || (isRecreate && originals.length > 0)) &&
+    (folderMode === "existing" ? !!picked : !!folderName.trim() && !!rootPath && (folderMode !== "git" || /^(https?:\/\/|ssh:\/\/|git@)\S+$/.test(repoUrl.trim())));
+
+  /** The first message(s) for the agent. */
+  const prompts = (uploaded: string[]): string[] => {
+    const desc = text.trim();
+    const fileList = uploaded.length ? `\n\nFiles: ${uploaded.join(", ")}` : "";
+    if (task !== "craft") return [desc + fileList];
+    switch (target) {
+      case "website":
+        return [`Recreate the website ${url.trim()} as a new project in this folder.${desc ? `\n\n${desc}` : ""}${fileList}`];
+      case "app":
+      case "game":
+        return [
+          `Recreate this ${target === "app" ? "app" : "game"} as a new project in this folder${images.length ? " – screenshots are attached" : ""}.${desc ? `\n\n${desc}` : ""}${fileList}`,
+        ];
+      case "software":
+        return [
+          `/recreate-init The program files are already in original/ (${uploaded.length ? uploaded.join(", ") : "added by the user"}). Set up the layout around them without moving them.`,
+          `/recreate-start ${desc}`,
+        ];
+      default:
+        return [`Build this from scratch (there is no original to study – start with a short plan, then build, check and refine):\n\n${desc}${fileList}`];
     }
   };
 
-  const rel = listing ? listing.path.slice(listing.workspace.length) || "/" : "";
-  const currentRoot = listing?.root;
+  const create = async () => {
+    setError(undefined);
+    try {
+      // 1. Folder
+      let cwd = picked;
+      if (folderMode === "git") {
+        setCreating(t("wizard.cloning"));
+        const target = `${rootPath}/${folderName.trim().replace(/[\\/]/g, "-")}`;
+        await post("/git", { action: "clone", path: target, url: repoUrl.trim() });
+        cwd = target;
+      } else if (folderMode === "new") {
+        setCreating(t("wizard.creatingFolder"));
+        const base = folderName.trim().replace(/[\\/]/g, "-");
+        for (let i = 0; i < 50; i++) {
+          const candidate = `${rootPath}/${i ? `${base}-${i + 1}` : base}`;
+          try {
+            await api("/files/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ path: candidate, dir: true }) });
+            cwd = candidate;
+            break;
+          } catch (e: any) {
+            if (!/exists/i.test(e.message)) throw e;
+          }
+        }
+        if (!cwd) throw new Error("could not create the folder");
+      }
+      localStorage.setItem(LAST_DIR, cwd);
+      // 2. Files: originals of old software into original/, everything else into .codecraft/uploads/
+      const uploaded: string[] = [];
+      const mkdirs = async (dir: string) => {
+        let parent = cwd;
+        for (const part of dir.split("/")) {
+          parent = `${parent}/${part}`;
+          await api("/files/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ path: parent, dir: true }) }).catch(() => undefined);
+        }
+      };
+      const send = async (list: File[], dir: string) => {
+        if (!list.length) return;
+        await mkdirs(dir);
+        for (const f of list) {
+          const name = f.name.replace(/[\\/]/g, "_");
+          setCreating(`${t("wizard.uploading")} ${name}`);
+          await uploadFile(`${cwd}/${dir}/${name}`, f, (x) => setProgress((p) => ({ ...p, [f.name]: x })));
+          uploaded.push(`${dir}/${name}`);
+        }
+      };
+      // Originals of old software go to original/, everything else to .codecraft/uploads/.
+      await send(originals, "original");
+      await send(files, isRecreate ? "original" : ".codecraft/uploads");
+      // 3. Session and first prompt(s)
+      setCreating(t("wizard.starting"));
+      const isCraft = task === "craft";
+      const s = await post<{ id: string }>("/sessions", {
+        cwd,
+        model: model || undefined,
+        agent: task,
+        clean_room: isCraft ? !deep : undefined,
+      });
+      const msgs = prompts(uploaded).filter((m) => m.trim());
+      for (const [i, m] of msgs.entries()) await post(`/sessions/${s.id}/prompt`, { text: m, images: i === 0 ? images : [] });
+      onCreated(s.id);
+    } catch (e: any) {
+      setError(e.message);
+      setCreating(undefined);
+    }
+  };
 
+  let n = 1;
   return (
     <>
       <div className="topbar">
         <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}>
-          ☰
+          <Icon name="menu" />
         </button>
         <div className="grow">
           <h1>{t("new.title")}</h1>
         </div>
       </div>
       <div className="page">
-        <div className="page-inner" style={{ maxWidth: 760 }}>
-          <div className="panel">
-            <h3>{t("new.directory")}</h3>
-            {roots.length > 1 && (
-              <div className="mode-tabs" style={{ marginBottom: 8, flexWrap: "wrap" }}>
-                {roots.map((r) => (
-                  <button key={r.path} className={currentRoot === r.path ? "active" : ""} onClick={() => setPath(r.path)}>
-                    {r.name}
+        <div className="page-inner wizard">
+          <h2 className="wiz-title">{t("wizard.title")}</h2>
+          <p className="wiz-sub">{t("wizard.subtitle")}</p>
+
+          <div className="panel wiz-panel">
+            <Step n={n++} title={t("wizard.whatToDo")}>
+              <div className="wiz-cards">
+                <Card icon="craft" title={t("wizard.task.craft")} desc={t("wizard.task.craftDesc")} active={task === "craft"} onClick={() => setTask("craft")} />
+                <Card icon="build" title={t("wizard.task.build")} desc={t("wizard.task.buildDesc")} active={task === "build"} onClick={() => setTask("build")} />
+                <Card icon="plan" title={t("wizard.task.plan")} desc={t("wizard.task.planDesc")} active={task === "plan"} onClick={() => setTask("plan")} />
+                {custom.map((a) => (
+                  <Card key={a.name} icon="agent" title={a.name} desc={a.description} active={task === a.name} onClick={() => setTask(a.name)} />
+                ))}
+              </div>
+            </Step>
+
+            {task === "craft" && (
+              <Step n={n++} title={t("wizard.whatToRecreate")}>
+                <div className="wiz-cards five">
+                  {(["website", "app", "game", "software", "fresh"] as Target[]).map((x) => (
+                    <Card key={x} icon={x} title={t(`wizard.target.${x}` as Key)} active={target === x} onClick={() => setTarget(x)} />
+                  ))}
+                </div>
+                {target !== "fresh" && (
+                  <div className="wiz-cards two" style={{ marginTop: 12 }}>
+                    <Card icon="clean" title={t("craft.cleanRoom")} desc={t("wizard.cleanDesc")} active={!deep} onClick={() => setDeep(false)} />
+                    <Card icon="deep" title={t("craft.deep")} desc={t("wizard.deepDesc")} active={deep} onClick={() => setDeep(true)} />
+                  </div>
+                )}
+                {target === "software" && !deep && <div className="notice">{t("wizard.softwareNeedsDeep")}</div>}
+                {target === "software" && (
+                  <div
+                    className="wiz-drop"
+                    onDragOver={(e) => e.preventDefault()}
+                    onDrop={(e) => {
+                      e.preventDefault();
+                      setOriginals((c) => [...c, ...e.dataTransfer.files]);
+                    }}
+                    onClick={() => originalInput.current?.click()}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    {ICONS.upload}
+                    <div>
+                      <b>{t("wizard.originalTitle")}</b>
+                      <div className="hint">{t("wizard.originalHint")}</div>
+                    </div>
+                    <input
+                      ref={originalInput}
+                      type="file"
+                      multiple
+                      hidden
+                      onChange={(e) => {
+                        if (e.target.files) setOriginals((c) => [...c, ...e.target.files!]);
+                        e.target.value = "";
+                      }}
+                    />
+                  </div>
+                )}
+                {target === "software" && originals.length > 0 && (
+                  <div className="wiz-originals">
+                    {originals.map((f, i) => (
+                      <div key={`${f.name}${i}`} className="wiz-original">
+                        <span className="name">{f.name}</span>
+                        <span className="size">{formatSize(f.size)}</span>
+                        {progress[f.name] !== undefined ? (
+                          <span className="bar">
+                            <i style={{ width: `${Math.round(progress[f.name] * 100)}%` }} />
+                          </span>
+                        ) : (
+                          <button className="small ghost" onClick={() => setOriginals((c) => c.filter((_, j) => j !== i))} aria-label={t("common.remove")}>
+                            <Icon name="close" />
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </Step>
+            )}
+
+            <Step n={n++} title={t("wizard.sayWhat")}>
+              {needsUrl && (
+                <input
+                  className="wiz-url"
+                  type="url"
+                  value={url}
+                  placeholder="https://example.com"
+                  onChange={(e) => setUrl(e.target.value)}
+                />
+              )}
+              <div
+                className="wiz-input"
+                onDragOver={(e) => e.preventDefault()}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  void addFiles(e.dataTransfer.files);
+                }}
+              >
+                <textarea
+                  value={text}
+                  placeholder={t(task === "craft" ? (`wizard.placeholder.${target}` as Key) : "wizard.placeholder.task")}
+                  onChange={(e) => setText(e.target.value)}
+                  onPaste={(e) => {
+                    if (e.clipboardData.files.length) {
+                      e.preventDefault();
+                      void addFiles(e.clipboardData.files);
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && !e.shiftKey && !matchMedia("(pointer: coarse)").matches && canStart) {
+                      e.preventDefault();
+                      void create();
+                    }
+                  }}
+                />
+                {(images.length > 0 || files.length > 0) && (
+                  <div className="attachments">
+                    {images.map((img, i) => (
+                      <div className="att" key={`i${i}`}>
+                        <img src={`data:${img.media_type};base64,${img.data}`} alt="" />
+                        <button onClick={() => setImages((c) => c.filter((_, j) => j !== i))} aria-label={t("common.remove")}>
+                          <Icon name="close" />
+                        </button>
+                      </div>
+                    ))}
+                    {files.map((f, i) => (
+                      <div className="att file" key={`f${i}`}>
+                        <span><Icon name="file" /> {f.name}</span>
+                        <small>{formatSize(f.size)}</small>
+                        <button onClick={() => setFiles((c) => c.filter((_, j) => j !== i))} aria-label={t("common.remove")}>
+                          <Icon name="close" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                <div className="wiz-input-foot">
+                  <button type="button" className="ghost small" onClick={() => fileInput.current?.click()} title={t("wizard.attach")}>
+                    {ICONS.clip}
+                  </button>
+                  <span>{target === "software" && task === "craft" ? t("wizard.softwareHint") : t("wizard.enterHint")}</span>
+                  <input ref={fileInput} type="file" multiple hidden onChange={(e) => e.target.files && void addFiles(e.target.files)} />
+                </div>
+              </div>
+              {ideas && (
+                <div className="wiz-ideas">
+                  <span>{t("wizard.ideas")}</span>
+                  {ideas.map((k) => (
+                    <button key={k} type="button" className="chip-btn" onClick={() => setText(t(k))}>
+                      {t(k)}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </Step>
+
+            <div className="wiz-foot">
+              <div className="wiz-foot-row">
+                <label>{t("wizard.builtBy")}</label>
+                <ModelSelect value={model} onChange={setModel} />
+              </div>
+              <div className="wiz-folder-modes" role="radiogroup" aria-label={t("wizard.whereLabel")}>
+                {(["new", "existing", "git"] as const).map((m) => (
+                  <button key={m} type="button" role="radio" aria-checked={folderMode === m} className={`wiz-folder-mode ${folderMode === m ? "active" : ""}`} onClick={() => setFolderMode(m)}>
+                    {ICONS[m === "git" ? "git" : "folder"]}
+                    {t(m === "new" ? "wizard.whereNew" : m === "existing" ? "wizard.whereExisting" : "wizard.whereGit")}
                   </button>
                 ))}
               </div>
-            )}
-            <div className="row" style={{ marginBottom: 8 }}>
-              <code className="grow" style={{ flex: 1 }}>
-                {rel}
-              </code>
-              {listing?.parent && (
-                <button className="small" onClick={() => setPath(listing.parent!)}>
-                  ↑ {t("new.up")}
-                </button>
+              {folderMode === "git" && (
+                <input className="wiz-url" value={repoUrl} placeholder="https://git.example.com/user/repo.git" onChange={(e) => setRepoUrl(e.target.value)} />
               )}
-            </div>
-            <div className="dir-list">
-              {listing?.dirs.length === 0 && <div className="empty" style={{ padding: 16 }}>{t("new.noSubdirs")}</div>}
-              {listing?.dirs.map((d) => (
-                <button key={d.path} onClick={() => setPath(d.path)}>
-                  <span>📁</span>
-                  <span style={{ flex: 1 }}>{d.name}</span>
-                  {d.git && <span className="chip">git</span>}
+              {folderMode !== "existing" && (
+                <div className="wiz-folder">
+                  {ICONS.folder}
+                  <span className="wiz-folder-text">
+                    {t(folderMode === "git" ? "wizard.cloneInto" : "wizard.newFolderIn")}{" "}
+                    {roots.length > 1 ? (
+                      <select value={rootPath} onChange={(e) => setRootPath(e.target.value)}>
+                        {roots.map((r) => (
+                          <option key={r.path} value={r.path}>
+                            {r.name === "/" ? "workspace" : r.name}
+                          </option>
+                        ))}
+                      </select>
+                    ) : (
+                      <code>{!roots[0] || roots[0].name === "/" ? "workspace" : roots[0].name}</code>
+                    )}
+                    <span>/</span>
+                    <input
+                      className="wiz-folder-name"
+                      value={folderName}
+                      onChange={(e) => {
+                        setFolderName(e.target.value);
+                        setNameTouched(true);
+                      }}
+                    />
+                  </span>
+                </div>
+              )}
+              {folderMode === "existing" && <FolderPicker path={picked} onPick={setPicked} />}
+              {error && <div className="notice err">{error}</div>}
+              <div className="wiz-start-row">
+                <button className="primary wiz-start" disabled={!canStart} onClick={create}>
+                  {ICONS.start}
+                  {creating ?? t("wizard.start")}
                 </button>
-              ))}
+              </div>
             </div>
           </div>
-
-          <div className="panel">
-            <div className="form">
-              <label>{t("new.model")}</label>
-              <ModelSelect value={model} onChange={setModel} />
-              <label>{t("new.mode")}</label>
-              <select value={agent} onChange={(e) => setAgent(e.target.value)}>
-                {agents.map((a) => (
-                  <option key={a.name} value={a.name}>
-                    {a.name} – {a.description}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <div className="panel">
-            <h3>{t("new.firstPrompt")}</h3>
-            <textarea
-              style={{ width: "100%", minHeight: 110 }}
-              value={prompt}
-              placeholder={t("composer.placeholder")}
-              onChange={(e) => setPrompt(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) void create();
-              }}
-            />
-          </div>
-          {error && <div className="notice err">{error}</div>}
-          <button className="primary" disabled={!listing || creating} onClick={create}>
-            {t("new.start", { dir: rel })}
-          </button>
         </div>
       </div>
     </>
   );
 }
+
+/** Browse the user's folders and pick one. */
+function FolderPicker({ path, onPick }: { path: string; onPick: (p: string) => void }) {
+  const t = useT();
+  const [browse, setBrowse] = useState(path);
+  const roots = useFetch<{ path: string; name: string }[]>("/fs/roots").data ?? [];
+  const { data: listing, error } = useFetch<DirListing>(`/fs/dirs${browse ? `?path=${encodeURIComponent(browse)}` : ""}`);
+  useEffect(() => {
+    if (error && browse) setBrowse("");
+  }, [error, browse]);
+  useEffect(() => {
+    if (listing && listing.path !== path) onPick(listing.path);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [listing?.path]);
+  const rel = listing ? listing.path.slice(listing.workspace.length) || "/" : "";
+  return (
+    <div className="wiz-picker">
+      {roots.length > 1 && (
+        <div className="mode-tabs" style={{ marginBottom: 8, flexWrap: "wrap" }}>
+          {roots.map((r) => (
+            <button key={r.path} className={listing?.root === r.path ? "active" : ""} onClick={() => setBrowse(r.path)}>
+              {r.name}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="row" style={{ marginBottom: 8 }}>
+        <code className="grow" style={{ flex: 1 }}>
+          {rel}
+        </code>
+        {listing?.parent && (
+          <button className="small" onClick={() => setBrowse(listing.parent!)}>
+            <Icon name="arrow-up" /> {t("new.up")}
+          </button>
+        )}
+      </div>
+      <div className="dir-list">
+        {listing?.dirs.length === 0 && <div className="empty" style={{ padding: 16 }}>{t("new.noSubdirs")}</div>}
+        {listing?.dirs.map((d) => (
+          <button key={d.path} onClick={() => setBrowse(d.path)}>
+            {ICONS.folder}
+            <span style={{ flex: 1 }}>{d.name}</span>
+            {d.git && <span className="chip">git</span>}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

web/src/components/QueueList.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { del, post } from "../api";
 import { useT } from "../i18n";
 import { useStore } from "../store";
@@ -38,7 +39,7 @@ export function QueueList({ sessionId, busy }: { sessionId: string; busy: boolea
                 title={t("queue.remove")}
                 onClick={() => del(`/sessions/${sessionId}/queue/${it.id}`).catch((e) => toast(e.message))}
               >
-                ×
+                <Icon name="close" />
               </button>
             )}
           </div>

web/src/components/RenameDialog.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { patch, post } from "../api";
+import { useFetch } from "../hooks";
+import { useT } from "../i18n";
+import { Icon } from "./Icon";
+import { ModelSelect } from "./ModelSelect";
+import { Spinner } from "./Activity";
+
+/** Rename a session: type a name, or let a chosen model suggest one. */
+export function RenameDialog({ sessionId, title, onClose }: { sessionId: string; title: string; onClose: () => void }) {
+  const t = useT();
+  const config = useFetch<{ small_model?: string; default_model?: string }>("/config").data;
+  const [value, setValue] = useState(title);
+  const [model, setModel] = useState("");
+  const [busy, setBusy] = useState<"gen" | "save">();
+  const [error, setError] = useState<string>();
+  const chosen = model || config?.small_model || config?.default_model || "";
+
+  const generate = async () => {
+    setBusy("gen");
+    setError(undefined);
+    try {
+      const r = await post<{ title: string }>(`/sessions/${sessionId}/title`, { model: chosen || undefined });
+      setValue(r.title);
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setBusy(undefined);
+    }
+  };
+
+  const save = async () => {
+    setBusy("save");
+    try {
+      await patch(`/sessions/${sessionId}`, { title: value.trim() });
+      onClose();
+    } catch (e: any) {
+      setError(e.message);
+      setBusy(undefined);
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal" role="dialog" aria-label={t("rename.title")} onClick={(e) => e.stopPropagation()}>
+        <h3>{t("rename.title")}</h3>
+        <input
+          autoFocus
+          style={{ width: "100%" }}
+          value={value}
+          placeholder={t("session.untitled")}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && !busy && void save()}
+        />
+        <div className="rename-gen">
+          <span className="hint">{t("rename.generateWith")}</span>
+          <ModelSelect value={chosen} onChange={setModel} />
+          <button className="small" onClick={generate} disabled={!!busy}>
+            {busy === "gen" ? <Spinner small /> : <Icon name="sparkle" />} {t("rename.generate")}
+          </button>
+        </div>
+        {error && <div className="notice err">{error}</div>}
+        <div className="row" style={{ marginTop: 12, justifyContent: "flex-end" }}>
+          <button onClick={onClose}>{t("common.cancel")}</button>
+          <button className="primary" onClick={save} disabled={!!busy}>
+            {t("common.save")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/Settings.tsx

@@ -1,9 +1,11 @@
+import { Icon } from "./Icon";
 import { useEffect, useState, useSyncExternalStore } from "react";
 import { get, patch as apiPatch, post, put } from "../api";
 import { useFetch, useModels } from "../hooks";
 import { getLang, languages, setLang, useT, type Key } from "../i18n";
 import { navigate } from "../router";
 import { useStore } from "../store";
+import { currentSubscription, disablePush, enablePush, pushSupported, testPush } from "../push";
 import { applyTheme, getTheme, getThemeMode, onThemeChange, THEME_MODES, THEMES, type Theme, type ThemeMode } from "../theme";
 import { setReasoningMode, useReasoningMode, type ReasoningMode } from "../prefs";
 import { ModelSelect } from "./ModelSelect";
@@ -54,7 +56,6 @@ function InterfaceSettings() {
   const theme = useSyncExternalStore(onThemeChange, getTheme);
   const mode = useSyncExternalStore(onThemeChange, getThemeMode);
   const themeInfo = THEMES.find((th) => th.id === theme)!;
-  const [notif, setNotif] = useState(typeof Notification !== "undefined" ? Notification.permission : "denied");
   return (
     <div className="panel">
       <h3>{t("settings.interface")}</h3>
@@ -107,21 +108,66 @@ function InterfaceSettings() {
         </select>
         <div className="hint">{t("settings.reasoningHint")}</div>
         <label>{t("settings.notifications")}</label>
-        <div>
-          {notif === "granted" ? (
-            <span className="chip">{t("settings.notificationsOn")}</span>
-          ) : (
-            <button className="small" onClick={() => Notification.requestPermission().then(setNotif)} disabled={notif === "denied"}>
-              {t("settings.notificationsEnable")}
-            </button>
-          )}
-        </div>
+        <PushControl />
         <div className="hint">{t("settings.notificationsHint")}</div>
       </div>
     </div>
   );
 }
 
+/** Web Push on this device: enable/disable and a test notification. */
+function PushControl() {
+  const t = useT();
+  const [state, setState] = useState<"loading" | "on" | "off" | "unsupported" | "denied">("loading");
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (!pushSupported()) return setState("unsupported");
+    if (Notification.permission === "denied") return setState("denied");
+    currentSubscription()
+      .then((s) => setState(s ? "on" : "off"))
+      .catch(() => setState("off"));
+  }, []);
+  const run = (f: () => Promise<unknown>) => async () => {
+    setBusy(true);
+    try {
+      await f();
+    } catch (e: any) {
+      toast(e.message ?? String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (state === "loading") return <div />;
+  if (state === "unsupported") return <div className="hint">{t("settings.pushUnsupported")}</div>;
+  if (state === "denied") return <div className="hint">{t("settings.pushDenied")}</div>;
+  return (
+    <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
+      {state === "on" ? (
+        <>
+          <span className="chip">{t("settings.notificationsOn")}</span>
+          <button
+            className="small"
+            disabled={busy}
+            onClick={run(async () => {
+              const n = await testPush();
+              toast(n > 0 ? t("settings.pushTestSent") : t("settings.pushTestNone"));
+            })}
+          >
+            {t("settings.pushTest")}
+          </button>
+          <button className="small ghost" disabled={busy} onClick={run(async () => (await disablePush(), setState("off")))}>
+            {t("settings.pushDisable")}
+          </button>
+        </>
+      ) : (
+        <button className="small" disabled={busy} onClick={run(async () => (await enablePush(), setState("on")))}>
+          {t("settings.notificationsEnable")}
+        </button>
+      )}
+    </div>
+  );
+}
+
 function General({ cfg, reload }: { cfg: ConfigResponse; reload: () => void }) {
   const t = useT();
   const s = cfg.config.server;
@@ -425,8 +471,8 @@ function ProviderEditor({ name, p, reload }: { name: string; p: Json; reload: ()
                   <th>ID</th>
                   <th>{t("settings.context")}</th>
                   <th>{t("settings.maxOutput")}</th>
-                  <th title={t("settings.reasoning")}>🧠</th>
-                  <th title={t("settings.vision")}>👁</th>
+                  <th title={t("settings.reasoning")}><Icon name="brain" /></th>
+                  <th title={t("settings.vision")}><Icon name="eye" /></th>
                   <th>{t("settings.effort")}</th>
                   <th>{t("settings.priceIn")}</th>
                   <th>{t("settings.priceOut")}</th>
@@ -472,7 +518,7 @@ function ProviderEditor({ name, p, reload }: { name: string; p: Json; reload: ()
                     </td>
                     <td>
                       <button className="small ghost danger" onClick={() => setModels(models.filter((_, j) => j !== i))} aria-label={t("common.remove")}>
-                        ×
+                        <Icon name="close" />
                       </button>
                     </td>
                   </tr>
@@ -733,7 +779,7 @@ function RuleTable({ rules, setRules, choices, keyLabel }: { rules: [string, str
             </td>
             <td>
               <button className="small ghost danger" onClick={() => setRules(rules.filter((_, j) => j !== i))} aria-label={t("common.remove")}>
-                ×
+                <Icon name="close" />
               </button>
             </td>
           </tr>
@@ -819,17 +865,17 @@ function Raw({ reload }: { reload: () => void }) {
 const ADMIN_TABS = ["general", "providers", "agents", "mcp", "permissions", "users", "folders", "tools", "audit", "account", "raw"] as const;
 const USER_TABS = ["general", "account"] as const;
 const TAB_ICONS: Record<string, string> = {
-  general: "⚙️",
-  providers: "🧠",
-  agents: "🤖",
-  mcp: "🔌",
-  permissions: "🛡️",
-  users: "👥",
-  folders: "🗂️",
-  tools: "🧰",
-  audit: "📜",
-  account: "👤",
-  raw: "📝",
+  general: "gear",
+  providers: "brain",
+  agents: "robot",
+  mcp: "plug",
+  permissions: "shield",
+  users: "users",
+  folders: "folders",
+  tools: "toolbox",
+  audit: "scroll",
+  account: "user",
+  raw: "file-text",
 };
 
 export function Settings({ tab, onMenu }: { tab?: string; onMenu: () => void }) {
@@ -843,7 +889,7 @@ export function Settings({ tab, onMenu }: { tab?: string; onMenu: () => void })
     <>
       <div className="topbar">
         <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}>
-          ☰
+          <Icon name="menu" />
         </button>
         <div className="grow">
           <h1>{t("nav.settings")}</h1>
@@ -854,9 +900,7 @@ export function Settings({ tab, onMenu }: { tab?: string; onMenu: () => void })
           <div className="tabs" role="tablist">
             {TABS.map((x) => (
               <button key={x} role="tab" aria-selected={active === x} className={active === x ? "active" : ""} onClick={() => navigate(`/settings/${x}`)}>
-                <span className="nav-icon" aria-hidden>
-                  {TAB_ICONS[x]}
-                </span>
+                <Icon name={TAB_ICONS[x]} className="nav-icon" />
                 {t(`settings.tab.${x}` as Key)}
               </button>
             ))}

web/src/components/ShellsPanel.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useEffect, useState } from "react";
 import { get, post } from "../api";
 import { toast } from "../dialogs";
@@ -40,7 +41,7 @@ export function ShellsChip({ sessionId, busy }: { sessionId: string; busy: boole
   return (
     <>
       <button className={`chip ${running ? "warn" : ""}`} style={{ border: "none" }} onClick={() => setOpen(true)} title={t("shells.title")}>
-        {running ? <Spinner small /> : "▣"} {t("shells.chip", { n: running, total: shells.length })}
+        {running ? <Spinner small /> : <Icon name="terminal" />} {t("shells.chip", { n: running, total: shells.length })}
       </button>
       {open && (
         <div className="modal-backdrop" onClick={() => setOpen(false)}>
@@ -49,13 +50,13 @@ export function ShellsChip({ sessionId, busy }: { sessionId: string; busy: boole
               <h3 style={{ margin: 0 }}>{t("shells.title")}</h3>
               <span className="spacer" />
               <button className="small ghost" onClick={() => setOpen(false)} aria-label={t("common.close")}>
-                ✕
+                <Icon name="close" />
               </button>
             </div>
             <div className="mode-tabs" style={{ flexWrap: "wrap", marginBottom: 8 }}>
               {shells.map((s) => (
                 <button key={s.id} className={s.id === current.id ? "active" : ""} onClick={() => setSelected(s.id)}>
-                  {s.running ? "● " : "○ "}
+                  <Icon name={s.running ? "dot" : "radio-off"} className={`tiny ${s.running ? "ok" : ""}`} />{" "}
                   {s.command.slice(0, 40)}
                 </button>
               ))}
@@ -67,7 +68,7 @@ export function ShellsChip({ sessionId, busy }: { sessionId: string; busy: boole
               <span className="spacer" />
               {current.running && (
                 <button className="small danger" onClick={() => post(`/sessions/${sessionId}/shells/${current.id}/kill`).catch(toast)}>
-                  ■ {t("shells.stop")}
+                  <Icon name="stop" /> {t("shells.stop")}
                 </button>
               )}
             </div>

web/src/components/Sidebar.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { cycleThemeMode, getThemeMode, onThemeChange } from "../theme";
 import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { get, post } from "../api";
@@ -123,7 +124,7 @@ export function Sidebar({ open, activeId, section }: { open: boolean; activeId?:
                   <span>{s.title || t("session.untitled")}</span>
                 </div>
                 <div className="sub">
-                  {s.shared && <span title={t("sidebar.shared")}>⇄ </span>}
+                  {s.shared && <span title={t("sidebar.shared")}><Icon name="share" className="tiny" /> </span>}
                   {basename(s.cwd)} · {s.agent} · {fmtRelative(s.updated_at)}
                 </div>
               </button>
@@ -138,25 +139,25 @@ export function Sidebar({ open, activeId, section }: { open: boolean; activeId?:
         </span>
         <ThemeModeButton />
         <button className="small ghost" onClick={() => post("/auth/logout").then(() => location.reload())}>
-          <span className="nav-icon" aria-hidden>🚪</span>
+          <Icon name="logout" className="nav-icon" />
           {t("nav.logout")}
         </button>
       </div>
       <div className="sidebar-foot">
         <button className={`ghost ${section === "files" ? "active" : ""}`} onClick={() => navigate("/files")}>
-          <span className="nav-icon" aria-hidden>📁</span>
+          <Icon name="folder" className="nav-icon" />
           {t("nav.files")}
         </button>
         <button className={`ghost ${section === "images" ? "active" : ""}`} onClick={() => navigate("/images")}>
-          <span className="nav-icon" aria-hidden>🖼️</span>
+          <Icon name="image" className="nav-icon" />
           {t("nav.images")}
         </button>
         <button className={`ghost ${section === "stats" ? "active" : ""}`} onClick={() => navigate("/stats")}>
-          <span className="nav-icon" aria-hidden>📊</span>
+          <Icon name="chart" className="nav-icon" />
           {t("nav.stats")}
         </button>
         <button className={`ghost ${section === "settings" ? "active" : ""}`} onClick={() => navigate("/settings")}>
-          <span className="nav-icon" aria-hidden>🔧</span>
+          <Icon name="wrench" className="nav-icon" />
           {t("nav.settings")}
         </button>
       </div>
@@ -168,7 +169,7 @@ export function Sidebar({ open, activeId, section }: { open: boolean; activeId?:
 function ThemeModeButton() {
   const t = useT();
   const mode = useSyncExternalStore(onThemeChange, getThemeMode);
-  const icon = mode === "auto" ? "◐" : mode === "light" ? "☀" : "☾";
+  const icon = <Icon name={mode === "auto" ? "theme-auto" : mode === "light" ? "sun" : "moon"} />;
   const label = t(mode === "auto" ? "settings.themeAuto" : mode === "light" ? "settings.themeLight" : "settings.themeDark");
   return (
     <button className="small ghost theme-toggle" onClick={cycleThemeMode} title={`${t("settings.themeToggle")} – ${label}`} aria-label={t("settings.themeToggle")}>

web/src/components/Stats.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useMemo, useState } from "react";
 import { useFetch } from "../hooks";
 import { fmtCompact, fmtCost, fmtDate, fmtNumber, fmtPercent, getLang, useT, weekdayNames, type Key } from "../i18n";
@@ -163,7 +164,7 @@ export function Stats({ onMenu }: { onMenu: () => void }) {
     <>
       <div className="topbar">
         <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}>
-          ☰
+          <Icon name="menu" />
         </button>
         <div className="grow">
           <h1>{t("nav.stats")}</h1>

web/src/components/ToolCard.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { base64Size, FileFigure } from "./FileFigure";
 import { useT } from "../i18n";
 import { navigate } from "../router";
@@ -26,6 +27,12 @@ export function toolTitle(name: string, input: any): string {
       return input?.path ?? ".";
     case "bash":
       return input?.description || input?.command || "";
+    case "craft_phase":
+      return `${input?.phase ?? ""}${input?.note ? ` – ${input.note}` : ""}`;
+    case "web_search":
+      return input?.query ?? "";
+    case "diagnostics":
+      return input?.path ?? "";
     case "glob":
     case "grep":
       return `${input?.pattern ?? ""}${input?.path ? `  in ${input.path}` : ""}`;
@@ -35,7 +42,7 @@ export function toolTitle(name: string, input: any): string {
     case "task":
       return `${input?.subagent_type ?? "general"}: ${input?.description ?? ""}`;
     case "image_compare":
-      return `${input?.original ?? ""} ↔ ${input?.candidate ?? ""}`;
+      return `${input?.original ?? ""} vs. ${input?.candidate ?? ""}`;
     case "skill":
       return input?.name ?? "";
     case "ask_user":
@@ -46,12 +53,12 @@ export function toolTitle(name: string, input: any): string {
 }
 
 export function TodoList({ todos }: { todos: Todo[] }) {
-  const icon = { completed: "☑", in_progress: "▶", pending: "☐" } as const;
+  const icon = { completed: "box-on", in_progress: "play", pending: "box-off" } as const;
   return (
     <ul>
       {todos.map((td, i) => (
         <li key={i} className={td.status}>
-          <span>{icon[td.status] ?? "☐"}</span>
+          <Icon name={icon[td.status as keyof typeof icon] ?? "box-off"} />
           <span>{td.content}</span>
         </li>
       ))}
@@ -63,7 +70,7 @@ export function ToolCard({ call, result, running, baseDir }: { call: ToolCall; r
   const t = useT();
   const progress = useStore((s) => s.progress[call.id]);
   const status = result ? (result.is_error ? "err" : "ok") : running ? "run" : "err";
-  const statusText = result ? (result.is_error ? "✗" : "✓") : running ? "…" : "–";
+  const statusText = result ? <Icon name={result.is_error ? "x-mark" : "check"} /> : running ? "…" : "–";
   const meta = result?.meta;
 
   // The live task list has its own panel; updates are a single line here.
@@ -73,8 +80,8 @@ export function ToolCard({ call, result, running, baseDir }: { call: ToolCall; r
     const current = todos.find((x) => x.status === "in_progress");
     return (
       <div className="todo-line">
-        ☑ {t("tool.todosUpdated", { done, total: todos.length })}
-        {current && <span> · ▶ {current.content}</span>}
+        <Icon name="box-on" /> {t("tool.todosUpdated", { done, total: todos.length })}
+        {current && <span> · <Icon name="play" className="tiny" /> {current.content}</span>}
       </div>
     );
   }
@@ -90,7 +97,7 @@ export function ToolCard({ call, result, running, baseDir }: { call: ToolCall; r
         <div className="tool-head">
           <span className="tool-name">{call.name}</span>
           <span className="tool-title">{call.input.path}</span>
-          <span className="status ok">✓</span>
+          <span className="status ok"><Icon name="check" /></span>
         </div>
         <FileFigure url={writtenImage} name={call.input.path}>
           <img src={`${writtenImage}&v=${result!.call_id}`} alt={call.input.path} />

web/src/components/UsageOverlay.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./Icon";
 import { useEffect } from "react";
 import { useFetch, useModels } from "../hooks";
 import { fmtCompact, fmtCost, fmtDate, fmtNumber, fmtPercent, useT } from "../i18n";
@@ -64,7 +65,7 @@ export function UsageOverlay({ session, onClose }: { session: Session; onClose:
           <h3 style={{ margin: 0 }}>{t("usage.title")}</h3>
           <span className="spacer" />
           <button className="small ghost" onClick={onClose} aria-label={t("common.close")}>
-            ✕
+            <Icon name="close" />
           </button>
         </div>
         {!data ? (
@@ -85,7 +86,7 @@ export function UsageOverlay({ session, onClose }: { session: Session; onClose:
               <div className="kpi">
                 <div className="k-label">{t("stats.tokens")}</div>
                 <div className="k-value">
-                  {fmtCompact(data.total.input_tokens + data.total.cache_read_tokens + data.total.cache_write_tokens)}↑ {fmtCompact(data.total.output_tokens)}↓
+                  {fmtCompact(data.total.input_tokens + data.total.cache_read_tokens + data.total.cache_write_tokens)}<Icon name="arrow-up" className="tiny" /> {fmtCompact(data.total.output_tokens)}<Icon name="arrow-down" className="tiny" />
                 </div>
                 <div className="k-sub">
                   {t("stats.cacheHit")}: {fmtPercent(data.total.cache_hit_rate)}
@@ -96,7 +97,7 @@ export function UsageOverlay({ session, onClose }: { session: Session; onClose:
                 <div className="k-value" style={{ fontSize: 15 }}>
                   {data.first ? fmtDate(data.first) : "–"}
                 </div>
-                <div className="k-sub">{data.last ? `→ ${fmtDate(data.last)}` : ""}</div>
+                <div className="k-sub">{data.last ? <><Icon name="chevron-right" className="tiny" /> {fmtDate(data.last)}</> : ""}</div>
               </div>
             </div>
 
@@ -118,8 +119,8 @@ export function UsageOverlay({ session, onClose }: { session: Session; onClose:
                       <Row label="ID" value={<code>{m.model}</code>} />
                       <Row label={t("settings.context")} value={mi?.context ? `${fmtCompact(mi.context)} tok` : "–"} />
                       <Row label={t("settings.maxOutput")} value={mi?.max_output ? `${fmtCompact(mi.max_output)} tok` : "–"} />
-                      <Row label={t("settings.reasoning")} value={mi?.reasoning ? `✓${mi.effort ? ` (${mi.effort})` : ""}` : "–"} />
-                      <Row label={t("settings.vision")} value={mi?.vision ? "✓" : "–"} />
+                      <Row label={t("settings.reasoning")} value={mi?.reasoning ? <><Icon name="check" />{mi.effort ? ` (${mi.effort})` : ""}</> : "–"} />
+                      <Row label={t("settings.vision")} value={mi?.vision ? <Icon name="check" /> : "–"} />
                       {isCurrent && mi?.context ? (
                         <Row label={t("usage.contextNow")} value={`${fmtCompact(ctxTokens)} / ${fmtCompact(mi.context)} (${fmtPercent(ctxTokens / mi.context)})`} />
                       ) : null}

web/src/dialogs.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "./components/Icon";
 // In-app dialogs and toasts instead of the browser's alert/confirm/prompt.
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { t } from "./i18n";
@@ -132,7 +133,7 @@ export function DialogHost() {
       <div className="toasts" role="status" aria-live="polite">
         {ts.map((x) => (
           <div key={x.id} className={`toast ${x.kind}`} onClick={() => ((toasts = toasts.filter((y) => y.id !== x.id)), emit())}>
-            {x.kind === "error" ? "⚠ " : x.kind === "success" ? "✓ " : ""}
+            {x.kind === "error" ? <Icon name="warning" /> : x.kind === "success" ? <Icon name="check" /> : null}
             {x.message}
           </div>
         ))}

web/src/i18n/de.ts

@@ -210,6 +210,74 @@ export const de: Messages = {
 
   "session.untitled": "Neue Session",
 
+  "wizard.title": "Was möchtest du machen?",
+  "wizard.subtitle": "Aufgabe wählen, beschreiben, was du willst, dann auf Start drücken.",
+  "wizard.whatToDo": "Was möchtest du machen?",
+  "wizard.task.craft": "Etwas craften",
+  "wizard.task.craftDesc": "Website, App, Spiel oder altes Programm nachbauen – oder etwas Neues bauen",
+  "wizard.task.build": "Am Code arbeiten",
+  "wizard.task.buildDesc": "In einem Projekt umsetzen, reparieren und ausführen",
+  "wizard.task.plan": "Planen",
+  "wizard.task.planDesc": "Nur lesen: analysieren und einen Plan vorschlagen",
+  "wizard.whatToRecreate": "Was möchtest du nachbauen?",
+  "wizard.target.website": "Eine Website",
+  "wizard.target.app": "Eine App",
+  "wizard.target.game": "Ein Spiel",
+  "wizard.target.software": "Alte Software",
+  "wizard.target.fresh": "Nichts – neu anfangen",
+  "wizard.cleanDesc": "Nur aus dem Sichtbaren: Screenshots, sichtbarer Text, Verhalten",
+  "wizard.deepDesc": "Auch Quellen und Binärdateien untersuchen (Ghidra) – nachbilden, nie kopieren",
+  "wizard.softwareNeedsDeep": "Für die Analyse eines Programms braucht es den Deep-Modus (Dekompilieren). Im Clean Room werden nur Screenshots und deine Beschreibung genutzt.",
+  "wizard.sayWhat": "Sag, was du willst",
+  "wizard.placeholder.website": "Besondere Wünsche? z. B. nur die Startseite, in React, dunkles Theme …",
+  "wizard.placeholder.app": "Beschreibe die App, hänge Screenshots an …",
+  "wizard.placeholder.game": "Beschreibe das Spiel, hänge Screenshots an …",
+  "wizard.placeholder.software": "Was ist das für ein Programm? Worauf soll die neue Version laufen? Programm, Archiv oder Installer anhängen.",
+  "wizard.placeholder.fresh": "Zum Beispiel: eine Website für meine Bäckerei",
+  "wizard.placeholder.task": "Was soll gemacht werden?",
+  "wizard.enterHint": "Enter zum Starten · Shift+Enter für neue Zeile · Dateien ablegen oder einfügen",
+  "wizard.softwareHint": "Programm mit Bibliotheken, zip/tar.gz oder Installer anhängen – landet in original/",
+  "wizard.attach": "Dateien anhängen",
+  "wizard.ideas": "Ideen:",
+  "wizard.idea.siteLanding": "Nur die Startseite, als reines HTML/CSS",
+  "wizard.idea.siteShop": "Alle Seiten, in React mit Tailwind",
+  "wizard.idea.appTodo": "Eine To-do-App wie auf meinen Screenshots",
+  "wizard.idea.appNotes": "Eine Notiz-App mit dem gleichen Layout",
+  "wizard.idea.gameSnake": "Ein einfaches Snake-Spiel im Browser",
+  "wizard.idea.gameBreakout": "Ein Breakout-Klon mit eigener Grafik",
+  "wizard.idea.swDos": "Ein altes DOS-Spiel – die neue Version soll im Browser laufen",
+  "wizard.idea.swTool": "Ein altes Windows-Tool – als plattformübergreifende App nachbauen",
+  "wizard.idea.freshBakery": "Eine Website für meine Bäckerei",
+  "wizard.idea.freshSnake": "Ein einfaches Snake-Spiel",
+  "wizard.idea.planFeature": "Ein neues Feature für dieses Projekt planen",
+  "wizard.idea.planRefactor": "Die größten Schwächen finden und ein Refactoring vorschlagen",
+  "wizard.idea.buildTests": "Tests für das Kernmodul schreiben und Fehler beheben",
+  "wizard.idea.buildBug": "Finde und behebe den Fehler: ",
+  "wizard.builtBy": "Gebaut von",
+  "wizard.newFolderIn": "Gespeichert in einem neuen Ordner in",
+  "wizard.existingFolder": "Arbeitet in",
+  "wizard.chooseFolder": "Ordner wählen…",
+  "wizard.useNewFolder": "Neuen Ordner verwenden",
+  "wizard.start": "Start",
+  "wizard.creatingFolder": "Ordner wird angelegt…",
+  "wizard.uploading": "Dateien werden hochgeladen…",
+  "wizard.starting": "Wird gestartet…",
+  "phase.study": "Studieren",
+  "phase.specify": "Spezifizieren",
+  "phase.build": "Bauen",
+  "phase.check": "Prüfen",
+  "phase.ready": "Fertig",
+  "wizard.cloning": "Repository wird geklont…",
+  "wizard.originalTitle": "Original-Software hochladen",
+  "wizard.originalHint": "Programmordner als zip, tar.gz, 7z, Installer oder einzelne Dateien – bis 500 MB pro Datei. Klicken oder hier ablegen.",
+  "wizard.whereLabel": "Wo soll gebaut werden?",
+  "wizard.whereNew": "Neuer Ordner",
+  "wizard.whereExisting": "Bestehender Ordner",
+  "wizard.whereGit": "Git-Repository",
+  "wizard.cloneInto": "Geklont nach",
+  "rename.title": "Session umbenennen",
+  "rename.generateWith": "Namen vorschlagen mit",
+  "rename.generate": "Generieren",
   "new.title": "Neue Session",
   "new.directory": "Projektverzeichnis",
   "new.up": "Hoch",
@@ -317,7 +385,13 @@ export const de: Messages = {
   "settings.notifications": "Benachrichtigungen",
   "settings.notificationsEnable": "Aktivieren",
   "settings.notificationsOn": "Aktiv",
-  "settings.notificationsHint": "Benachrichtigen, wenn ein Agent eine Frage stellt, während die App im Hintergrund ist.",
+  "settings.pushTest": "Test senden",
+  "settings.pushTestSent": "Testbenachrichtigung gesendet",
+  "settings.pushTestNone": "Kein Gerät angemeldet",
+  "settings.pushDisable": "Ausschalten",
+  "settings.pushUnsupported": "Dieser Browser unterstützt keine Push-Benachrichtigungen. Auf iPhone/iPad: CodeCraft zuerst zum Home-Bildschirm hinzufügen.",
+  "settings.pushDenied": "Benachrichtigungen sind für diese Seite blockiert – in den Browser-Einstellungen erlauben.",
+  "settings.notificationsHint": "Push-Benachrichtigungen auf diesem Gerät, wenn ein Agent eine Freigabe braucht, eine Frage stellt oder eine längere Aufgabe beendet – nur wenn CodeCraft nicht geöffnet ist.",
   "settings.server": "Server",
   "settings.workspace": "Workspace",
   "settings.defaultModel": "Standardmodell",

web/src/i18n/en.ts

@@ -209,6 +209,74 @@ export const en = {
 
   "session.untitled": "New session",
 
+  "wizard.title": "What do you want to do?",
+  "wizard.subtitle": "Pick a task, say what you want, then press Start.",
+  "wizard.whatToDo": "What do you want to do?",
+  "wizard.task.craft": "Craft something",
+  "wizard.task.craftDesc": "Recreate a website, app, game or old program – or build something new",
+  "wizard.task.build": "Work on code",
+  "wizard.task.buildDesc": "Implement, fix and run things in a project",
+  "wizard.task.plan": "Plan",
+  "wizard.task.planDesc": "Read-only: analyse and propose a plan",
+  "wizard.whatToRecreate": "What do you want to recreate?",
+  "wizard.target.website": "A website",
+  "wizard.target.app": "An app",
+  "wizard.target.game": "A game",
+  "wizard.target.software": "Old software",
+  "wizard.target.fresh": "Nothing – start fresh",
+  "wizard.cleanDesc": "Only from what you can see: screenshots, visible text, behaviour",
+  "wizard.deepDesc": "Also study sources and binaries (Ghidra) – re-create, never copy",
+  "wizard.softwareNeedsDeep": "Analysing a program needs Deep mode (decompiling). In clean room mode only screenshots and your description are used.",
+  "wizard.sayWhat": "Say what you want",
+  "wizard.placeholder.website": "Anything special? e.g. only the start page, in React, dark theme …",
+  "wizard.placeholder.app": "Describe the app, attach screenshots …",
+  "wizard.placeholder.game": "Describe the game, attach screenshots or a video description …",
+  "wizard.placeholder.software": "What is the program? What should the new version run on? Attach the program, an archive or installer.",
+  "wizard.placeholder.fresh": "For example: a website for my bakery",
+  "wizard.placeholder.task": "What should be done?",
+  "wizard.enterHint": "Enter to start · Shift+Enter for a new line · drop or paste files",
+  "wizard.softwareHint": "Attach the program with its libraries, a zip/tar.gz or an installer – it goes to original/",
+  "wizard.attach": "Attach files",
+  "wizard.ideas": "Ideas:",
+  "wizard.idea.siteLanding": "Only the start page, as plain HTML/CSS",
+  "wizard.idea.siteShop": "All pages, in React with Tailwind",
+  "wizard.idea.appTodo": "A to-do app like in my screenshots",
+  "wizard.idea.appNotes": "A notes app with the same layout",
+  "wizard.idea.gameSnake": "A simple snake game in the browser",
+  "wizard.idea.gameBreakout": "A breakout clone with original graphics",
+  "wizard.idea.swDos": "An old DOS game – the new version should run in the browser",
+  "wizard.idea.swTool": "An old Windows tool – rebuild it as a cross-platform app",
+  "wizard.idea.freshBakery": "A website for my bakery",
+  "wizard.idea.freshSnake": "A simple snake game",
+  "wizard.idea.planFeature": "Plan a new feature for this project",
+  "wizard.idea.planRefactor": "Find the biggest weaknesses and propose a refactoring",
+  "wizard.idea.buildTests": "Add tests for the core module and fix what fails",
+  "wizard.idea.buildBug": "Find and fix the bug: ",
+  "wizard.builtBy": "Built by",
+  "wizard.newFolderIn": "Saved in a new folder in",
+  "wizard.existingFolder": "Works in",
+  "wizard.chooseFolder": "Choose a folder…",
+  "wizard.useNewFolder": "Use a new folder",
+  "wizard.start": "Start",
+  "wizard.creatingFolder": "Creating folder…",
+  "wizard.uploading": "Uploading files…",
+  "wizard.starting": "Starting…",
+  "phase.study": "Study",
+  "phase.specify": "Specify",
+  "phase.build": "Build",
+  "phase.check": "Check",
+  "phase.ready": "Ready",
+  "wizard.cloning": "Cloning repository…",
+  "wizard.originalTitle": "Upload the original software",
+  "wizard.originalHint": "Program folder as zip, tar.gz, 7z, an installer or single files – up to 500 MB each. Click or drop here.",
+  "wizard.whereLabel": "Where should it be built?",
+  "wizard.whereNew": "New folder",
+  "wizard.whereExisting": "Existing folder",
+  "wizard.whereGit": "Git repository",
+  "wizard.cloneInto": "Cloned into",
+  "rename.title": "Rename session",
+  "rename.generateWith": "Suggest a name with",
+  "rename.generate": "Generate",
   "new.title": "New session",
   "new.directory": "Project directory",
   "new.up": "Up",
@@ -316,7 +384,13 @@ export const en = {
   "settings.notifications": "Notifications",
   "settings.notificationsEnable": "Enable",
   "settings.notificationsOn": "Enabled",
-  "settings.notificationsHint": "Notify when an agent asks a question while the app is in the background.",
+  "settings.pushTest": "Send test",
+  "settings.pushTestSent": "Test notification sent",
+  "settings.pushTestNone": "No device subscribed",
+  "settings.pushDisable": "Turn off",
+  "settings.pushUnsupported": "This browser does not support push notifications. On iPhone/iPad: add CodeCraft to the home screen first.",
+  "settings.pushDenied": "Notifications are blocked for this site – allow them in the browser settings.",
+  "settings.notificationsHint": "Push notifications on this device when an agent asks for permission, asks a question or finishes a longer task – only while CodeCraft is not open.",
   "settings.server": "Server",
   "settings.workspace": "Workspace",
   "settings.defaultModel": "Default model",

web/src/push.ts

@@ -0,0 +1,53 @@
+import { get, post } from "./api";
+
+function b64ToBytes(b64: string): Uint8Array<ArrayBuffer> {
+  const s = atob(b64.replace(/-/g, "+").replace(/_/g, "/") + "===".slice((b64.length + 3) % 4));
+  const out = new Uint8Array(new ArrayBuffer(s.length));
+  for (let i = 0; i < s.length; i++) out[i] = s.charCodeAt(i);
+  return out;
+}
+
+export const pushSupported = () => "serviceWorker" in navigator && "PushManager" in window && "Notification" in window;
+
+/** Current push subscription of this device (null if none). */
+export async function currentSubscription(): Promise<PushSubscription | null> {
+  if (!pushSupported()) return null;
+  const reg = await navigator.serviceWorker.ready;
+  return reg.pushManager.getSubscription();
+}
+
+/** Ask for permission, subscribe this device and register it with the server. */
+export async function enablePush(): Promise<void> {
+  if (!pushSupported()) throw new Error("Push is not supported by this browser (on iOS: install the app to the home screen first).");
+  const perm = await Notification.requestPermission();
+  if (perm !== "granted") throw new Error("Notifications were not allowed.");
+  const reg = await navigator.serviceWorker.ready;
+  const { key } = await get<{ key: string }>("/push/key");
+  let sub = await reg.pushManager.getSubscription();
+  // A subscription for another server key must be replaced.
+  if (sub && sub.options.applicationServerKey) {
+    const cur = new Uint8Array(sub.options.applicationServerKey);
+    const want = b64ToBytes(key);
+    if (cur.length !== want.length || cur.some((b, i) => b !== want[i])) {
+      await sub.unsubscribe();
+      sub = null;
+    }
+  }
+  if (!sub) sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: b64ToBytes(key) });
+  await post("/push/subscribe", sub.toJSON());
+  localStorage.setItem("codecraft.push", "1");
+}
+
+export async function disablePush(): Promise<void> {
+  const sub = await currentSubscription();
+  if (sub) {
+    await fetch("/api/push/subscribe", { method: "DELETE", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ endpoint: sub.endpoint }) });
+    await sub.unsubscribe();
+  }
+  localStorage.removeItem("codecraft.push");
+}
+
+export async function testPush(): Promise<number> {
+  const r = await post<{ sent: number }>("/push/test", {});
+  return r.sent;
+}

web/src/store.ts

@@ -197,6 +197,8 @@ export function applyEvent(ev: ServerEvent) {
 /** Notify when the app is in the background and an agent needs input. */
 function notify(body: string) {
   if (document.visibilityState === "visible" || !("Notification" in window)) return;
+  // With Web Push on this device the server notifies (avoid duplicates).
+  if (localStorage.getItem("codecraft.push") === "1") return;
   if (Notification.permission === "granted") {
     new Notification("CodeCraft", { body, icon: "/icon-192.png" });
   }

web/src/styles.css

@@ -2317,3 +2317,480 @@ button.danger-solid {
 .menu-pop-body a:hover {
   background: var(--bg2);
 }
+
+/* --- new session wizard ------------------------------------------------------------ */
+.wizard {
+  max-width: 980px;
+}
+.wiz-title {
+  font-size: 30px;
+  margin: 8px 0 4px;
+  color: var(--fg0);
+}
+.wiz-sub {
+  color: var(--fg3);
+  margin: 0 0 18px;
+}
+.wiz-panel {
+  padding: 22px 24px;
+}
+.wiz-step {
+  margin-bottom: 26px;
+}
+.wiz-step h3 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 19px;
+  margin: 0 0 14px;
+  color: var(--fg0);
+}
+.wiz-num {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--bg3);
+  background: var(--bg2);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg1);
+  flex-shrink: 0;
+}
+.wiz-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 12px;
+}
+.wiz-cards.five {
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+.wiz-cards.two {
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+}
+.wiz-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-align: left;
+  padding: 14px 16px;
+  min-height: 64px;
+  border-radius: 10px;
+  border: 1px solid var(--bg3);
+  background: var(--bg0);
+  color: var(--fg1);
+  font-size: 15px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.wiz-card:hover {
+  border-color: var(--fg3);
+}
+.wiz-card.active {
+  border: 2px solid var(--accent);
+  padding: 13px 15px;
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg0));
+}
+.wiz-card-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding-right: 18px;
+}
+.wiz-card-title {
+  font-weight: 600;
+  color: var(--fg0);
+}
+.wiz-card-desc {
+  font-size: 12.5px;
+  color: var(--fg3);
+  line-height: 1.35;
+}
+.wiz-icon {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.wiz-card .wiz-icon {
+  color: var(--fg2);
+}
+.wiz-card.active .wiz-icon {
+  color: var(--accent);
+}
+.wiz-check {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.wiz-url {
+  width: 100%;
+  margin-bottom: 10px;
+  font-size: 15px;
+}
+.wiz-input {
+  border: 1px solid var(--bg3);
+  border-radius: 12px;
+  background: var(--bg0);
+  padding: 12px 14px 8px;
+}
+.wiz-input:focus-within {
+  border-color: var(--accent);
+}
+.wiz-input textarea {
+  width: 100%;
+  min-height: 96px;
+  border: none;
+  background: transparent;
+  resize: vertical;
+  font-size: 15px;
+  outline: none;
+  padding: 0;
+}
+.wiz-input-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--fg3);
+}
+.wiz-input-foot .wiz-icon {
+  width: 20px;
+  height: 20px;
+}
+.wiz-ideas {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  color: var(--fg2);
+}
+.chip-btn {
+  border: 1px solid var(--bg3);
+  border-radius: 8px;
+  background: var(--bg0);
+  color: var(--fg1);
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.chip-btn:hover {
+  border-color: var(--accent);
+}
+.wiz-foot {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  border-top: 1px solid var(--bg2);
+  padding-top: 18px;
+}
+.wiz-foot-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.wiz-foot-row label {
+  color: var(--fg2);
+}
+.wiz-folder {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  color: var(--fg2);
+}
+.wiz-folder .wiz-icon {
+  width: 20px;
+  height: 20px;
+}
+.wiz-folder-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.wiz-folder-name {
+  width: 220px;
+  font-family: var(--mono);
+}
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--blue);
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.wiz-picker .dir-list button .wiz-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--fg3);
+}
+.wiz-start-row {
+  display: flex;
+  justify-content: flex-end;
+}
+.wiz-start {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  padding: 12px 26px;
+  border-radius: 10px;
+}
+.wiz-start .wiz-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (max-width: 700px) {
+  .wiz-panel {
+    padding: 16px;
+  }
+  .wiz-title {
+    font-size: 24px;
+  }
+  .wiz-cards,
+  .wiz-cards.five,
+  .wiz-cards.two {
+    grid-template-columns: 1fr 1fr;
+  }
+  .wiz-card {
+    padding: 10px 12px;
+  }
+  .wiz-card-desc {
+    display: none;
+  }
+}
+
+/* --- craft phase bar ----------------------------------------------------------------- */
+.phase-bar {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--bg2);
+  overflow-x: auto;
+  font-size: 12.5px;
+}
+.phase-bar .phase {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--fg3);
+  white-space: nowrap;
+}
+.phase-bar .phase .dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1.5px solid var(--bg3);
+  display: inline-grid;
+  place-items: center;
+  font-size: 10px;
+}
+.phase-bar .phase.done {
+  color: var(--fg2);
+}
+.phase-bar .phase.done .dot {
+  background: var(--green);
+  border-color: var(--green);
+}
+.phase-bar .phase.done .dot svg {
+  width: 11px;
+  height: 11px;
+  fill: none;
+  stroke: var(--bg0);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.phase-bar .phase.current {
+  color: var(--accent);
+  font-weight: 600;
+}
+.phase-bar .phase.current .dot {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+  animation: glow 1.6s ease-in-out infinite;
+}
+.phase-bar .sep {
+  flex: 1;
+  min-width: 18px;
+  max-width: 60px;
+  height: 1.5px;
+  background: var(--bg3);
+  margin: 0 8px;
+}
+.phase-bar .sep.done {
+  background: var(--green);
+}
+
+.wiz-drop {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-top: 14px;
+  padding: 18px;
+  border: 2px dashed var(--bg3);
+  border-radius: 12px;
+  cursor: pointer;
+  color: var(--fg1);
+}
+.wiz-drop:hover {
+  border-color: var(--accent);
+}
+.wiz-drop .wiz-icon {
+  width: 32px;
+  height: 32px;
+  color: var(--accent);
+}
+.wiz-originals {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 10px;
+}
+.wiz-original {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: var(--bg1);
+  font-size: 13px;
+}
+.wiz-original .name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wiz-original .size {
+  color: var(--muted);
+}
+.wiz-original .bar {
+  width: 120px;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg3);
+  overflow: hidden;
+}
+.wiz-original .bar i {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.2s;
+}
+.wiz-folder-modes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.wiz-folder-mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--bg3);
+  background: var(--bg0);
+  color: var(--fg1);
+  cursor: pointer;
+}
+.wiz-folder-mode .wiz-icon {
+  width: 18px;
+  height: 18px;
+}
+.wiz-folder-mode.active {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg0));
+}
+
+/* --- icons (SVG, coloured by the theme via currentColor) --------------------- */
+.icon {
+  width: 1.15em;
+  height: 1.15em;
+  vertical-align: -0.2em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+.icon .fill {
+  fill: currentColor;
+  stroke: none;
+}
+.icon.tiny {
+  width: 0.85em;
+  height: 0.85em;
+  vertical-align: -0.08em;
+}
+.icon.ok {
+  color: var(--green);
+}
+.icon.ficon {
+  color: var(--fg3);
+}
+.icon.ficon.dir {
+  color: var(--accent);
+}
+.icon.nav-icon {
+  width: 1.15em;
+  margin-right: 8px;
+}
+.file-chip .icon.file-chip-icon {
+  color: var(--fg3);
+}
+.theme-toggle .icon {
+  width: 17px;
+  height: 17px;
+}
+
+.title-edit {
+  margin-left: 6px;
+  opacity: 0;
+  transition: opacity 0.15s;
+  vertical-align: middle;
+  padding: 2px 6px;
+}
+.topbar h1:hover .title-edit,
+.title-edit:focus-visible {
+  opacity: 0.8;
+}
+@media (pointer: coarse) {
+  .title-edit {
+    opacity: 0.6;
+  }
+}
+.rename-gen {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+.rename-gen button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}

web/src/types.ts

@@ -58,6 +58,8 @@ export interface Session {
   owner_id?: string | null;
   /** Craft: clean room (true) or deep (false); undefined = server default. */
   clean_room?: boolean | null;
+  /** Craft workflow phase reported by the agent. */
+  phase?: string;
   /** Listed because it was shared with the current user. */
   shared?: boolean;
 }