python-codex 0.2.0__py3-none-any.whl → 0.2.2__py3-none-any.whl

pycodex/interactive_session.py

@@ -18,6 +18,7 @@ import typing
 
 
 EXIT_COMMANDS = {"/exit", "/quit"}
+HELP_COMMAND = "/help"
 HISTORY_COMMAND = "/history"
 TITLE_COMMAND = "/title"
 MODEL_COMMAND = "/model"
@@ -27,7 +28,7 @@ COMPACT_COMMAND = "/compact"
 LINK_COMMAND = "/link"
 UNLINK_COMMAND = "/unlink"
 EXTRA_COMMANDS_LINE = (
-    "Extra commands: /history, /title, /model, /resume, /compact, /link, /unlink"
+    "Extra commands: /help, /history, /title, /model, /resume, /compact, /link, /unlink"
 )
 
 
@@ -232,6 +233,9 @@ async def run_interactive_session(
                 continue
             if prompt_text in EXIT_COMMANDS:
                 break
+            if prompt_text == HELP_COMMAND:
+                view.write_line(EXTRA_COMMANDS_LINE)
+                continue
             if prompt_text == HISTORY_COMMAND:
                 view.show_history()
                 continue

{python_codex-0.2.0.dist-info → python_codex-0.2.2.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: python-codex
-Version: 0.2.0
+Version: 0.2.2
 Summary: A minimal Python extraction of Codex's main agent loop
 License-File: LICENSE
 Requires-Python: >=3.6.2

{python_codex-0.2.0.dist-info → python_codex-0.2.2.dist-info}/RECORD

@@ -7,7 +7,7 @@ pycodex/context.py,sha256=Hwh3vU-qSvaleUDdOWuWiGyNmbULVAZmboxiu9iiHt8,26549
 pycodex/doctor.py,sha256=De3M4hRBJq8ZeqsUJgHz0vitqrH18YugrEnz7oHhTdQ,10572
 pycodex/feishu_card.py,sha256=De6pM--3MfhgGo-WcWfhm-fop5UtzjwKrZ4gI2Lls3w,26198
 pycodex/feishu_link.py,sha256=XGV93CIorcc03pNgBnXay9SkivnDL4i2GkLR5NjBjq0,15588
-pycodex/interactive_session.py,sha256=VmQ4xLk5b9QrI4LvgrdyhXTvIk0K65loKxh2XbfV2FA,15617
+pycodex/interactive_session.py,sha256=pcIC_GvQuqQSsjzcTTFB_crrS-XVufAGplJZxnHgy7I,15769
 pycodex/model.py,sha256=O5Gf35qCMAGrqvr_5d1ZQNk3vHmNRD5Uv-8k7-zbpXg,36679
 pycodex/portable.py,sha256=gxl2E2h5uZJbasMEPPs-nyALFPIvX79T2ZYsu6vXZrg,15656
 pycodex/portable_server.py,sha256=6I3pQkWj3e_SFlDXY2mGdCPns1w_3PSxByBV9wv5epI,7331
@@ -79,10 +79,10 @@ responses_server/tools/custom_adapter.py,sha256=LxO7ldydvR-GWachDz8GKC0Q8KGGFoFP
 responses_server/tools/web_search.py,sha256=pm4ZUiHUfxc0bGY1kEvt-BCzDrZIyP24xzPUcga2ul0,8908
 workspace_server/__init__.py,sha256=XbSU6aAeYBMsBTVi9Ug6ZW9sxcwefqPS7T_7wpt_VMo,462
 workspace_server/__main__.py,sha256=9SRp-Yw7ShGxc6DhSIXcDLKgGEdAVm3oBZ59rBOPjT0,62
-workspace_server/app.py,sha256=aDfUqIwyMsndavSTP47rfcBKIwgo37F8U_lkCgUfUc0,49260
-workspace_server/workspace.html,sha256=7d1eTxQ_4Hl-8YbMFHMTmRPpMRXE-a0KSJn1224JpXw,25563
-python_codex-0.2.0.dist-info/METADATA,sha256=oCzNpTEbt1eODGxsJeHJE-gjTf53He7UDvcs-bovqAc,16812
-python_codex-0.2.0.dist-info/WHEEL,sha256=KGYbc1zXlYddvwxnNty23BeaKzh7YuoSIvIMO4jEhvw,87
-python_codex-0.2.0.dist-info/entry_points.txt,sha256=vkV2UWCtEKvQNMJuPNjt8HyBKiwp83JyqBatrBNGDp8,80
-python_codex-0.2.0.dist-info/licenses/LICENSE,sha256=0X8ifk312hYAORM4hlzg8wVSEXYKNmiPgWlB1YIy2Nw,10926
-python_codex-0.2.0.dist-info/RECORD,,
+workspace_server/app.py,sha256=yORhk3BcZZiO1x-QTh0wFi4BXvrS5fbYMgVfEgGBgq8,51270
+workspace_server/workspace.html,sha256=5cHWRXGFknkDDqrOtmiBeOI1HRQHbRmkrNFm8wZ4_JU,39202
+python_codex-0.2.2.dist-info/METADATA,sha256=GbrTS_Leh6VMxhYAImSrdaFzDblJbwW4Xj5FdCRfdfI,16812
+python_codex-0.2.2.dist-info/WHEEL,sha256=KGYbc1zXlYddvwxnNty23BeaKzh7YuoSIvIMO4jEhvw,87
+python_codex-0.2.2.dist-info/entry_points.txt,sha256=vkV2UWCtEKvQNMJuPNjt8HyBKiwp83JyqBatrBNGDp8,80
+python_codex-0.2.2.dist-info/licenses/LICENSE,sha256=0X8ifk312hYAORM4hlzg8wVSEXYKNmiPgWlB1YIy2Nw,10926
+python_codex-0.2.2.dist-info/RECORD,,

workspace_server/app.py

@@ -25,7 +25,12 @@ from pycodex.utils.session_persist import (
     load_resumed_session_path,
 )
 from pycodex.utils import uuid7_string
-from pycodex.utils.visualize import IDLE_LISTENING_STATUS, shorten_title, tool_summary
+from pycodex.utils.visualize import (
+    IDLE_LISTENING_STATUS,
+    percent_of_context_window_remaining,
+    shorten_title,
+    tool_summary,
+)
 import typing
 
 
@@ -180,6 +185,8 @@ class WebSessionView:
         self._title = ""
         self._spinner_status = ""
         self._stream_buffer = ""
+        self._context_window_tokens: "typing.Union[int, None]" = None
+        self._context_remaining_percent: "typing.Union[int, None]" = None
         self._closed = False
         self._server_loop: "typing.Union[asyncio.AbstractEventLoop, None]" = None
         self._worker_loop: "typing.Union[asyncio.AbstractEventLoop, None]" = None
@@ -347,7 +354,11 @@ class WebSessionView:
         self,
         context_window_tokens: "typing.Union[int, None]",
     ) -> None:
-        del context_window_tokens
+        with self._lock:
+            self._context_window_tokens = context_window_tokens
+            self._context_remaining_percent = (
+                100 if context_window_tokens is not None else None
+            )
 
     def subscribe(self) -> "asyncio.Queue":
         queue: "asyncio.Queue" = asyncio.Queue()
@@ -386,6 +397,7 @@ class WebSessionView:
                 "spinner": self._spinner_status,
                 "model": "pycodex",
                 "title": self._title,
+                "context_remaining_percent": self._context_remaining_percent,
                 "turns": [_public_turn(turn) for turn in self._turns[-80:]],
             }
 
@@ -396,6 +408,8 @@ class WebSessionView:
                 "spinner": self._spinner_status,
                 "title": self._title,
                 "turn_count": len(self._turns),
+                "last_assistant": _last_assistant_text(self._turns),
+                "context_remaining_percent": self._context_remaining_percent,
             }
 
     def _apply_runtime_event(self, event: "AgentEvent") -> None:
@@ -403,6 +417,9 @@ class WebSessionView:
         payload = getattr(event, "payload", {})
         if not isinstance(payload, dict):
             payload = {}
+        if kind == "token_count":
+            self._update_context_window(payload.get("usage"))
+            return
         turn_id = str(payload.get("turn_id") or getattr(event, "turn_id", "") or "")
         submission_id = str(payload.get("submission_id") or turn_id or "")
         turn = self._turns_by_submission_id.get(submission_id)
@@ -475,6 +492,22 @@ class WebSessionView:
             turn["status"] = "interrupted"
             self._stream_buffer = ""
 
+    def _update_context_window(self, usage: "object") -> None:
+        if self._context_window_tokens is None:
+            return
+        if not isinstance(usage, dict):
+            self._context_remaining_percent = None
+            return
+        try:
+            total_tokens = int(usage["total_tokens"])
+        except (KeyError, TypeError, ValueError):
+            self._context_remaining_percent = None
+            return
+        self._context_remaining_percent = percent_of_context_window_remaining(
+            total_tokens,
+            self._context_window_tokens,
+        )
+
     def _apply_spinner_event(
         self,
         kind: str,
@@ -974,6 +1007,10 @@ class WorkspaceSessionManager:
                     "running": bool(summary.get("running")),
                     "spinner": summary.get("spinner") or "",
                     "turn_count": summary.get("turn_count") or 0,
+                    "last_assistant": summary.get("last_assistant") or "",
+                    "context_remaining_percent": summary.get(
+                        "context_remaining_percent"
+                    ),
                 }
             )
         return result
@@ -1178,9 +1215,21 @@ def _session_summary(session) -> "typing.Dict[str, object]":
         "running": bool(snapshot.get("running")),
         "spinner": snapshot.get("spinner") or "",
         "turn_count": len(snapshot.get("turns") or []),
+        "last_assistant": _last_assistant_text(snapshot.get("turns") or []),
+        "context_remaining_percent": snapshot.get("context_remaining_percent"),
     }
 
 
+def _last_assistant_text(turns: "typing.Iterable[typing.Dict[str, object]]") -> str:
+    for turn in reversed(list(turns)):
+        if str(turn.get("kind") or "assistant") == "control":
+            continue
+        response = str(turn.get("response") or "").strip()
+        if response:
+            return response
+    return ""
+
+
 def _public_turn(turn: "typing.Dict[str, object]") -> "typing.Dict[str, object]":
     return typing.cast(
         "typing.Dict[str, object]",

workspace_server/workspace.html

@@ -7,14 +7,31 @@
   <style>
     :root {
       color-scheme: light;
-      --bg: #f5f5f2;
+      --bg: #f2f6f3;
       --panel: #ffffff;
-      --ink: #1f2528;
-      --muted: #667178;
-      --line: #d8ddd8;
-      --accent: #126b43;
+      --ink: #1e2529;
+      --muted: #5f6f75;
+      --line: #d2ddd5;
+      --accent: #0f8f55;
       --accent-ink: #ffffff;
-      --code: #f6f8fa;
+      --warn-soft: #fff5cf;
+      --info: #1f6fa4;
+      --info-soft: #edf8ff;
+      --danger: #b23a3a;
+      --danger-soft: #fff1ef;
+      --violet: #6b4fb0;
+      --violet-soft: #f5f0ff;
+      --code: #f3f7f8;
+      --entry-shadow: 0 1px 2px rgba(25, 35, 31, 0.04);
+      --space-1: 2px;
+      --space-2: 4px;
+      --space-3: 6px;
+      --space-4: 8px;
+      --space-5: 10px;
+      --space-6: 12px;
+      --space-7: 14px;
+      --radius-sm: 4px;
+      --radius-md: 6px;
       --chat-width: min(42vw, 760px);
       --splitter-width: 8px;
     }
@@ -34,7 +51,7 @@
       min-width: 0;
     }
     .workspace.collapsed .splitter::after {
-      background: #7e9187;
+      background: #4f6f60;
     }
     .board-pane {
       min-width: 0;
@@ -46,7 +63,7 @@
     .boardbar {
       min-width: 0;
       border-bottom: 1px solid var(--line);
-      padding: 8px 12px;
+      padding: var(--space-4) var(--space-6);
       color: var(--muted);
       font-size: 12px;
       white-space: nowrap;
@@ -61,24 +78,36 @@
       background: #fff;
     }
     .splitter {
+      position: relative;
       width: 8px;
       height: 100dvh;
       border: 0;
-      border-left: 1px solid var(--line);
-      border-right: 1px solid var(--line);
-      background: #eef1ed;
+      border-left: 1px solid #c1cec6;
+      border-right: 1px solid #c1cec6;
+      background: #dfe8e2;
       cursor: col-resize;
       padding: 0;
       touch-action: none;
     }
     .splitter::after {
       content: "";
-      display: block;
-      width: 2px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 3px;
       height: 42px;
-      margin: calc(50dvh - 21px) auto 0;
       border-radius: 999px;
-      background: #b9c1ba;
+      background: #7d9588;
+      transform: translate(-50%, -50%);
+    }
+    .splitter:hover,
+    .workspace.resizing .splitter {
+      background: #d3dfd7;
+      border-color: #aebeb4;
+    }
+    .splitter:hover::after,
+    .workspace.resizing .splitter::after {
+      background: #527465;
     }
     .workspace.resizing,
     .workspace.resizing * {
@@ -96,37 +125,68 @@
     }
     .topbar {
       min-width: 0;
-      padding: 12px 14px;
+      padding: var(--space-4) var(--space-7);
       border-bottom: 1px solid var(--line);
       display: grid;
-      gap: 10px;
+      gap: var(--space-4);
     }
     .tabbar {
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: var(--space-2);
       min-width: 0;
     }
+    .context-meter {
+      --context-remaining: 0%;
+      --context-meter-size: 22px;
+      position: relative;
+      display: inline-grid;
+      place-items: center;
+      width: var(--context-meter-size);
+      height: var(--context-meter-size);
+      border-radius: 999px;
+      background: conic-gradient(#4ca56f 0 var(--context-remaining), #cfd8d2 0 100%);
+      color: #335243;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 9px;
+      line-height: 1;
+      flex: 0 0 auto;
+    }
+    .context-meter.hidden {
+      display: none;
+    }
+    .context-meter::before {
+      content: "";
+      position: absolute;
+      inset: 4px;
+      border-radius: 999px;
+      background: #fff;
+    }
+    .context-meter-value {
+      position: relative;
+      z-index: 1;
+    }
     .tabs {
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: var(--space-1);
       min-width: 0;
       overflow-x: auto;
       scrollbar-width: thin;
     }
     .tab {
+      position: relative;
       display: inline-flex;
       align-items: center;
-      gap: 6px;
+      gap: var(--space-2);
       min-width: 88px;
       max-width: 180px;
-      height: 28px;
-      border: 1px solid var(--line);
-      border-radius: 6px;
-      background: #f8faf8;
+      height: 31px;
+      border: 1px solid #d5ddd7;
+      border-radius: var(--radius-sm);
+      background: #f6f8f7;
       color: var(--ink);
-      padding: 0 7px;
+      padding: 0 var(--space-3) 0 var(--space-4);
       font: inherit;
       cursor: pointer;
       user-select: none;
@@ -137,8 +197,30 @@
       outline-offset: 1px;
     }
     .tab.active {
-      border-color: #9bb7a6;
-      background: #edf6f0;
+      border-color: #afd6bd;
+      background: #eef7f1;
+      box-shadow: inset 0 -2px 0 var(--accent);
+    }
+    .tab-status {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 15px;
+      height: 15px;
+      border: 1px solid transparent;
+      border-radius: 999px;
+      background: transparent;
+      padding: 0;
+      flex: 0 0 auto;
+    }
+    .tab-status::before {
+      content: "";
+      width: 5px;
+      height: 5px;
+      border-radius: 999px;
+      background: var(--accent);
+      animation: spinner-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     }
     .tab-label {
       min-width: 0;
@@ -150,11 +232,11 @@
     }
     .tab-close,
     .tab-new {
-      width: 24px;
-      height: 24px;
+      width: 31px;
+      height: 31px;
       border: 1px solid var(--line);
-      border-radius: 6px;
-      background: #fff;
+      border-radius: var(--radius-md);
+      background: #eef7f1;
       color: var(--muted);
       padding: 0;
       line-height: 1;
@@ -166,56 +248,79 @@
       height: 18px;
       border: 0;
       background: transparent;
+      opacity: 0.42;
+      font-size: 17px;
+      font-weight: 500;
+      line-height: 18px;
+    }
+    .tab-new {
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 31px;
+    }
+    .tab:hover .tab-close,
+    .tab:focus-within .tab-close,
+    .tab.active .tab-close {
+      opacity: 0.85;
+    }
+    .tab-close:disabled {
+      opacity: 0.22;
+      cursor: default;
     }
     .tab-close:hover,
     .tab-new:hover {
       color: var(--ink);
-      background: #f3f6f4;
+      background: #ffffff;
     }
     .log {
       min-height: 0;
       overflow-y: auto;
       overflow-x: hidden;
-      padding: 14px;
+      padding: var(--space-6) var(--space-7);
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: var(--space-4);
       background: #fbfcfa;
     }
     .entry {
       min-width: 0;
       border: 1px solid var(--line);
-      border-radius: 6px;
-      padding: 10px 11px;
+      border-radius: var(--radius-sm);
+      padding: var(--space-4) var(--space-5);
       background: #fff;
+      box-shadow: var(--entry-shadow);
     }
     .entry.user {
-      border-color: #e6d790;
-      background: #fff9d8;
+      border-color: #edd17a;
+      background: var(--warn-soft);
+      color: #5a4714;
     }
     .entry.response,
     .entry.assistant {
-      border-color: #d9ded9;
+      border-color: #d0ddd5;
       background: #ffffff;
     }
     .entry.thinking {
-      border-color: #b9d9c7;
-      background: #f5fbf6;
+      border-color: #b9dcc5;
+      background: #f0fbf3;
+      color: #256b43;
+      animation: thinking-breathe 4.8s ease-in-out infinite;
     }
     .entry.control {
-      border-color: #c8d2dc;
-      background: #f7fafd;
+      border-color: #b9d8ea;
+      background: var(--info-soft);
+      color: var(--info);
     }
     .entry.tool {
-      border-color: #d7d1e6;
-      background: #faf8ff;
-      color: #4c4261;
+      border-color: #d7c8f0;
+      background: var(--violet-soft);
+      color: var(--violet);
       font-size: 12px;
     }
     .entry.error {
-      border-color: #e4b6b6;
-      background: #fff7f7;
-      color: #7a2c2c;
+      border-color: #efb4ad;
+      background: var(--danger-soft);
+      color: var(--danger);
     }
     .text {
       white-space: pre-wrap;
@@ -226,7 +331,7 @@
       overflow-wrap: anywhere;
     }
     .markdown p {
-      margin: 0 0 8px;
+      margin: 0 0 var(--space-4);
     }
     .markdown p:last-child,
     .markdown ul:last-child,
@@ -237,17 +342,17 @@
     }
     .markdown ul,
     .markdown ol {
-      margin: 0 0 8px 18px;
+      margin: 0 0 var(--space-4) 18px;
       padding: 0;
     }
     .markdown li {
       margin: 2px 0;
     }
     .markdown pre {
-      margin: 0 0 8px;
-      padding: 9px 10px;
+      margin: 0 0 var(--space-4);
+      padding: var(--space-4) var(--space-5);
       border: 1px solid var(--line);
-      border-radius: 6px;
+      border-radius: var(--radius-sm);
       background: var(--code);
       overflow-x: auto;
       white-space: pre;
@@ -260,69 +365,191 @@
     }
     .markdown table {
       width: 100%;
-      margin: 0 0 8px;
+      margin: 0 0 var(--space-4);
       border-collapse: collapse;
       font-size: 13px;
     }
     .markdown th,
     .markdown td {
       border: 1px solid var(--line);
-      padding: 5px 7px;
+      padding: var(--space-3) var(--space-4);
       text-align: left;
       vertical-align: top;
     }
     .markdown th {
-      background: #f3f6f4;
+      background: #eef7f1;
       font-weight: 650;
     }
     .markdown a {
-      color: #0b6bcb;
+      color: #176fa8;
       text-decoration: none;
     }
     .markdown a:hover {
       text-decoration: underline;
     }
     .composer {
+      position: relative;
       min-width: 0;
-      border-top: 1px solid var(--line);
-      padding: 12px 12px 28px;
+      padding: var(--space-4);
       display: grid;
-      gap: 8px;
+      gap: var(--space-3);
+      align-content: end;
       background: #fff;
     }
     textarea {
       min-width: 0;
       resize: vertical;
-      min-height: 88px;
       max-height: 35vh;
       width: 100%;
       border: 1px solid var(--line);
-      border-radius: 6px;
-      padding: 10px;
+      border-radius: var(--radius-sm);
+      padding: var(--space-4) var(--space-5);
+      background: #ffffff;
+      color: var(--ink);
       font: inherit;
       line-height: 1.4;
+      overflow-y: auto;
+    }
+    textarea:focus {
+      border-color: #65b782;
+      box-shadow: 0 0 0 3px rgba(15, 143, 85, 0.13);
+      outline: 0;
     }
     .actions {
       display: flex;
       justify-content: flex-end;
       align-items: center;
     }
+    .spinner-wrap {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-self: start;
+      align-self: end;
+      max-width: 100%;
+    }
+    .prompt-row {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      min-width: 0;
+    }
     .spinner {
-      position: absolute;
-      left: 12px;
-      right: 12px;
-      bottom: 6px;
-      min-height: 18px;
+      --spinner-pill-height: 22px;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      height: var(--spinner-pill-height);
       color: var(--muted);
       font-size: 12px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      padding: var(--space-1) var(--space-4) var(--space-1) 18px;
+      border-radius: 999px;
+      background: rgba(240, 250, 244, 0.96);
+      border: 1px solid rgba(172, 216, 188, 0.9);
+      font: inherit;
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .spinner:empty {
+      display: none;
+    }
+    .spinner-wrap:not(:has(.spinner:not(:empty))) {
+      display: none;
+    }
+    .spinner:focus-visible {
+      border-color: #65b782;
+      box-shadow: 0 0 0 3px rgba(15, 143, 85, 0.13);
+      outline: 0;
+    }
+    .spinner-wrap:has(.spinner:not(:empty)) {
+      margin-bottom: var(--space-1);
+    }
+    .spinner:not(:empty)::before {
+      content: "";
+      position: absolute;
+      left: 7px;
+      top: 50%;
+      width: 6px;
+      height: 6px;
+      margin-top: -3px;
+      border-radius: 999px;
+      background: var(--accent);
+      animation: spinner-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    }
+    .spinner.notify-enabled {
+      color: #0b6b43;
+      background: #e6f4eb;
+      border-color: #4ca56f;
+      box-shadow:
+        inset 0 1px 2px rgba(9, 93, 55, 0.16),
+        inset 0 0 0 1px rgba(15, 143, 85, 0.1);
+    }
+    .toast {
+      position: absolute;
+      left: 0;
+      bottom: 100%;
+      z-index: 5;
+      width: max-content;
+      max-width: min(320px, calc(100vw - var(--space-6) * 2));
+      border: 1px solid #bfd6c8;
+      border-radius: var(--radius-sm);
+      background: #f6fbf8;
+      color: var(--ink);
+      box-shadow: 0 8px 20px rgba(25, 35, 31, 0.12);
+      padding: var(--space-4) var(--space-6);
+      font-size: 12px;
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(4px);
+      transition: opacity 120ms ease, transform 120ms ease;
+      margin-bottom: var(--space-3);
+    }
+    .toast.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    @keyframes spinner-pulse {
+      0%, 100% {
+        opacity: 0.45;
+        transform: scale(0.82);
+      }
+      50% {
+        opacity: 1;
+        transform: scale(1.08);
+      }
+    }
+    @keyframes thinking-breathe {
+      0%, 100% {
+        border-color: #b9dcc5;
+        box-shadow: var(--entry-shadow);
+      }
+      50% {
+        border-color: #72d494;
+        box-shadow:
+          0 0 0 2px rgba(22, 168, 90, 0.16),
+          0 2px 7px rgba(25, 35, 31, 0.08);
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .entry.thinking,
+      .tab-status::before,
+      .spinner:not(:empty)::before {
+        animation: none;
+      }
+      .tab-status::before,
+      .spinner:not(:empty)::before {
+        opacity: 0.8;
+        transform: none;
+      }
     }
     code {
       background: var(--code);
       border: 1px solid var(--line);
-      border-radius: 4px;
+      border-radius: var(--radius-sm);
       padding: 1px 4px;
       font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       font-size: 12px;
@@ -343,15 +570,23 @@
     <section class="chat" aria-label="pycodex chat">
       <div class="topbar">
         <div class="tabbar">
-          <div id="tabs" class="tabs"></div>
+          <div id="tabs" class="tabs" role="tablist"></div>
           <button id="newTab" class="tab-new" type="button" title="New session" aria-label="New session">+</button>
         </div>
       </div>
       <div id="log" class="log"></div>
       <form id="composer" class="composer">
-        <textarea id="prompt" placeholder="Ask pycodex or type /help..."></textarea>
+        <div class="spinner-wrap">
+          <div id="toast" class="toast" role="status" aria-live="polite"></div>
+          <button id="spinner" class="spinner" type="button" role="checkbox" aria-checked="false" aria-live="polite"></button>
+        </div>
+        <div class="prompt-row">
+          <div id="contextMeter" class="context-meter hidden" aria-hidden="true">
+            <span id="contextMeterValue" class="context-meter-value"></span>
+          </div>
+          <textarea id="prompt" rows="1" placeholder="Ask pycodex or type /help..."></textarea>
+        </div>
       </form>
-      <div id="spinner" class="spinner"></div>
     </section>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
@@ -359,30 +594,31 @@
   <script>
     const log = document.getElementById("log");
     const spinner = document.getElementById("spinner");
+    const toast = document.getElementById("toast");
     const prompt = document.getElementById("prompt");
     const form = document.getElementById("composer");
     const boardFrame = document.getElementById("boardFrame");
     const workspace = document.querySelector(".workspace");
     const splitter = document.getElementById("splitter");
     const tabsEl = document.getElementById("tabs");
+    const contextMeter = document.getElementById("contextMeter");
+    const contextMeterValue = document.getElementById("contextMeterValue");
     const newTabButton = document.getElementById("newTab");
     let pollTimer = null;
     let boardPollTimer = null;
     let pollInFlight = false;
     let boardPollInFlight = false;
-    let lastBoardSignature = "";
+    let lastBoardSignature = null;
     let lastRenderedSignature = "";
     let resizeStart = null;
-    let spinnerTimer = null;
-    let spinnerFrameIndex = 0;
     let spinnerText = "";
+    let toastTimer = null;
     let activeSessionId = "";
     let sessions = [];
     let isComposing = false;
     const sessionState = new Map();
     let restoreScrollTop = null;
     let suppressScrollSave = false;
-    const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
     const markdownRenderer = window.markdownit
       ? window.markdownit({html: false, linkify: true, breaks: false})
       : null;
@@ -494,27 +730,128 @@
       event.preventDefault();
     }
 
-    function setSpinner(text) {
-      spinnerText = String(text || "").trim();
-      spinnerFrameIndex = 0;
-      renderSpinner();
-      if (spinnerText && !spinnerTimer) {
-        spinnerTimer = setInterval(renderSpinner, 120);
-      }
-      if (!spinnerText && spinnerTimer) {
-        clearInterval(spinnerTimer);
-        spinnerTimer = null;
+    function setSpinner(text, options = {}) {
+      const previousText = spinnerText;
+      const nextText = String(text || "").trim();
+      const wasRunning = Boolean(previousText);
+      const isRunning = Boolean(nextText);
+      spinnerText = nextText;
+      spinner.textContent = spinnerText;
+      if (wasRunning && !isRunning && !options.suppressDoneNotification) {
+        const state = stateForSession(activeSessionId);
+        if (state.wasRunning) notifySessionDone(activeSessionId);
       }
+      updateSpinnerNotifyUi();
+    }
+
+    function showToast(text) {
+      if (toastTimer) clearTimeout(toastTimer);
+      toast.textContent = text;
+      toast.classList.add("visible");
+      toastTimer = setTimeout(() => {
+        toastTimer = null;
+        toast.classList.remove("visible");
+      }, 1400);
     }
 
-    function renderSpinner() {
+    function updateSpinnerNotifyUi() {
+      const state = stateForSession(activeSessionId);
+      const enabled = Boolean(spinnerText && state.notifyWhenDone);
+      spinner.classList.toggle("notify-enabled", enabled);
+      spinner.setAttribute("aria-checked", enabled ? "true" : "false");
       if (!spinnerText) {
-        spinner.textContent = "";
+        spinner.title = "Spinner is idle";
+      } else if (enabled) {
+        spinner.title = "Notify when done is on";
+      } else {
+        spinner.title = "Notify when done is off";
+      }
+    }
+
+    function notificationAvailable() {
+      return "Notification" in window;
+    }
+
+    function requestNotificationPermission() {
+      try {
+        const requestResult = Notification.requestPermission();
+        if (requestResult && typeof requestResult.then === "function") {
+          return requestResult;
+        }
+        return Promise.resolve(Notification.permission);
+      } catch (_error) {
+        return Promise.resolve(Notification.permission);
+      }
+    }
+
+    function notifySessionDone(sessionId, sessionSummary = null) {
+      if (!sessionId) return;
+      const state = stateForSession(sessionId);
+      if (!state.notifyWhenDone) return;
+      state.notifyWhenDone = false;
+      if (!notificationAvailable() || Notification.permission !== "granted") return;
+      const session = sessionSummary || sessionById(sessionId);
+      const title = (session && session.title) || "pycodex";
+      const lastAssistant = (session && session.last_assistant) || "Done.";
+      try {
+        new Notification(`session: ${title}`, {
+          body: lastAssistant,
+          tag: `pycodex-workspace-done-${sessionId}`,
+        });
+      } catch (_error) {
         return;
       }
-      const frame = spinnerFrames[spinnerFrameIndex % spinnerFrames.length];
-      spinnerFrameIndex += 1;
-      spinner.textContent = `${frame} ${spinnerText}`;
+    }
+
+    function sessionById(sessionId) {
+      return sessions.find((session) => (session.id || "") === sessionId) || null;
+    }
+
+    function isSessionRunning(sessionId) {
+      if (sessionId === activeSessionId && spinnerText) return true;
+      const session = sessionById(sessionId);
+      if (session) return Boolean(session.running);
+      return false;
+    }
+
+    async function toggleSpinnerNotification() {
+      const sessionId = activeSessionId;
+      if (!sessionId || !isSessionRunning(sessionId)) {
+        showToast("notify-on-done unavailable");
+        return;
+      }
+      const state = stateForSession(sessionId);
+      if (state.notifyWhenDone) {
+        state.notifyWhenDone = false;
+        showToast("notify-on-done canceled");
+        updateSpinnerNotifyUi();
+        return;
+      }
+      if (!notificationAvailable()) {
+        showToast("browser notifications unavailable");
+        return;
+      }
+      if (Notification.permission === "denied") {
+        showToast("browser notifications blocked");
+        return;
+      }
+      state.notifyWhenDone = true;
+      showToast("notify-on-done enabled");
+      updateSpinnerNotifyUi();
+      if (Notification.permission !== "granted") {
+        const permission = await requestNotificationPermission();
+        if (permission !== "granted") {
+          state.notifyWhenDone = false;
+          showToast("notify-on-done canceled");
+          updateSpinnerNotifyUi();
+          return;
+        }
+      }
+      if (!isSessionRunning(sessionId)) {
+        state.notifyWhenDone = false;
+        showToast("notify-on-done canceled");
+      }
+      updateSpinnerNotifyUi();
     }
 
     function isNearBottom() {
@@ -525,10 +862,24 @@
       log.scrollTop = log.scrollHeight;
     }
 
+    function resizePrompt() {
+      prompt.style.height = "auto";
+      const borderHeight = prompt.offsetHeight - prompt.clientHeight;
+      const maxHeight = Math.round(window.innerHeight * 0.35);
+      const nextHeight = Math.min(prompt.scrollHeight + borderHeight, maxHeight);
+      prompt.style.height = `${nextHeight}px`;
+    }
+
     function stateForSession(sessionId) {
       const key = String(sessionId || "");
       if (!sessionState.has(key)) {
-        sessionState.set(key, {lastRenderedSignature: "", scrollTop: null, draft: ""});
+        sessionState.set(key, {
+          lastRenderedSignature: "",
+          scrollTop: null,
+          draft: "",
+          notifyWhenDone: false,
+          wasRunning: false,
+        });
       }
       return sessionState.get(key);
     }
@@ -544,11 +895,27 @@
     }
 
     function updateSessions(nextSessions) {
-      sessions = Array.isArray(nextSessions) ? nextSessions : sessions;
+      const incomingSessions = Array.isArray(nextSessions) ? nextSessions : sessions;
+      incomingSessions.forEach((session) => {
+        const sessionId = session.id || "";
+        if (!sessionId) return;
+        const state = stateForSession(sessionId);
+        const wasRunning = Boolean(state.wasRunning);
+        const isRunning = Boolean(session.running);
+        if (!wasRunning && isRunning) {
+          state.notifyWhenDone = false;
+        } else if (wasRunning && !isRunning) {
+          notifySessionDone(sessionId, session);
+        }
+        state.wasRunning = isRunning;
+      });
+      sessions = incomingSessions;
       if (!activeSessionId && sessions.length) {
         activeSessionId = sessions[0].id || "";
       }
       renderTabs();
+      updateContextMeter();
+      updateSpinnerNotifyUi();
     }
 
     function renderTabs() {
@@ -556,12 +923,23 @@
       sessions.forEach((session, index) => {
         const sessionId = session.id || "";
         const tab = document.createElement("div");
-        tab.className = "tab" + (sessionId === activeSessionId ? " active" : "");
+        tab.className =
+          "tab" +
+          (sessionId === activeSessionId ? " active" : "") +
+          (session.running ? " running" : "");
         tab.title = session.title || `Session ${index + 1}`;
         tab.setAttribute("role", "tab");
         tab.setAttribute("aria-selected", sessionId === activeSessionId ? "true" : "false");
+        if (session.running) tab.setAttribute("aria-busy", "true");
         tab.addEventListener("click", () => switchSession(sessionId));
 
+        if (session.running) {
+          const status = document.createElement("span");
+          status.className = "tab-status";
+          status.setAttribute("aria-hidden", "true");
+          tab.appendChild(status);
+        }
+
         const label = document.createElement("span");
         label.className = "tab-label";
         label.textContent = session.title || `Session ${index + 1}`;
@@ -583,6 +961,38 @@
       });
     }
 
+    function updateContextMeter(snapshot = null) {
+      let percent = null;
+      if (snapshot && snapshot.context_remaining_percent !== undefined) {
+        percent = snapshot.context_remaining_percent;
+      } else {
+        const session = sessionById(activeSessionId);
+        if (session && session.context_remaining_percent !== undefined) {
+          percent = session.context_remaining_percent;
+        }
+      }
+      if (percent === null || percent === undefined || percent === "") {
+        contextMeter.classList.add("hidden");
+        contextMeterValue.textContent = "";
+        return;
+      }
+      const value = Math.max(0, Math.min(100, Math.round(Number(percent))));
+      if (!Number.isFinite(value)) {
+        contextMeter.classList.add("hidden");
+        contextMeterValue.textContent = "";
+        return;
+      }
+      if (value >= 100) {
+        contextMeter.classList.remove("hidden");
+        contextMeter.style.setProperty("--context-remaining", `${value}%`);
+        contextMeterValue.textContent = "";
+        return;
+      }
+      contextMeter.classList.remove("hidden");
+      contextMeter.style.setProperty("--context-remaining", `${value}%`);
+      contextMeterValue.textContent = String(value);
+    }
+
     function messageSignature(snapshot) {
       const turns = (snapshot && snapshot.turns) || [];
       return JSON.stringify(
@@ -644,10 +1054,14 @@
         const response = await fetch(relativeUrl("api/board"));
         if (!response.ok) return;
         const payload = await response.json();
-        if (!payload.exists) return;
+        if (!payload.exists) {
+          lastBoardSignature = null;
+          return;
+        }
         const signature = `${payload.mtime_ns || ""}:${payload.size || ""}`;
-        if (!lastBoardSignature) {
+        if (lastBoardSignature === null) {
           lastBoardSignature = signature;
+          boardFrame.src = `board?t=${Date.now()}`;
           return;
         }
         if (signature !== lastBoardSignature) {
@@ -673,6 +1087,7 @@
       const signature = messageSignature(snapshot);
       if (signature === state.lastRenderedSignature) {
         setSpinner(snapshot.spinner || "");
+        updateContextMeter(snapshot);
         return;
       }
       state.lastRenderedSignature = signature;
@@ -687,6 +1102,7 @@
           turns.forEach((turn) => renderTurn(turn, shouldStick));
         }
         setSpinner(snapshot.spinner || "");
+        updateContextMeter(snapshot);
         if (restoreScrollTop !== null) {
           log.scrollTop = Math.min(
             restoreScrollTop,
@@ -758,10 +1174,11 @@
       state.lastRenderedSignature = "";
       lastRenderedSignature = "";
       prompt.value = state.draft || "";
+      resizePrompt();
       suppressScrollSave = true;
       log.textContent = "";
       suppressScrollSave = false;
-      setSpinner("");
+      setSpinner("", {suppressDoneNotification: true});
       restoreScrollTop = state.scrollTop;
       await pollSession();
       renderTabs();
@@ -782,6 +1199,7 @@
       state.lastRenderedSignature = "";
       lastRenderedSignature = "";
       prompt.value = "";
+      resizePrompt();
       restoreScrollTop = null;
       updateSessions(payload.sessions || []);
       renderSnapshot(payload.snapshot);
@@ -803,6 +1221,7 @@
         activeSessionId = sessions.length ? sessions[0].id || "" : "";
         lastRenderedSignature = "";
         prompt.value = "";
+        resizePrompt();
         suppressScrollSave = true;
         log.textContent = "";
         suppressScrollSave = false;
@@ -817,12 +1236,14 @@
       const text = prompt.value.trim();
       if (!text) return;
       prompt.value = "";
+      resizePrompt();
       stateForSession(activeSessionId).draft = "";
       submitPrompt(text);
     });
 
     prompt.addEventListener("input", () => {
       stateForSession(activeSessionId).draft = prompt.value;
+      resizePrompt();
     });
 
     prompt.addEventListener("compositionstart", () => {
@@ -852,13 +1273,21 @@
     splitter.addEventListener("pointerup", endResize);
     splitter.addEventListener("pointercancel", endResize);
     splitter.addEventListener("dblclick", centerSplit);
+    spinner.addEventListener("click", toggleSpinnerNotification);
     newTabButton.addEventListener("click", createSession);
     window.addEventListener("resize", () => {
       const current = Number(window.localStorage.getItem("pycodex.workspace.chatWidth") || 0);
       if (current > 0) setChatWidth(current);
+      resizePrompt();
+    });
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState !== "visible") return;
+      pollSession();
+      pollBoard();
     });
 
     loadChatWidth();
+    resizePrompt();
     startPolling();
     startBoardPolling();
   </script>