v0.8.0: WebUI redesign, /web, workspace switch, 75% budget, no shell timeout

The front end is rebuilt on the design tokens the desktop app ships (surfaces,
color-mix borders, alpha hovers, accent): a 30-icon inline SVG sprite, dark and
light themes, layout switches as deep links (?side=0, ?panel=0, ?theme=light)
resolved before the first paint. The empty page is one line and leaves with the
first turn; the right rail keeps three cards - todo, file changes (+N -M) and
context (tokens, prompt cache hit rate). Both rails animate in and out, and a
collapsed rail widens its grid track to 0 instead of being removed, so the
transcript never slides into a zero-width column.

- src/webui.c: POST /api/workspace - re-root the agent at another directory
  (permission rules, metrics, AGENTS.md follow) and start a session there, as
  sessions live per directory; state also reports cached/cache_miss tokens
- src/agent_loop.c: cst_agent_set_workspace(), rebuilt prompt and re-measured
  budget; the auto-compact threshold is 75% of the window (was 60%)
- src/tui.c: /web forks a WebUI next to the TUI - separate process and a new
  session, because cst_webui_run() blocks and two writers corrupt one session
- src/os_compat.c, src/os_win.c: run_shell runs without a time limit unless
  CST_SHELL_TIMEOUT asks for one, so builds and long clones finish
- src/main.c, include/cst_webui.h: one CST_WEBUI_DEFAULT_PORT for --help, the
  docs and /web; Termux opens the browser through termux-open-url
- README.md, docs/webui.md, docs/env_openai.md: /web, /api/workspace, the new
  state fields, the 75% threshold and the layout deep links

tests/e2e_webui.sh green (permission round-trip, token paths, --web-dev);
make check green.

README.md

@@ -212,10 +212,10 @@ Gitea Release `vVERSION`（同名资源会被替换）；仓库可设 `RELEASE_T
 | `CST_MAX_STEPS` / `--max-steps` | 每个用户回合最多调用模型几次（30） |
 | `CST_TOOL_OUT_CAP` | 单个工具输出发给模型的字节上限（16384，保留头 60% + 尾 40%） |
 | `CST_CTX_WINDOW` | 发给模型的最近非 system 消息条数（80） |
-| `CST_CTX_TOKENS` / `CST_AUTO_COMPACT=0` | 覆盖模型上下文窗口大小 / 关闭自动压缩（用到 80% 时自动 `/compact`） |
+| `CST_CTX_TOKENS` / `CST_AUTO_COMPACT=0` | 覆盖模型上下文窗口大小 / 关闭自动压缩（用到 75% 时自动 `/compact`） |
 | `CST_NO_PROJECT_NOTES=1` | 不把工作区的 `AGENTS.md` 注入 system prompt |
 | `NO_COLOR` / `CST_ASCII=1` | 关闭颜色 / 强制 ASCII 图形（非 UTF-8 终端自动退化） |
-| `CST_SHELL_TIMEOUT` | `run_shell` 超时秒数（120），超时整组进程被杀，exit=124 |
+| `CST_SHELL_TIMEOUT` | `run_shell` 超时秒数（默认不限），设了才在超时后整组杀进程，exit=124 |
 | `CST_METRICS=0` / `CST_METRICS_PATH` | 关闭 / 指定计时埋点 JSONL（默认 `.agent/metrics/<session>.jsonl`） |
 | `CST_RECORD_SSE=DIR` / `CST_REPLAY_SSE=DIR` | 录制 / 回放原始 SSE 流（`NNNN.sse` + `NNNN.req.json`） |
 | `CST_APPROVAL=ask\|auto\|yolo` / `CST_SANDBOX=off\|landlock\|seccomp` | 审批模式 / 关闭沙箱（回落到只读白名单规则）或只用指定沙箱 |
@@ -319,7 +319,7 @@ TUI 中 `/tools off NAME`、`/tools on NAME` 可临时开关单个工具。
   `sudo`、`rm`、解释器（`python3 -c …`）等危险前缀不会被建议成规则。
 - **撤销**：每轮写文件前自动快照到 `.agent/undo/`，`/undo` 恢复上一轮改动的全部文件（新建的文件会被删除）。
 - **AGENTS.md**：工作区根目录的 `AGENTS.md` 会注入 system prompt；`/init` 让 agent 自己生成一份。
-- **自动压缩**：上一轮 prompt 用到模型上下文 80% 时，下一轮开始前自动总结历史（`CST_AUTO_COMPACT=0` 关闭）。
+- **自动压缩**：上一轮 prompt 用到模型上下文 75% 时，下一轮开始前自动总结历史（`CST_AUTO_COMPACT=0` 关闭）。
 
 ### 扩展：Skills、插件、MCP、子 agent
 
@@ -408,6 +408,7 @@ Thought（推理过程）默认折叠成一行“Thought · 3.2s”，生成中
 | `/diff [path]` * | `git status` + `git diff` |
 | `/compact` | 手动压缩上下文 |
 | `/export [file]` *、`/copy` * | 导出 Markdown 记录；复制上一条回复（OSC 52，需终端支持） |
+| `/web` * | 后台起一个 WebUI 进程（同 workspace、新会话，日志写到 `.agent/webui.log`） |
 | `/init` | 让 agent 写 `AGENTS.md` |
 | `/details` *、`/thinking [on\|off]`、`/keys` * | 展开全部 tool 输出；Thought 默认展开/折叠；快捷键列表 |
 | `/skills [reload\|list]`、`/skill <name> [任务]` | 浏览 skills；带着某个 skill 开始一轮 |

docs/env_openai.md

@@ -73,7 +73,7 @@ export OPENAI_MODEL='your-model'
 | `CST_MAX_STEPS` | 每个用户回合最多调用模型几次（默认 30） |
 | `CST_TOOL_OUT_CAP` | 单个工具输出发给模型的字节上限（默认 16384） |
 | `CST_CTX_WINDOW` | 发给模型的最近非 system 消息条数（默认 80） |
-| `CST_SHELL_TIMEOUT` | `run_shell` 超时秒数（默认 120） |
+| `CST_SHELL_TIMEOUT` | `run_shell` 超时秒数（默认不限，Ctrl+C / 停止按钮仍可随时中断） |
 | `CST_METRICS=0` / `CST_METRICS_PATH` | 关闭 / 指定计时埋点 JSONL |
 | `CST_RECORD_SSE` / `CST_REPLAY_SSE` | 录制 / 回放原始 SSE 流目录；`CST_REPLAY_CHUNK` 控制回放分块字节数 |
 | `CST_MODELS` | `/model` 可选列表，`:` 或 `,` 分隔 |

docs/webui.md

@@ -95,7 +95,8 @@ GET /api/events?since=<seq>      →  text/event-stream (chunked)
 `state` 字段：`workspace` `session` `provider` `model` `effort` `approval`
 (`ask|auto|yolo`) `plan_mode` `protocol_tools` `status_busy` `todo`
 `context_tokens` `undo_available` `pending_images[]` `usage{requests,prompt_tokens,
-completion_tokens,cost,priced,currency}`。
+completion_tokens,cached_tokens,cache_miss_tokens,cost,priced,currency}`。
+`cached_tokens` / `cache_miss_tokens` 来自上游的 prompt cache 统计，前端用它算命中率。
 
 ### 请求
 
@@ -106,6 +107,7 @@ completion_tokens,cost,priced,currency}`。
 | GET | `/api/sessions` | `{current, sessions:[{id,title,messages,mtime}]}` |
 | POST | `/api/sessions/new` | `{}` → `{id}` |
 | POST | `/api/sessions/switch` | `{"id":"…"}` |
+| POST | `/api/workspace` | `{"path":"/abs/dir"}` —— 换工作目录（权限规则/埋点/AGENTS.md 跟着换），并**在新目录里开一个新会话**（会话是按目录存的）；返回 `{id}`，坏路径 → 400 |
 | POST | `/api/turn` | `{"text":"…"}` → 202 `{ok:true}`；已有轮次在跑时 **409** |
 | POST | `/api/cancel` | `{}` —— 取消当前轮（不会杀进程） |
 | POST | `/api/permission` | `{"id":N,"answer":0\|1\|2\|3}` → deny / once / always-tool / always-prefix |
@@ -149,6 +151,18 @@ api("/api/turn", {"text": "hello"})           # 之后读 /api/events 收流
 Markdown 在**服务端**渲染（复用 TUI 用的 sashidown 流式 API），客户端只贴 HTML；
 因此不需要引入任何 JS 依赖，也顺带保证了"只发送已确认的 HTML"。
 
+界面本身：左栏可收（顶栏按钮 / `?side=0`），右栏可收（`?panel=0`），主题 `?theme=dark|light`；
+三个开关都会记进 `localStorage`，带查询参数时以参数为准。空状态只留一句提示，第一轮
+对话开始后自动隐去；右栏只给三件事——任务清单、本轮文件改动行数（`+N −M`）、上下文
+占用与 prompt cache 命中率。布局类在页面脚本之前就写进 `<body>`，避免首帧闪一下再收起。
+
+TUI 里打 `/web` 会另起一个 WebUI 进程（`--web --workspace <当前目录> --new`），
+日志在 `<workspace>/.agent/webui.log`：TUI 不能被 `cst_webui_run()` 的阻塞循环占住，
+而且两个进程同时写一个会话文件会把它写坏，所以子进程总是开新会话。
+
+自动压缩的门槛是模型上下文窗口的 **75%**（`CST_CTX_BUDGET` 可覆盖）；到点后下一轮
+开始前先总结历史，而不是等到塞满。
+
 ## 测试
 
 ```bash

include/cst_agent.h

@@ -321,6 +321,12 @@ cst_agent_config_t *cst_agent_config_mut(cst_agent_t *a);
 void cst_agent_request_cancel(cst_agent_t *a);
 int cst_agent_new_session(cst_agent_t *a, char *id_out, size_t id_sz);
 int cst_agent_switch_session(cst_agent_t *a, const char *id);
+/* Re-root the agent at another directory. Per-workspace state (permission
+ * rules, metrics, project notes) follows, the system prompt is rebuilt and the
+ * token budget is re-measured. The session is not touched: the caller decides
+ * whether to keep it or start a new one. */
+int cst_agent_set_workspace(cst_agent_t *a, const char *path, char *err,
+                            size_t err_sz);
 int cst_agent_compact(cst_agent_t *a, char *err, size_t err_sz);
 /* Bare id of the current session (file name without .jsonl). */
 void cst_agent_session_id(const cst_agent_t *a, char *out, size_t out_sz);

include/cst_version.h

@@ -2,8 +2,8 @@
 #define CST_VERSION_H
 
 #define CST_VERSION_MAJOR 0
-#define CST_VERSION_MINOR 7
-#define CST_VERSION_PATCH 8
+#define CST_VERSION_MINOR 8
+#define CST_VERSION_PATCH 0
 
 #define CST_VERSION_STR_(x) #x
 #define CST_VERSION_STR(x) CST_VERSION_STR_(x)

include/cst_webui.h

@@ -17,6 +17,10 @@
 extern "C" {
 #endif
 
+/* What --web listens on when --web-port/CST_WEB_PORT says nothing (the
+ * README and --help quote this number, so keep them in sync). */
+#define CST_WEBUI_DEFAULT_PORT 8787
+
 typedef struct {
   const char *host;  /* NULL = 127.0.0.1; "0.0.0.0" = every interface */
   int port;          /* 0 = pick a free port */

include/os_compat.h

@@ -114,9 +114,10 @@ int os_win_get_label(const char *path, char *out, size_t n);
 int os_clipboard_set(const char *utf8, size_t n);
 #endif
 
-/* Child processes get stdin=/dev/null, their own process group, and are
- * killed after the timeout (CST_SHELL_TIMEOUT seconds, default 120) or when
- * *flag becomes non-zero. Exit code 124 = timeout, 130 = cancelled. */
+/* Child processes get stdin=/dev/null and their own process group. They run
+ * with no time limit unless one is asked for (CST_SHELL_TIMEOUT seconds, or
+ * os_set_run_timeout()); either way a non-zero *flag cancels them.
+ * Exit code 124 = killed by that timeout, 130 = cancelled. */
 void os_set_cancel_flag(volatile int *flag);
 volatile int *os_get_cancel_flag(void);
 void os_set_run_timeout(int seconds); /* this thread; 0 = default */

src/agent_loop.c

@@ -2558,9 +2558,9 @@ static int can_continue(const cst_agent_t *a, const turn_t *t,
   return st->http_status > 0 && st->http_status < 400 && !st->client_stopped;
 }
 
-/* Prompt size at which the session is compacted: CST_CTX_BUDGET, else 60% of
- * the context window capped at 256K tokens. Even a cached prompt is billed
- * on every step, so huge windows are not worth filling. */
+/* Prompt size at which the session is compacted: CST_CTX_BUDGET, else 75% of
+ * the context window, capped at 256K tokens. Even a cached prompt is billed on
+ * every step, so a 1M-token window is not worth filling. */
 static long ctx_budget(const cst_agent_t *a) {
   const char *e = getenv("CST_CTX_BUDGET");
   if (e && atol(e) > 0)
@@ -2568,7 +2568,7 @@ static long ctx_budget(const cst_agent_t *a) {
   long win = cst_model_context_tokens(a->cfg.model);
   if (win <= 0)
     return 0;
-  long b = win / 10 * 6;
+  long b = win / 4 * 3;
   return b > 262144 ? 262144 : b;
 }
 
@@ -2948,6 +2948,42 @@ int cst_agent_new_session(cst_agent_t *a, char *id_out, size_t id_sz) {
   return 0;
 }
 
+int cst_agent_set_workspace(cst_agent_t *a, const char *path, char *err,
+                            size_t err_sz) {
+  char dummy[8];
+  if (!err || !err_sz) {
+    err = dummy;
+    err_sz = sizeof(dummy);
+  }
+  err[0] = 0;
+  if (!a || !path || !path[0]) {
+    snprintf(err, err_sz, "empty path");
+    return -1;
+  }
+  char abs[sizeof(a->cfg.workspace_root)];
+  if (os_realpath(path, abs, sizeof(abs)) != 0) {
+    snprintf(err, err_sz, "no such directory: %s", path);
+    return -1;
+  }
+  /* a file, or a tree we may not write to, fails here instead of halfway
+   * through the next turn */
+  if (cst_agent_store_ensure(abs) != 0) {
+    snprintf(err, err_sz, "cannot use as a workspace: %s", abs);
+    return -1;
+  }
+  snprintf(a->cfg.workspace_root, sizeof(a->cfg.workspace_root), "%s", abs);
+  /* everything that is kept per workspace follows the new root */
+  cst_perms_close(a->perms);
+  a->perms = cst_perms_open(a->cfg.workspace_root);
+  cst_metrics_close(a->metrics);
+  a->metrics = cst_metrics_open(a->cfg.workspace_root,
+                                cst_session_path(a->session));
+  cst_agent_reload_notes(a);
+  ensure_system(a);          /* the prompt names the directory */
+  a->last_prompt_tokens = 0; /* the old budget was measured elsewhere */
+  return 0;
+}
+
 int cst_agent_switch_session(cst_agent_t *a, const char *id) {
   if (!a || !id || !id[0])
     return -1;

src/main.c

@@ -43,7 +43,7 @@ static void usage(const char *argv0) {
           "  -n, --max-steps N     model calls per turn (30)\n"
           "  -H, --headless -p TEXT  run one prompt without the TUI\n"
           "      --web             serve the UI over HTTP on 127.0.0.1:8787\n"
-          "      --web-port N      port (0 = pick a free one)\n"
+          "      --web-port N      port (default 8787, 0 = pick a free one)\n"
           "      --web-host ADDR   bind address (default 127.0.0.1; a\n"
           "                        non-loopback address requires a token)\n"
           "      --web-token T     require ?token=T / Authorization: Bearer T\n"
@@ -332,6 +332,7 @@ int main(int argc, char **argv) {
   int web_mode = 0;
   cst_webui_opts_t web;
   memset(&web, 0, sizeof(web));
+  web.port = CST_WEBUI_DEFAULT_PORT; /* 0 would mean "pick a free one" */
   const char *env = getenv("CST_WEB_PORT");
   if (env && env[0])
     web.port = atoi(env);

src/os_compat.c

@@ -519,7 +519,7 @@ int os_run_timeout_effective(void) {
   const char *e = getenv("CST_SHELL_TIMEOUT");
   if (e && atoi(e) > 0)
     return atoi(e);
-  return 120;
+  return 0; /* no limit: a build, a test suite or a long clone must finish */
 }
 
 double os_now_ms(void) {
@@ -662,7 +662,8 @@ int os_run_capture_ex(const char *cwd, const char *const argv[],
   int truncated = 0, killed = 0;
   int status = 0, reaped = 0, bg_killed = 0;
   double reaped_at = 0, killed_at = 0;
-  double deadline = os_now_ms() + os_run_timeout_effective() * 1000.0;
+  int timeout_s = os_run_timeout_effective();
+  double deadline = timeout_s > 0 ? os_now_ms() + timeout_s * 1000.0 : 0;
   for (;;) {
     struct pollfd pfd = {pipefd[0], POLLIN, 0};
     int pr = poll(&pfd, 1, 100);
@@ -692,7 +693,7 @@ int os_run_capture_ex(const char *cwd, const char *const argv[],
     }
     /* Checked on every pass, so a chatty command still stops promptly. */
     if (!reaped && !killed &&
-        ((g_run_cancel && *g_run_cancel) || now > deadline)) {
+        ((g_run_cancel && *g_run_cancel) || (deadline > 0 && now > deadline))) {
       killed = (g_run_cancel && *g_run_cancel) ? 2 : 1;
       killed_at = now;
       kill(-pid, SIGTERM);

src/os_win.c

@@ -601,7 +601,10 @@ int os_run_capture_token(const char *cwd, const char *const argv[],
   buf[0] = 0;
   int truncated = 0, killed = 0, reaped = 0, bg_killed = 0;
   double reaped_at = 0, killed_at = 0;
-  double deadline = os_now_ms() + os_run_timeout_effective() * 1000.0;
+  /* no timeout unless one was asked for: a deadline far in the future keeps
+   * every `now > deadline` check working without a second code path */
+  int timeout_s = os_run_timeout_effective();
+  double deadline = timeout_s > 0 ? os_now_ms() + timeout_s * 1000.0 : 1e18;
   int idle = 0; /* empty polls in a row: wait longer once output stalls */
   for (;;) {
     DWORD avail = 0;

src/tui.c

@@ -5364,6 +5364,66 @@ static void cmd_quit(tui_t *t, char *arg, int *quit) {
   *quit = 1;
 }
 
+/* /web: the WebUI is a second front end for the same engine and is designed to
+ * run as its own process, so this starts one on the same workspace and leaves
+ * the TUI holding the terminal. The child gets a fresh session: two writers on
+ * one session file is the one thing that would corrupt it. */
+#ifndef _WIN32
+#include <sys/wait.h> /* waitpid: collect the WebUI started by the last /web */
+#endif
+#ifndef CST_WEBUI_DEFAULT_PORT
+#define CST_WEBUI_DEFAULT_PORT 8787 /* keep in sync with include/cst_webui.h */
+#endif
+static void cmd_web(tui_t *t, char *arg, int *quit) {
+  (void)arg;
+  (void)quit;
+#ifdef _WIN32
+  push_system_line(t, "open another terminal and run: cst-agent --web");
+#else
+  static pid_t spawned = 0;
+  if (spawned > 0) {          /* collect the one we started last time */
+    waitpid(spawned, NULL, WNOHANG);
+    spawned = 0;
+  }
+  char dir[4096], exe[4096 + 16];
+  if (os_exe_dir(dir, sizeof(dir)) != 0) {
+    push_system_line(t, "cannot locate this binary: run cst-agent --web yourself");
+    return;
+  }
+  snprintf(exe, sizeof(exe), "%s/cst-agent", dir);
+  const cst_agent_config_t *cfg = cst_agent_config(t->agent);
+  const char *ws = (cfg && cfg->workspace_root[0]) ? cfg->workspace_root : ".";
+  char logf[4096];
+  snprintf(logf, sizeof(logf), "%s/.agent/webui.log", ws);
+  pid_t pid = fork();
+  if (pid < 0) {
+    push_system_line(t, "cannot start a second process");
+    return;
+  }
+  if (pid == 0) {
+    setsid();
+    int fd = open(logf, O_WRONLY | O_CREAT | O_TRUNC, 0600);
+    if (fd >= 0) {
+      dup2(fd, STDOUT_FILENO);
+      dup2(fd, STDERR_FILENO);
+      if (fd > 2)
+        close(fd);
+    }
+    execl(exe, "cst-agent", "--web", "--workspace", ws, "--new", (char *)NULL);
+    _exit(127);
+  }
+  spawned = pid;
+  char msg[4200];
+  snprintf(msg, sizeof(msg),
+           "WebUI started in the background: http://127.0.0.1:%d/ (new session)",
+           CST_WEBUI_DEFAULT_PORT);
+  push_system_line(t, msg);
+  snprintf(msg, sizeof(msg), "its log: %s (port busy? see the log, or pass "
+                             "--web-port)", logf);
+  push_system_line(t, msg);
+#endif
+}
+
 static const slash_cmd_t SLASH[] = {
     {"help", "?", "", "list commands and keys", 1, cmd_help},
     {"new", "clear", "", "start a new session", 0, cmd_new},
@@ -5422,6 +5482,8 @@ static const slash_cmd_t SLASH[] = {
      cmd_agents},
     {"skill", "", "<name> [task]", "run a task with a skill loaded", 0,
      cmd_skill},
+    {"web", "", "", "start the WebUI in the background (127.0.0.1:8787)", 1,
+     cmd_web},
     {"quit", "q exit", "", "quit", 1, cmd_quit},
 };
 

src/webui.c

@@ -181,6 +181,8 @@ static cJSON *wui_state_new(wui_t *w) {
     cJSON_AddNumberToObject(u, "requests", sess.requests);
     cJSON_AddNumberToObject(u, "prompt_tokens", (double)sess.prompt);
     cJSON_AddNumberToObject(u, "completion_tokens", (double)sess.out);
+    cJSON_AddNumberToObject(u, "cached_tokens", (double)sess.cached);
+    cJSON_AddNumberToObject(u, "cache_miss_tokens", (double)sess.miss);
     cJSON_AddNumberToObject(u, "cost", sess.cost);
     cJSON_AddBoolToObject(u, "priced", sess.priced != 0);
     cJSON_AddStringToObject(u, "currency", sess.currency);
@@ -916,6 +918,38 @@ static int h_session_new(cst_http_conn_t *c, void *ud) {
   return rc;
 }
 
+/* POST /api/workspace {"path":"/abs/dir"} - re-root the agent. The session
+ * store is per directory, so this always lands in a fresh session there. */
+static int h_workspace(cst_http_conn_t *c, void *ud) {
+  wui_t *w = ud;
+  const cst_http_req_t *req = cst_http_request(c);
+  cJSON *j = req->body_len ? cJSON_Parse(req->body) : NULL;
+  const cJSON *p = j ? cJSON_GetObjectItem(j, "path") : NULL;
+  if (!cJSON_IsString(p) || !p->valuestring[0]) {
+    cJSON_Delete(j);
+    return cst_http_send_err(c, 400, "path is required");
+  }
+  char err[256] = "";
+  int rc = cst_agent_set_workspace(w->agent, p->valuestring, err, sizeof(err));
+  cJSON_Delete(j);
+  if (rc != 0)
+    return cst_http_send_err(c, 400, err[0] ? err : "cannot switch workspace");
+  char id[128] = "";
+  if (cst_agent_new_session(w->agent, id, sizeof(id)) != 0)
+    return cst_http_send_err(c, 500, "cannot start a session there");
+  wui_emit_str(w, "session", "id", id);
+  wui_emit_state(w);
+  cJSON *o = cJSON_CreateObject();
+  if (!o)
+    return cst_http_send_err(c, 500, "out of memory");
+  cJSON_AddStringToObject(o, "id", id);
+  char *json = cJSON_PrintUnformatted(o);
+  cJSON_Delete(o);
+  rc = cst_http_send_json(c, 200, json);
+  free(json);
+  return rc;
+}
+
 static int h_session_switch(cst_http_conn_t *c, void *ud) {
   wui_t *w = ud;
   const cst_http_req_t *req = cst_http_request(c);
@@ -1134,7 +1168,10 @@ static void open_browser(const char *url) {
   os_run_shell_c(".", cmd, 0, NULL);
 #else
   char cmd[600];
-  snprintf(cmd, sizeof(cmd), "xdg-open '%s' >/dev/null 2>&1 &", url);
+  /* Termux has no xdg-open; termux-open-url hands the URL to Android. */
+  const char *opener =
+      getenv("TERMUX_VERSION") ? "termux-open-url" : "xdg-open";
+  snprintf(cmd, sizeof(cmd), "%s '%s' >/dev/null 2>&1 &", opener, url);
   os_run_shell_c(".", cmd, 0, NULL);
 #endif
   (void)url;
@@ -1173,6 +1210,7 @@ int cst_webui_run(cst_agent_t *agent, const cst_webui_opts_t *opts) {
       {"GET", "/api/sessions", h_sessions, NULL, 0, 0},
       {"POST", "/api/sessions/new", h_session_new, NULL, 0, 0},
       {"POST", "/api/sessions/switch", h_session_switch, NULL, 0, 0},
+      {"POST", "/api/workspace", h_workspace, NULL, 0, 0},
       {"POST", "/api/turn", h_turn, NULL, 0, 0},
       {"POST", "/api/cancel", h_cancel, NULL, 0, 0},
       {"POST", "/api/permission", h_permission, NULL, 0, 0},

web/index.html

@@ -1,41 +1,230 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh-CN" data-theme="dark">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="color-scheme" content="dark light">
 <title>CST-Agent</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
-<header id="bar">
-  <span class="tag" id="planmode">Build</span>
-  <span class="tag" id="approval">auto</span>
-  <span class="ws" id="ws" title="workspace"></span>
-  <span class="model" id="model" title="model">-</span>
-  <span class="muted" id="ctx"></span>
-  <span class="grow"></span>
-  <button id="btn-sessions" title="sessions">会话</button>
-  <button id="btn-model" title="model">模型</button>
-  <button id="btn-undo" title="undo">撤销</button>
-  <button id="btn-compact" title="compact">压缩</button>
-  <button id="btn-clear" title="clear view">清屏</button>
-</header>
+<!-- one icon set, drawn as a sprite so every glyph shares the same 24px grid,
+     stroke weight and round caps: mixed emoji/unicode never looks like a family -->
+<svg id="atlas" aria-hidden="true" hidden>
+  <symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
+  <symbol id="i-panel-left" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="14" rx="3"/><path d="M9.5 5v14"/></symbol>
+  <symbol id="i-panel-right" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="14" rx="3"/><path d="M14.5 5v14"/></symbol>
+  <symbol id="i-chevron" viewBox="0 0 24 24"><path d="M6 9.5l6 5 6-5"/></symbol>
+  <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
+  <symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.6-5.9M20 4.5V9h-4.5"/></symbol>
+  <symbol id="i-settings" viewBox="0 0 24 24"><path d="M4 6.5h5M15 6.5h5M4 12h7M17 12h3M4 17.5h5M15 17.5h5"/><circle cx="11.5" cy="6.5" r="2"/><circle cx="15" cy="12" r="2"/><circle cx="11.5" cy="17.5" r="2"/></symbol>
+  <symbol id="i-moon" viewBox="0 0 24 24"><path d="M20 14.6A8.6 8.6 0 0 1 9.4 4 8.6 8.6 0 1 0 20 14.6z"/></symbol>
+  <symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6"/></symbol>
+  <symbol id="i-more" viewBox="0 0 24 24"><circle cx="5.5" cy="12" r="1.6" class="f"/><circle cx="12" cy="12" r="1.6" class="f"/><circle cx="18.5" cy="12" r="1.6" class="f"/></symbol>
+  <symbol id="i-send" viewBox="0 0 24 24"><path d="M12 19.5V5M5.8 11.2 12 5l6.2 6.2"/></symbol>
+  <symbol id="i-stop" viewBox="0 0 24 24"><rect x="7" y="7" width="10" height="10" rx="2.5" class="f"/></symbol>
+  <symbol id="i-image" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="14" rx="3"/><path d="M4 15.5 8.6 11l4 4 2.8-2.8L20.5 16"/><circle cx="9" cy="9.4" r="1.5"/></symbol>
+  <symbol id="i-clipboard" viewBox="0 0 24 24"><rect x="8.5" y="3.5" width="7" height="4" rx="1.6"/><path d="M15.5 5.5h3v15h-13v-15h3M9 12h6M9 15.5h4"/></symbol>
+  <symbol id="i-list" viewBox="0 0 24 24"><path d="M4 6.8h2M4 12h2M4 17.2h2M9 6.8h11M9 12h11M9 17.2h11"/></symbol>
+  <symbol id="i-copy" viewBox="0 0 24 24"><rect x="8.5" y="8.5" width="11" height="11" rx="2.6"/><path d="M15.5 8.5V7a2.5 2.5 0 0 0-2.5-2.5H6.5A2.5 2.5 0 0 0 4 7v6.5A2.5 2.5 0 0 0 6.5 16h1.5"/></symbol>
+  <symbol id="i-compress" viewBox="0 0 24 24"><path d="M8 3.5V9H3M16 20.5V15h5M3 9h4M16 15h5"/></symbol>
+  <symbol id="i-undo" viewBox="0 0 24 24"><path d="M9.5 5.5 4 11l5.5 5.5"/><path d="M4 11h10.2a5.2 5.2 0 0 1 0 10.4H8.5"/></symbol>
+  <symbol id="i-close" viewBox="0 0 24 24"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></symbol>
+  <symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.6l4.6 4.6L19 7.6"/></symbol>
+  <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3.5 5 6.2v5.4c0 4.2 2.9 7.5 7 8.9 4.1-1.4 7-4.7 7-8.9V6.2z"/></symbol>
+  <symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13.4 3 5.5 13.6H11l-.9 7.4L18.5 10H13z"/></symbol>
+  <symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 4 2.8 20h18.4z"/><path d="M12 10v4.4M12 17.2v.2"/></symbol>
+  <symbol id="i-cpu" viewBox="0 0 24 24"><rect x="7" y="7" width="10" height="10" rx="2.6"/><path d="M10 3v4M14 3v4M10 17v4M14 17v4M3 10h4M3 14h4M17 10h4M17 14h4"/></symbol>
+  <symbol id="i-lv1" viewBox="0 0 24 24"><path d="M5 18.5V13h3.4v5.5z" class="f"/></symbol>
+  <symbol id="i-lv2" viewBox="0 0 24 24"><path d="M5 18.5V13h3.4v5.5zM10.3 18.5V9.6h3.4v8.9z" class="f"/></symbol>
+  <symbol id="i-lv3" viewBox="0 0 24 24"><path d="M5 18.5V13h3.4v5.5zM10.3 18.5V9.6h3.4v8.9zM15.6 18.5V6.4h3.4v12.1z" class="f"/></symbol>
+  <symbol id="i-lv4" viewBox="0 0 24 24"><path d="M4 18.5V13h2.6v5.5zM8.7 18.5V10h2.6v8.5zM13.4 18.5V6.8h2.6v11.7zM18.1 18.5V4h2.6v14.5z" class="f"/></symbol>
+  <symbol id="i-file" viewBox="0 0 24 24"><path d="M13.5 3.5H7A2.5 2.5 0 0 0 4.5 6v12A2.5 2.5 0 0 0 7 20.5h10A2.5 2.5 0 0 0 19.5 18V9.5z"/><path d="M13.5 3.5v6h6"/></symbol>
+  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.2V12l3.2 2"/></symbol>
+  <symbol id="i-folder" viewBox="0 0 24 24"><path d="M3.5 6.5A1.5 1.5 0 0 1 5 5h4l2 2.5h8A1.5 1.5 0 0 1 20.5 9v9A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/></symbol>
+</svg>
 
-<main id="log"></main>
-<aside id="todo" hidden></aside>
+<div id="app">
 
-<footer id="composer">
-  <div id="pending" hidden></div>
-  <div class="row">
-    <textarea id="input" rows="1" placeholder="输入消息，Enter 发送，Shift+Enter 换行"></textarea>
-    <button id="btn-send">发送</button>
-    <button id="btn-stop" hidden>停止</button>
-    <label class="att" title="附上图片"><input type="file" id="file" accept="image/*" hidden>+图</label>
-  </div>
-  <div class="hint"><span id="status">就绪</span><span class="grow"></span><span id="usage" class="muted"></span></div>
-</footer>
+  <!-- rail: identity, one primary action, sessions, identity again.
+       Everything else is a popover anchored where it belongs. -->
+  <aside id="side">
+   <div class="side-inner">
+    <div class="side-head">
+      <div class="brand">
+        <span class="brand-name">CST-Agent</span>
+      </div>
+      <button id="btn-collapse" class="icon" title="收起侧栏 (Ctrl+B)">
+        <svg class="i"><use href="#i-panel-left"/></svg>
+      </button>
+    </div>
 
+    <button id="btn-new" class="new-task">
+      <svg class="i"><use href="#i-plus"/></svg><span>新建任务</span>
+    </button>
+
+    <div class="side-sec">
+      <span>最近</span>
+      <button id="btn-refresh-sessions" class="icon tiny" title="刷新">
+        <svg class="i"><use href="#i-refresh"/></svg>
+      </button>
+    </div>
+    <div id="sessions-list" class="sessions"></div>
+
+    <div class="side-foot">
+      <div class="who">
+        <span class="avatar">C</span>
+        <span class="who-text">
+          <b id="foot-ws">workspace</b>
+          <i id="foot-session">-</i>
+        </span>
+      </div>
+      <button id="btn-settings" class="icon" title="设置">
+        <svg class="i"><use href="#i-settings"/></svg>
+      </button>
+    </div>
+   </div>
+  </aside>
+
+  <!-- main column -->
+  <main id="main">
+    <header id="topbar">
+      <button id="btn-side" class="icon" title="展开侧栏 (Ctrl+B)">
+        <svg class="i"><use href="#i-panel-left"/></svg>
+      </button>
+      <button id="btn-drawer" class="icon only-narrow" title="侧栏">
+        <svg class="i"><use href="#i-menu"/></svg>
+      </button>
+      <button id="chip-model" class="chip model" title="模型与推理强度">
+        <svg class="i"><use href="#i-cpu"/></svg><span class="lbl">-</span>
+        <svg class="i chev"><use href="#i-chevron"/></svg>
+      </button>
+      <span class="grow"></span>
+      <div class="seg" id="seg-mode" title="计划模式只读，不改文件">
+        <button data-mode="build">构建</button>
+        <button data-mode="plan">计划</button>
+      </div>
+      <button id="chip-approval" class="chip quiet" title="审批权限">
+        <svg class="i"><use href="#i-shield"/></svg><span class="lbl">auto</span>
+        <svg class="i chev"><use href="#i-chevron"/></svg>
+      </button>
+      <button id="btn-theme" class="icon" title="明暗切换">
+        <svg class="i only-dark"><use href="#i-moon"/></svg>
+        <svg class="i only-light"><use href="#i-sun"/></svg>
+      </button>
+      <button id="btn-panel" class="icon" title="运行详情 (Ctrl+J)">
+        <svg class="i"><use href="#i-panel-right"/></svg>
+      </button>
+      <button id="btn-menu" class="icon" title="更多">
+        <svg class="i"><use href="#i-more"/></svg>
+      </button>
+    </header>
+
+    <div id="scroll">
+      <section id="empty">
+        <p class="ready">准备好开始构建了吗</p>
+      </section>
+      <div id="log"></div>
+    </div>
+
+    <button id="to-bottom" class="round" hidden title="回到最新">
+      <svg class="i"><use href="#i-chevron"/></svg>
+    </button>
+
+    <footer id="composer">
+      <div id="pending" class="pending" hidden></div>
+
+      <!-- permission gate: inline, the turn really is waiting on it -->
+      <div id="gate" class="gate" hidden>
+        <div class="gate-head">
+          <span class="gate-title" id="gate-title">需要确认</span>
+          <span class="grow"></span>
+          <span class="gate-timer" id="gate-timer"></span>
+        </div>
+        <pre id="gate-detail"></pre>
+        <div class="gate-keys" id="gate-keys"></div>
+        <div class="gate-row" id="gate-buttons"></div>
+      </div>
+
+      <div class="box">
+        <textarea id="input" rows="1" placeholder="给 CST-Agent 派个任务…"></textarea>
+        <div class="box-row">
+          <button id="btn-plus" class="icon att" title="添加图片或计划模式">
+            <svg class="i"><use href="#i-plus"/></svg>
+          </button>
+          <button id="btn-undo" class="chip quiet" title="撤销上一次文件写入">
+            <svg class="i"><use href="#i-undo"/></svg><span>撤销</span>
+          </button>
+          <span class="grow"></span>
+          <button id="cost" class="cost" title="用量详情"></button>
+          <button id="btn-stop" class="icon stop" hidden title="停止">
+            <svg class="i"><use href="#i-stop"/></svg>
+          </button>
+          <button id="btn-send" class="round send" title="发送 (Enter)">
+            <svg class="i"><use href="#i-send"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="hint-line">
+        <span id="status">就绪</span>
+        <span class="grow"></span>
+        <span id="usage" class="quiet"></span>
+      </div>
+      <input type="file" id="file" accept="image/*" multiple hidden>
+    </footer>
+  </main>
+
+  <!-- right panel: the run, not the chat -->
+  <aside id="panel">
+   <div class="panel-inner">
+    <div class="panel-head">
+      <span>运行详情</span>
+      <span class="grow"></span>
+      <button id="btn-panel-close" class="icon tiny" title="关闭">
+        <svg class="i"><use href="#i-close"/></svg>
+      </button>
+    </div>
+
+    <section class="card" id="card-todo">
+      <h4>任务清单</h4>
+      <div id="todo-body" class="muted">模型还没有给出任务清单。</div>
+    </section>
+
+    <section class="card" id="card-files">
+      <h4>文件改动 <span class="badge" id="files-count">0</span></h4>
+      <div id="files-body" class="muted">本轮还没有改动文件。</div>
+    </section>
+
+    <section class="card">
+      <h4>上下文</h4>
+      <div class="kv"><span>占用</span><b id="kv-ctx">0</b></div>
+      <div class="kv"><span>缓存命中</span><b id="kv-cache">-</b></div>
+    </section>
+   </div>
+  </aside>
+
+</div>
+
+<div id="backdrop"></div>
+<div id="pop" class="pop" hidden></div>
 <div id="modal" hidden><div id="modal-box"></div></div>
+<script>
+/* Layout is decided here, before app.js runs and before the first paint: the
+ * rail must not flash open and then fold, and a broken script further down can
+ * no longer take the layout down with it. */
+(() => {
+  const q = new URLSearchParams(location.search);
+  const pick = (key) => {
+    const v = q.get(key);
+    if (v === '0' || v === '1') return v === '0';
+    return localStorage.getItem('cst.' + key) === '0';
+  };
+  if (pick('side')) document.body.classList.add('no-side');
+  if (pick('panel')) document.body.classList.add('no-panel');
+  const t = q.get('theme') || localStorage.getItem('cst.theme');
+  if (t) document.documentElement.dataset.theme = t;
+})();
+</script>
 <script src="app.js"></script>
 </body>
 </html>

web/style.css

@@ -1,103 +1,647 @@
+/* CST-Agent WebUI - one stylesheet, no build step.
+ *
+ * Design rules
+ *   - one fact, one home: sessions in the rail, model/approval/plan in the
+ *     top bar, the run in the right panel, attachments in the composer;
+ *   - settings open as popovers anchored to the control that owns them,
+ *     with icon + label + one line of explanation + a check on the current
+ *     value (the pattern all three reference apps use);
+ *   - motion is short and eased: 120ms for feedback, 180ms for entrances,
+ *     nothing bounces, and prefers-reduced-motion turns it all off. */
+
+/* Tokens are named the way the reference desktop app names them: four text
+ * levels, three surfaces per zone (main / sidebar / composer), and borders
+ * mixed out of the foreground rather than hard-coded greys - which is what
+ * keeps the dark and the light sheet on the same visual rhythm. */
 :root {
-  --bg: #14161a;
-  --bg2: #1b1e24;
-  --fg: #d8dde5;
-  --muted: #8b93a1;
-  --line: #2a2f38;
-  --accent: #7fb2ff;
-  --ok: #7ddc8f;
-  --warn: #ffcc66;
-  --err: #ff7b72;
-  --tool: #b5e3c8;
+  color-scheme: dark;
+
+  --text-primary: #f2f2f5;
+  --text-secondary: #a9a9b4;
+  --text-tertiary: #7d7d89;
+  --text-quaternary: #5e5e69;
+  --text-error: #f0616d;
+  --text-success: #3ecf95;
+
+  --main-surface-primary: #0d0d0f;
+  --main-surface-secondary: #141417;
+  --main-surface-tertiary: #1d1d22;
+
+  --sidebar-surface-primary: #111114;
+  --sidebar-surface-secondary: #18181c;
+  --sidebar-surface-tertiary: #202026;
+
+  --composer-surface-primary: #16161a;
+  --composer-surface-secondary: #202026;
+
+  --bg-code: #08080a;
+
+  /* every hover/active tint is alpha, so it lands correctly on any surface */
+  --hover: color-mix(in srgb, var(--text-primary) 7%, transparent);
+  --hover-strong: color-mix(in srgb, var(--text-primary) 13%, transparent);
+
+  --accent-primary: #3ecf95;
+  --accent-fg: #04241a;
+  --accent-weak: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+  --accent-line: color-mix(in srgb, var(--accent-primary) 55%, transparent);
+  --link: var(--accent-primary);
+  --violet: #8b7bff;
+  --warn: #e0b341;
+  --selection-bg: color-mix(in srgb, var(--accent-primary) 30%, transparent);
+  --selection-fg: var(--text-primary);
+
+  --border-light: color-mix(in srgb, var(--text-primary) 14%, transparent);
+  --border-medium: color-mix(in srgb, var(--text-primary) 24%, transparent);
+  --border-heavy: color-mix(in srgb, var(--text-primary) 34%, transparent);
+
+  /* short aliases: the rest of the sheet keeps reading the same way */
+  --bg: var(--main-surface-primary);
+  --bg-soft: var(--main-surface-secondary);
+  --bg-lift: var(--main-surface-tertiary);
+  --bg-hover: var(--hover);
+  --fg: var(--text-primary);
+  --fg-dim: var(--text-secondary);
+  --fg-faint: var(--text-tertiary);
+  --fg-quat: var(--text-quaternary);
+  --line: var(--border-light);
+  --line-strong: var(--border-medium);
+  --accent: var(--accent-primary);
+  --danger: var(--text-error);
+
+  --rail: 252px;
+  --panel: 296px;
+  --radius: 12px;
+  --radius-lg: 22px;
+  --shadow: 0 16px 40px rgba(0, 0, 0, .45);
+  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .3);
+  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans CJK SC", sans-serif;
+  --ease: cubic-bezier(.22, .61, .36, 1);
+  --ease-pop: cubic-bezier(.2, .9, .3, 1.06);   /* enters with a hint of overshoot */
+  --t-fast: 120ms;
+  --t: 180ms;
 }
+[data-theme="light"] {
+  color-scheme: light;
+
+  --text-primary: #14141a;
+  --text-secondary: #55555f;
+  --text-tertiary: #7c7c86;
+  --text-quaternary: #9c9ca6;
+  --text-error: #c8303f;
+  --text-success: #0f8f66;
+
+  --main-surface-primary: #ffffff;
+  --main-surface-secondary: #f7f7f9;
+  --main-surface-tertiary: #ffffff;
+
+  --sidebar-surface-primary: #fafafb;
+  --sidebar-surface-secondary: #f1f1f4;
+  --sidebar-surface-tertiary: #ffffff;
+
+  --composer-surface-primary: #ffffff;
+  --composer-surface-secondary: #f4f4f6;
+
+  --bg-code: #f5f5f7;
+
+  --accent-primary: #0f9d70;
+  --accent-fg: #ffffff;
+
+  --border-light: color-mix(in srgb, var(--text-primary) 12%, transparent);
+  --border-medium: color-mix(in srgb, var(--text-primary) 20%, transparent);
+  --border-heavy: color-mix(in srgb, var(--text-primary) 30%, transparent);
+
+  --warn: #a9761a;
+  --shadow: 0 16px 40px rgba(20, 20, 35, .14);
+  --shadow-sm: 0 6px 18px rgba(20, 20, 35, .1);
+}
+
 * { box-sizing: border-box; }
-html, body { margin: 0; height: 100%; }
+html, body { height: 100%; margin: 0; }
 body {
   background: var(--bg); color: var(--fg);
-  font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
-  display: flex; flex-direction: column; height: 100%;
+  font: 15px/1.62 var(--sans);
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  overflow: hidden; /* columns scroll, never the page */
 }
-button {
-  background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
-  border-radius: 6px; padding: 3px 9px; font: inherit; cursor: pointer;
-}
-button:hover { border-color: var(--accent); }
-.grow { flex: 1; }
-.muted { color: var(--muted); }
+button, textarea, input { font: inherit; color: inherit; }
+button { cursor: pointer; background: none; border: 0; }
+button:disabled { cursor: default; }
+.grow { flex: 1 1 auto; }
+.quiet, .muted { color: var(--fg-dim); }
+.tiny { font-size: 12px; }
+[hidden] { display: none !important; }
+::selection { background: var(--selection-bg); color: var(--selection-fg); }
 
-#bar {
-  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
-  border-bottom: 1px solid var(--line); background: var(--bg2);
-  position: sticky; top: 0; z-index: 3; flex-wrap: wrap;
+/* one icon system: everything is drawn on the same 24px grid, stroked with
+ * the current text colour, so header, rail, popovers and composer match */
+svg.i {
+  width: 18px; height: 18px; flex: 0 0 auto; display: block;
+  fill: none; stroke: currentColor; stroke-width: 1.7;
+  stroke-linecap: round; stroke-linejoin: round;
 }
-.tag { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; color: var(--muted); }
-.tag.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
-.ws { color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 40vw; white-space: nowrap; }
-.model { color: var(--accent); }
+svg.i .f { fill: currentColor; stroke: none; }
+.icon svg.i { width: 18px; height: 18px; }
+.icon.tiny svg.i { width: 15px; height: 15px; }
+.chip svg.i { width: 15px; height: 15px; }
+.chip .chev { width: 13px; height: 13px; opacity: .6; }
+.new-task svg.i { width: 17px; height: 17px; }
+.send svg.i { width: 19px; height: 19px; stroke-width: 2; }
+svg.i.only-light { display: none; }
+[data-theme="light"] svg.i.only-dark { display: none; }
+[data-theme="light"] svg.i.only-light { display: block; }
 
-#log { flex: 1; overflow: auto; padding: 12px 14px 20px; }
-#log .msg { margin: 0 0 14px; }
-#log .who { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
-#log .body { white-space: pre-wrap; word-break: break-word; }
-#log .assistant .body > :first-child { margin-top: 0; }
-#log .body pre {
-  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px;
-  padding: 8px 10px; overflow: auto;
+/* the changed-file rows in the run panel: path, then +added / -removed */
+.fstat { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; animation: fade-in var(--t) var(--ease) both; }
+.fstat .fimg { width: 15px; height: 15px; color: var(--text-quaternary); }
+.fstat .p {
+  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap; font-family: var(--mono); font-size: 12px;
 }
-#log .body code { background: var(--bg2); border-radius: 4px; padding: 0 3px; }
-#log .body pre code { background: none; padding: 0; }
-#log .body table { border-collapse: collapse; }
-#log .body th, #log .body td { border: 1px solid var(--line); padding: 2px 6px; }
-#log .body blockquote { border-left: 3px solid var(--line); margin: 0; padding-left: 10px; color: var(--muted); }
-#log .body a { color: var(--accent); }
-#log .body img { max-width: min(420px, 100%); border-radius: 6px; border: 1px solid var(--line); }
+.fstat .a, .fstat .d { font-variant-numeric: tabular-nums; font-size: 12px; }
+.fstat .a { color: var(--text-success); }
+.fstat .d { color: var(--text-error); }
 
-details.think { color: var(--muted); margin: 4px 0; }
-details.think summary { cursor: pointer; }
-details.tool {
-  border: 1px solid var(--line); border-radius: 6px; margin: 6px 0; background: var(--bg2);
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb {
+  background: var(--line-strong); border-radius: 99px;
+  border: 3px solid transparent; background-clip: content-box;
 }
-details.tool > summary { cursor: pointer; padding: 4px 8px; color: var(--tool); }
-details.tool .args, details.tool pre { margin: 0; padding: 6px 10px; white-space: pre-wrap; }
-details.tool pre { border-top: 1px solid var(--line); max-height: 40vh; overflow: auto; }
-.tool .exit-bad { color: var(--err); }
-.spin::after { content: " …"; color: var(--warn); }
+::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); background-clip: content-box; }
 
-#todo {
-  border-top: 1px solid var(--line); background: var(--bg2); padding: 6px 12px;
-  max-height: 22vh; overflow: auto; white-space: pre-wrap; font-size: 13px;
+/* --- frame ---------------------------------------------------------------- */
+#app {
+  display: grid;
+  grid-template-columns: var(--rail) minmax(0, 1fr) var(--panel);
+  grid-template-rows: minmax(0, 1fr);
+  height: 100dvh;
+  /* the rail keeps its track and collapses to 0px, so the two states have the
+   * same track count and the column width can actually be interpolated */
+  transition: grid-template-columns 300ms var(--ease);
 }
-#todo h4 { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: normal; }
+/* a zeroed track plus display:none used to slide #main into column one and
+ * crush it to nothing; the rail now stays in flow and is clipped instead */
+body.no-side #app { grid-template-columns: 0px minmax(0, 1fr) var(--panel); }
+body.no-panel #app { grid-template-columns: var(--rail) minmax(0, 1fr) 0px; }
+body.no-side.no-panel #app { grid-template-columns: 0px minmax(0, 1fr) 0px; }
+/* the expand control only exists while the rail is folded away, so exactly one
+ * toggle is ever on screen */
+#btn-side { display: none; }
+body.no-side #btn-side { display: inline-flex; }
 
-#composer { border-top: 1px solid var(--line); background: var(--bg2); padding: 8px 10px; }
-#composer .row { display: flex; gap: 8px; align-items: flex-end; }
-#input {
-  flex: 1; resize: vertical; min-height: 34px; max-height: 40vh;
-  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
-  border-radius: 6px; padding: 7px 9px; font: inherit;
+.icon {
+  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--fg-dim); font-size: 15px;
+  transition: background var(--t-fast), color var(--t-fast), transform 90ms var(--ease);
 }
-.att {
-  border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; cursor: pointer;
+.icon:hover { background: var(--bg-hover); color: var(--fg); }
+.icon:active { transform: scale(.94); }
+.icon.tiny { width: 26px; height: 26px; font-size: 13px; }
+.round { border-radius: 50%; }
+.chip {
+  display: inline-flex; align-items: center; gap: 5px; height: 30px;
+  padding: 0 11px; border-radius: 99px; border: 1px solid transparent;
+  background: none; color: var(--fg-dim); font-size: 13px;
+  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform 90ms var(--ease);
+}
+.chip:hover { background: var(--bg-hover); color: var(--fg); }
+.chip:active { transform: scale(.97); }
+.chip.model { color: var(--fg); font-weight: 600; background: var(--bg-lift); border-color: var(--line); }
+.chip.model:hover { border-color: var(--line-strong); }
+.chip.warn { color: var(--warn); }
+.chip .chev { font-size: 11px; opacity: .65; }
+.badge {
+  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
+  background: var(--accent-weak); color: var(--accent);
+  font-size: 11px; font-weight: 700;
+  display: inline-flex; align-items: center; justify-content: center;
 }
-.hint { display: flex; gap: 10px; font-size: 12px; color: var(--muted); padding-top: 4px; }
-#pending { color: var(--warn); font-size: 12px; padding-bottom: 4px; }
 
+/* --- rail ----------------------------------------------------------------- */
+#side {
+  background: var(--sidebar-surface-primary); border-right: 1px solid var(--border-light);
+  min-width: 0; overflow: hidden;      /* clips the rail while its track collapses */
+}
+/* the contents keep their own width and slide out, so nothing reflows mid-flight
+ * and the exit reads as one movement instead of a squeeze */
+.side-inner {
+  width: var(--rail); height: 100%; min-width: 0;
+  display: flex; flex-direction: column; padding: 12px 10px 10px;
+  transition: transform 300ms var(--ease-pop), opacity 200ms var(--ease);
+}
+body.no-side .side-inner { transform: translateX(-18px); opacity: 0; }
+body.no-side #side { pointer-events: none; }
+.side-head { display: flex; align-items: center; gap: 2px; margin-bottom: 14px; }
+/* the wordmark is a label, not a control: no logo tile, nothing to click */
+.brand { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; padding: 6px 8px; }
+.brand-name {
+  font-weight: 700; letter-spacing: .2px; font-size: 15px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.new-task {
+  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px;
+  margin-bottom: 18px; border-radius: 12px; font-weight: 600;
+  background: var(--bg-lift); border: 1px solid var(--line);
+  transition: border-color var(--t-fast), background var(--t-fast), transform 90ms var(--ease);
+}
+.new-task:hover { border-color: var(--line-strong); background: var(--bg-hover); }
+.new-task:active { transform: scale(.985); }
+.new-task .plus { color: var(--accent); font-size: 16px; line-height: 1; }
+
+.side-sec {
+  display: flex; align-items: center; gap: 6px; padding: 0 8px 6px;
+  color: var(--fg-faint); font-size: 11px; font-weight: 600;
+  letter-spacing: .7px; text-transform: uppercase;
+}
+.sessions { flex: 1 1 auto; overflow-y: auto; min-height: 40px; scrollbar-gutter: stable; }
+.sess-item {
+  display: flex; align-items: baseline; gap: 8px; width: 100%;
+  padding: 7px 9px; border-radius: 9px; text-align: left;
+  color: var(--text-secondary); font-size: 13.5px;
+  animation: fade-in var(--t) var(--ease) both;
+  transition: background var(--t-fast), color var(--t-fast);
+}
+.sess-item:hover { background: var(--hover); color: var(--text-primary); }
+.sess-item.on { background: var(--sidebar-surface-tertiary); color: var(--text-primary); font-weight: 600; }
+.sess-item.on::before {
+  content: ""; width: 5px; height: 5px; border-radius: 50%;
+  background: var(--accent); flex: 0 0 auto; align-self: center;
+}
+.sess-item .t { flex: 1 1 auto; min-width: 0; overflow: hidden; }
+.sess-item .ts { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* a title that does not fit fades at the edge and scrolls itself on hover, the
+ * way the reference sidebar handles long names (its data-marquee-text pattern) */
+.sess-item .t.mq { mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
+.sess-item:hover .t.mq { mask-image: none; }
+.sess-item:hover .t.mq .ts {
+  width: max-content; text-overflow: clip;
+  animation: marquee 2.6s var(--ease) 160ms infinite alternate;
+}
+@keyframes marquee { from { transform: none; } to { transform: translateX(calc(-1 * var(--mq, 0px))); } }
+.sess-item .n { font-size: 11px; color: var(--text-quaternary); font-weight: 400; white-space: nowrap; }
+.side-foot {
+  display: flex; align-items: center; gap: 6px; padding-top: 10px;
+  margin-top: 6px; border-top: 1px solid var(--line);
+}
+.who { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }
+.avatar {
+  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
+  background: linear-gradient(135deg, var(--violet), var(--accent));
+  color: #fff; font-weight: 800; font-size: 13px;
+  display: flex; align-items: center; justify-content: center;
+}
+.who-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
+.who-text b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.who-text i { font-size: 11px; color: var(--fg-faint); font-style: normal; }
+
+/* --- top bar -------------------------------------------------------------- */
+#main { display: flex; flex-direction: column; min-width: 0; position: relative; }
+#topbar { display: flex; align-items: center; gap: 4px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
+.seg {
+  display: flex; background: var(--bg-soft); border: 1px solid var(--line);
+  border-radius: 99px; padding: 2px; position: relative;
+}
+.seg button {
+  height: 25px; padding: 0 12px; border-radius: 99px; color: var(--fg-dim); font-size: 12.5px;
+  transition: color var(--t-fast), background var(--t);
+}
+.seg button.on { background: var(--bg-lift); color: var(--fg); font-weight: 600; }
+.only-narrow { display: none; }
+
+#scroll {
+  flex: 1 1 auto; overflow-y: auto; padding: 22px 0 10px;
+  scroll-behavior: smooth; scrollbar-gutter: stable;
+}
+#log { max-width: 760px; margin: 0 auto; padding: 0 20px; }
+#log:empty { display: none; }
+
+/* --- empty state ---------------------------------------------------------- */
+/* the first screen is one line: no logo, no suggestion wall. It goes away the
+ * moment the first message lands (see showEmpty). */
+#empty { margin: 22vh auto 0; padding: 0 20px; text-align: center; }
+#empty.gone { display: none; }
+#empty .ready {
+  margin: 0; color: var(--text-tertiary); font-size: 15px; letter-spacing: .3px;
+  animation: fade-in 320ms var(--ease) both;
+}
+
+/* --- transcript ----------------------------------------------------------- */
+.msg { display: flex; gap: 12px; padding: 13px 0 0; animation: fade-up var(--t) var(--ease) both; }
+.msg .gutter { flex: 0 0 24px; padding-top: 2px; color: var(--fg-faint); font-size: 11px; text-align: center; user-select: none; }
+.msg .body { min-width: 0; flex: 1 1 auto; }
+.msg.user { justify-content: flex-end; }
+.msg.user .gutter { display: none; }
+.msg.user .body {
+  background: var(--bg-lift); border-radius: 18px 18px 6px 18px;
+  padding: 9px 15px; max-width: 76%; white-space: pre-wrap; word-break: break-word;
+}
+.msg.error .body { color: var(--danger); }
+.body > :first-child { margin-top: 0; }
+.body > :last-child { margin-bottom: 0; }
+.body h1, .body h2, .body h3, .body h4 { line-height: 1.35; margin: 1.1em 0 .5em; }
+.body h1 { font-size: 1.45em; } .body h2 { font-size: 1.25em; } .body h3 { font-size: 1.1em; }
+.body p, .body ul, .body ol { margin: .55em 0; }
+.body ul, .body ol { padding-left: 1.4em; }
+.body li { margin: .22em 0; }
+.body a { color: var(--link); }
+.body code {
+  font-family: var(--mono); font-size: .88em; background: var(--bg-code);
+  border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em;
+}
+.body pre {
+  background: var(--bg-code); border: 1px solid var(--line);
+  border-radius: 12px; padding: 12px 14px; overflow-x: auto; margin: .75em 0;
+}
+.body pre code { background: none; border: 0; padding: 0; font-size: 13px; }
+.body blockquote { margin: .75em 0; padding: .1em 0 .1em 12px; border-left: 3px solid var(--line-strong); color: var(--fg-dim); }
+.body table { border-collapse: collapse; margin: .75em 0; font-size: 13.5px; display: block; overflow-x: auto; }
+.body th, .body td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
+.body th { background: var(--bg-soft); }
+.body img { max-width: 100%; border-radius: 10px; }
+.body hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
+/* a caret while tokens are still arriving */
+.body.live > :last-child::after {
+  content: ""; display: inline-block; width: 7px; height: 14px;
+  margin-left: 3px; vertical-align: -2px; border-radius: 2px;
+  background: var(--accent); animation: blink 1.1s steps(2, start) infinite;
+}
+
+.attach-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; justify-content: flex-end; }
+.attach-strip img {
+  width: 108px; height: 108px; object-fit: cover; border-radius: 12px;
+  border: 1px solid var(--line); animation: rise var(--t) var(--ease) both;
+}
+
+.turn-meta { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px 36px; }
+.turn-meta details > summary { cursor: pointer; list-style: none; color: var(--fg-faint); font-size: 12px; transition: color var(--t-fast); }
+.turn-meta details > summary::-webkit-details-marker { display: none; }
+.turn-meta details > summary:hover { color: var(--fg-dim); }
+.msg-actions { display: flex; gap: 2px; padding: 4px 0 0 36px; opacity: 0; transition: opacity var(--t) var(--ease); }
+.msg:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
+.msg-actions button {
+  height: 26px; padding: 0 9px; border-radius: 8px; color: var(--fg-faint); font-size: 12px;
+  transition: background var(--t-fast), color var(--t-fast);
+}
+.msg-actions button:hover { background: var(--bg-hover); color: var(--fg); }
+
+.think { margin: .1em 0 .5em; }
+.think summary { cursor: pointer; list-style: none; color: var(--fg-faint); font-size: 12.5px; transition: color var(--t-fast); }
+.think summary::-webkit-details-marker { display: none; }
+.think summary::before { content: "▸ "; }
+.think[open] summary::before { content: "▾ "; }
+.think summary:hover { color: var(--fg-dim); }
+.think > div {
+  color: var(--fg-dim); font-size: 13.5px; white-space: pre-wrap;
+  padding: 6px 0 2px 14px; border-left: 2px solid var(--line);
+  animation: fade-in var(--t) var(--ease) both;
+}
+
+/* tool calls: one line, opens on demand (like "已执行 python · <<PY>") */
+.turn-steps { padding: 6px 0 0 36px; }
+.turn-steps > summary { cursor: pointer; list-style: none; color: var(--fg-faint); font-size: 12.5px; transition: color var(--t-fast); }
+.turn-steps > summary::-webkit-details-marker { display: none; }
+.turn-steps > summary::before { content: "⌘ "; }
+.turn-steps > summary:hover { color: var(--fg-dim); }
+.steps-box { padding: 2px 0 0 12px; margin-top: 4px; border-left: 2px solid var(--line); }
+.step-line { animation: fade-up var(--t) var(--ease) both; }
+.step-line > summary {
+  display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none;
+  padding: 5px 0; font-size: 13px; color: var(--fg-dim);
+  transition: color var(--t-fast);
+}
+.step-line > summary::-webkit-details-marker { display: none; }
+.step-line > summary:hover { color: var(--fg); }
+.step-line .name { font-family: var(--mono); font-size: 12.5px; color: var(--fg); }
+.step-line .args { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
+.step-line .phase { font-size: 11.5px; color: var(--fg-faint); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
+.step-line.run .phase { color: var(--warn); }
+.step-line.run .phase::before {
+  content: ""; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--warn); animation: pulse 1.1s var(--ease) infinite;
+}
+.step-line.bad .phase, .step-line.bad .name { color: var(--danger); }
+.step-line.done .phase::before { content: "✓"; }
+.step-body { padding: 0 0 6px; animation: fade-in var(--t) var(--ease) both; }
+.step-out, .step-args-full {
+  font-family: var(--mono); font-size: 12px; background: var(--bg-code);
+  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
+  margin: 4px 0 0; max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-word;
+}
+
+#to-bottom {
+  position: absolute; right: 26px; bottom: 172px; z-index: 5;
+  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
+  background: var(--bg-lift); border: 1px solid var(--line-strong); color: var(--fg-dim);
+  box-shadow: var(--shadow-sm); font-size: 16px;
+  animation: fade-in var(--t) var(--ease) both;
+  transition: color var(--t-fast), transform 90ms var(--ease), background var(--t-fast);
+}
+#to-bottom:hover { color: var(--fg); background: var(--bg-hover); }
+#to-bottom:active { transform: scale(.94); }
+
+/* --- composer ------------------------------------------------------------- */
+#composer { padding: 8px 20px 12px; }
+#composer > * { max-width: 760px; margin: 0 auto; }
+.pending { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 8px; }
+.pending .chip { background: var(--bg-soft); border-color: var(--line); }
+
+.box {
+  border: 1px solid var(--border-medium); border-radius: var(--radius-lg);
+  background: var(--composer-surface-primary); padding: 11px 13px 9px;
+  transition: border-color var(--t), box-shadow var(--t), background var(--t);
+}
+.box:hover { border-color: var(--border-heavy); }
+.box:focus-within {
+  border-color: var(--accent-line);
+  box-shadow: 0 0 0 3px var(--accent-weak);
+}
+.box textarea {
+  width: 100%; border: 0; background: none; resize: none; outline: none;
+  max-height: 240px; min-height: 26px; padding: 2px 2px 8px;
+  caret-color: var(--accent);
+}
+.box textarea::placeholder { color: var(--fg-faint); }
+.box-row { display: flex; align-items: center; gap: 6px; }
+.att { border: 1px solid var(--line); font-size: 17px; line-height: 1; }
+.cost { color: var(--fg-faint); font-size: 12px; padding: 0 4px; white-space: nowrap; }
+.cost:hover { color: var(--fg-dim); }
+.send {
+  width: 36px; height: 36px; flex: 0 0 auto; font-size: 17px; font-weight: 800;
+  background: var(--accent); color: var(--accent-fg);
+  transition: filter var(--t-fast), transform 90ms var(--ease), opacity var(--t-fast);
+}
+.send:hover { filter: brightness(1.08); }
+.send:active { transform: scale(.94); }
+.send:disabled { opacity: .38; }
+.icon.stop { border: 1px solid var(--line); font-size: 12px; }
+.hint-line { display: flex; align-items: center; gap: 10px; padding: 7px 6px 0; font-size: 12px; color: var(--fg-faint); }
+
+/* permission gate: inline, the turn really is waiting on it */
+.gate {
+  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
+  border-radius: var(--radius); padding: 11px 13px; margin-bottom: 10px;
+  background: color-mix(in srgb, var(--warn) 7%, var(--bg-soft));
+  animation: rise var(--t) var(--ease) both;
+}
+.gate-head { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; }
+.gate-timer { color: var(--warn); font-size: 12.5px; font-variant-numeric: tabular-nums; }
+.gate pre {
+  margin: 8px 0 0; background: var(--bg-code); border: 1px solid var(--line);
+  border-radius: 10px; padding: 9px 11px; max-height: 180px; overflow: auto;
+  font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word;
+}
+.gate-keys { padding: 8px 0 2px; color: var(--fg-dim); font-size: 12.5px; }
+.gate-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
+.gate-row button {
+  height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 600;
+  border: 1px solid var(--line-strong); background: var(--bg-lift);
+  transition: filter var(--t-fast), transform 90ms var(--ease), background var(--t-fast);
+}
+.gate-row button.ok { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
+.gate-row button.danger { color: var(--danger); }
+.gate-row button:hover { filter: brightness(1.12); }
+.gate-row button:active { transform: scale(.97); }
+
+/* --- popovers: anchored, animated, and the only place settings live ------- */
+.pop {
+  position: fixed; z-index: 45; min-width: 236px; max-width: 320px;
+  background: var(--main-surface-tertiary); border: 1px solid var(--border-medium);
+  border-radius: 14px; padding: 6px; box-shadow: var(--shadow);
+  animation: pop-in 160ms var(--ease) both;
+}
+.pop-item {
+  display: flex; align-items: flex-start; gap: 10px; width: 100%;
+  padding: 9px 10px; border-radius: 10px; text-align: left;
+  transition: background var(--t-fast);
+}
+.pop-item:hover { background: var(--bg-hover); }
+.pop-item .pi { width: 18px; flex: 0 0 auto; text-align: center; color: var(--fg-dim); font-size: 14px; line-height: 1.4; }
+/* title over description: two lines, never one run-on line */
+.pop-item .pm { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
+.pop-item .pt { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
+.pop-item .pd { font-size: 11.5px; color: var(--fg-faint); line-height: 1.4; }
+.pop-item .pk { flex: 0 0 auto; color: var(--accent); font-size: 13px; }
+.pop-item.on { background: var(--accent-weak); }
+.pop-item.on .pi, .pop-item.on .pt { color: var(--accent); }
+.pop-item.danger .pi, .pop-item.danger .pt { color: var(--danger); }
+.pop-sep { height: 1px; background: var(--line); margin: 5px 4px; }
+.pop-title { padding: 8px 10px 4px; color: var(--fg-faint); font-size: 11.5px; font-weight: 600; letter-spacing: .4px; }
+.pop-input { display: flex; gap: 6px; padding: 4px 6px 6px; }
+.pop-input input {
+  flex: 1 1 auto; min-width: 0; background: var(--bg-soft); border: 1px solid var(--line);
+  border-radius: 9px; padding: 7px 9px; outline: none; font-size: 13px;
+  caret-color: var(--accent);
+  transition: border-color var(--t-fast);
+}
+.pop-input input:focus { border-color: var(--accent-line); }
+.pop-input button {
+  height: 32px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: 13px;
+  background: var(--accent); color: var(--accent-fg);
+  transition: filter var(--t-fast), transform 90ms var(--ease);
+}
+.pop-input button:active { transform: scale(.96); }
+.kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 10px; font-size: 13px; }
+.kv span { color: var(--fg-dim); }
+.kv b { font-variant-numeric: tabular-nums; font-weight: 600; }
+
+/* --- right panel ---------------------------------------------------------- */
+/* the right panel mirrors the rail: fixed-width contents, clipped by the track,
+ * so folding it in and out is one eased movement on each side */
+#panel { background: var(--main-surface-secondary); border-left: 1px solid var(--border-light); min-width: 0; overflow: hidden; }
+.panel-inner {
+  width: var(--panel); height: 100%; overflow-y: auto; padding: 12px;
+  transition: transform 300ms var(--ease-pop), opacity 200ms var(--ease);
+}
+body.no-panel .panel-inner { transform: translateX(18px); opacity: 0; }
+body.no-panel #panel { pointer-events: none; }
+.panel-head {
+  display: flex; align-items: center; gap: 6px; padding: 2px 4px 10px;
+  color: var(--fg-faint); font-size: 11px; font-weight: 600;
+  letter-spacing: .7px; text-transform: uppercase;
+}
+.card { border-top: 1px solid var(--line); padding: 12px 2px; }
+.card:first-of-type { border-top: 0; }
+.card h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 650; display: flex; align-items: center; gap: 6px; }
+.card .kv { padding: 3px 0; }
+.todo-list { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
+.todo-list li { display: flex; gap: 8px; padding: 3px 0; animation: fade-in var(--t) var(--ease) both; transition: color var(--t-fast); }
+.todo-list .boxmark { color: var(--fg-faint); }
+.todo-list li.done { color: var(--fg-faint); text-decoration: line-through; }
+.todo-list li.doing { color: var(--fg); font-weight: 600; }
+#steps-body .step-line > summary { font-size: 12.5px; }
+#steps-body .step-line .phase { font-size: 11px; }
+
+/* --- modal sheet (session list) ------------------------------------------- */
 #modal {
-  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
-  display: flex; align-items: center; justify-content: center; z-index: 9;
+  position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 40;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+  animation: fade-in var(--t) var(--ease) both;
 }
 #modal-box {
-  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
-  padding: 14px; width: min(820px, 94vw); max-height: 88vh; overflow: auto;
+  width: min(560px, 100%); max-height: 82vh; overflow-y: auto;
+  background: var(--main-surface-tertiary); border: 1px solid var(--border-medium);
+  border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow);
+  animation: pop-in 180ms var(--ease) both;
 }
-#modal-box h3 { margin: 0 0 8px; }
-#modal-box pre {
-  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
-  padding: 8px; max-height: 46vh; overflow: auto; white-space: pre-wrap;
+#modal-box h3 { margin: 0 0 12px; font-size: 17px; }
+#modal-box .field { display: flex; align-items: center; gap: 8px; margin: 9px 0; flex-wrap: wrap; }
+#modal-box .field > span { width: 70px; color: var(--fg-dim); font-size: 13px; }
+#modal-box .field input {
+  flex: 1 1 auto; min-width: 150px; background: var(--bg-lift);
+  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none;
+}
+#modal-box .buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
+#modal-box .buttons button {
+  height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 600;
+  border: 1px solid var(--line-strong); background: var(--bg-lift);
+  transition: filter var(--t-fast), transform 90ms var(--ease);
+}
+#modal-box .buttons button:active { transform: scale(.97); }
+#modal-box .buttons button.ok { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
+#modal-box .buttons button.danger { color: var(--danger); }
+#modal-box .sess {
+  display: flex; align-items: center; gap: 8px; padding: 8px 6px;
+  border-bottom: 1px solid var(--line); border-radius: 8px;
+  transition: background var(--t-fast);
+}
+#modal-box .sess:hover { background: var(--bg-hover); }
+#modal-box .sess .id { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); }
+#modal-box .sess .t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
+
+/* --- narrow screens: rail and panel become drawers ------------------------ */
+#backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 30; display: none; animation: fade-in var(--t) var(--ease) both; }
+body.drawer-open #backdrop { display: block; }
+@media (max-width: 900px) {
+  #app { grid-template-columns: minmax(0, 1fr) !important; transition: none; }
+  #side, #panel {
+    position: fixed; top: 0; bottom: 0; width: min(310px, 86vw); z-index: 31;
+    display: block; transition: transform 260ms var(--ease-pop);
+  }
+  .side-inner { width: auto; transform: none !important; opacity: 1 !important; }
+  #side { overflow: visible; pointer-events: auto; }
+  #side { left: 0; transform: translateX(-102%); }
+  #panel { right: 0; transform: translateX(102%); }
+  body.side-open #side, body.panel-open #panel { transform: none; }
+  .only-narrow { display: inline-flex; }
+  #to-bottom { bottom: 150px; right: 16px; }
+  .hero h1 { font-size: 21px; }
+  .msg.user .body { max-width: 88%; }
+  .turn-meta, .msg-actions, .turn-steps { padding-left: 0; }
+}
+@media (min-width: 901px) { #backdrop { display: none !important; } }
+
+/* --- motion --------------------------------------------------------------- */
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
+@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
+@keyframes pulse { 0%, 100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
+  #scroll { scroll-behavior: auto; }
 }
-#modal-box .buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
-#modal-box .danger { border-color: var(--err); color: var(--err); }
-#modal-box .ok { border-color: var(--ok); color: var(--ok); }
-.sess { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
-.sess .id { color: var(--muted); font-size: 12px; }
-.sess .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }