klaude-code 2.21.0__tar.gz → 2.23.0__tar.gz

{klaude_code-2.21.0 → klaude_code-2.23.0}/PKG-INFO

@@ -1,22 +1,24 @@
 Metadata-Version: 2.3
 Name: klaude-code
-Version: 2.21.0
+Version: 2.23.0
 Summary: Minimal code agent CLI
 Requires-Dist: anthropic>=0.66.0
 Requires-Dist: chardet>=5.2.0,<6
-Requires-Dist: ddgs>=9.9.3
 Requires-Dist: diff-match-patch>=20241021
 Requires-Dist: filelock>=3.20.3
+Requires-Dist: fastapi
 Requires-Dist: google-genai>=1.56.0
 Requires-Dist: markdown-it-py>=4.0.0
-Requires-Dist: openai>=1.102.0
+Requires-Dist: openai>=2.24.0
 Requires-Dist: prompt-toolkit>=3.0.52
 Requires-Dist: pydantic>=2.11.7
 Requires-Dist: python-socks>=2.8.1
 Requires-Dist: pyyaml>=6.0.2
 Requires-Dist: rich>=14.1.0
+Requires-Dist: sse-starlette
 Requires-Dist: trafilatura>=2.0.0
 Requires-Dist: typer>=0.17.3
+Requires-Dist: uvicorn
 Requires-Python: >=3.13
 Description-Content-Type: text/markdown
 
@@ -29,7 +31,7 @@ Minimal code agent CLI.
 - **Keep reasoning item in context**: Interleaved thinking support
 - **Model-aware tools**: Claude Code tool set for Opus, `apply_patch` for GPT-5/Codex
 - **Reminders**: Cooldown-based todo tracking, instruction reinforcement and external file change reminder
-- **Sub-agents**: Task, Explore, Web
+- **Sub-agents**: Task, Explore
 - **Structured sub-agent output**: Main agent defines JSON schema and get schema-compliant responses via constrained decoding
 - **Recursive `@file` mentions**: Circular dependency protection, relative path resolution
 - **External file sync**: Monitoring for external edits (linter, manual)
@@ -96,7 +98,8 @@ export OPENAI_API_KEY=sk-xxx             # GPT models
 export OPENROUTER_API_KEY=sk-or-xxx      # OpenRouter (multi-provider)
 export DEEPSEEK_API_KEY=sk-xxx           # DeepSeek models
 export MOONSHOT_API_KEY=sk-xxx           # Moonshot/Kimi models
-export BRAVE_API_KEY=BSA-xxx             # Brave Search (optional, enhances web search)
+export BRAVE_API_KEY=BSA-xxx             # Brave Search (optional, WebSearch provider)
+export EXA_API_KEY=exa-xxx               # Exa Search (optional, WebSearch provider)
 
 # Then just run:
 klaude
@@ -104,16 +107,39 @@ klaude
 
 On first run, you'll be prompted to select a model. Your choice is saved as `main_model`.
 
+You can also configure fallback lists for helper models:
+
+```yaml
+fast_model:
+  - haiku
+  - gemini-flash
+  - gpt-5-nano
+
+compact_model:
+  - gemini-flash
+  - haiku
+```
+
+Klaude tries these entries in order and uses the first available model. `fast_model` is used for session-title generation; `compact_model` is used for compact/helper tasks.
+
 #### Built-in Providers
 
-| Provider    | Env Variable          | Models                                                                        |
-|-------------|-----------------------|-------------------------------------------------------------------------------|
-| anthropic   | `ANTHROPIC_API_KEY`   | sonnet, opus                                                                  |
-| openai      | `OPENAI_API_KEY`      | gpt-5.2                                                                       |
-| openrouter  | `OPENROUTER_API_KEY`  | gpt-5.2, gpt-5.2-fast, gpt-5.1-codex-max, sonnet, opus, haiku, kimi, gemini-* |
-| deepseek    | `DEEPSEEK_API_KEY`    | deepseek                                                                      |
-| moonshot    | `MOONSHOT_API_KEY`    | kimi@moonshot                                                                 |
-| codex       | N/A (OAuth)           | gpt-5.2-codex (requires ChatGPT Pro subscription)                             |
+| Provider         | Env Variable                                                                 | Models                                                                                                   |
+|------------------|------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|
+| anthropic        | `ANTHROPIC_API_KEY`                                                          | sonnet, sonnet-no-thinking, opus, haiku                                                                 |
+| openai           | `OPENAI_API_KEY`                                                             | gpt-5.4-high, gpt-5.4-xhigh, gpt-5.3-codex, gpt-5.3-codex-xhigh                                         |
+| openrouter       | `OPENROUTER_API_KEY`                                                         | gpt-5.3-codex, gpt-5.3-codex-xhigh, gpt-5.4-high, gpt-5.4-xhigh, kimi, haiku, sonnet, sonnet-no-thinking, opus, gemini-pro, gemini-flash, grok, minimax, glm |
+| google           | `GOOGLE_API_KEY` or `GEMINI_API_KEY`                                         | gemini-pro, gemini-flash                                                                                |
+| google-vertex    | `GOOGLE_APPLICATION_CREDENTIALS`, `GOOGLE_CLOUD_PROJECT`, `GOOGLE_CLOUD_LOCATION` | gemini-pro, gemini-flash                                                                                |
+| bedrock          | `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_REGION`                   | sonnet                                                                                                   |
+| deepseek         | `DEEPSEEK_API_KEY`                                                           | deepseek                                                                                                 |
+| moonshot         | `MOONSHOT_API_KEY`                                                           | kimi                                                                                                     |
+| cerebras         | `CEREBRAS_API_KEY`                                                           | glm                                                                                                      |
+| claude-max       | N/A (OAuth)                                             | sonnet, sonnet-no-thinking, opus, haiku                                                                 |
+| codex            | N/A (OAuth)                                                                  | gpt-5.3-codex, gpt-5.3-codex-xhigh, gpt-5.4-high, gpt-5.4-xhigh   |
+| github-copilot   | N/A (OAuth)                                                                  | gpt-5.3-codex, gpt-5.3-codex-xhigh, gpt-5.4-high, gpt-5.4-xhigh, sonnet, sonnet-4.5, haiku, opus       |
+| ark-api          | `ARK_API_KEY`                                                                | seed-pro, seed-code                                                                                      |
+| ark-coding-plan  | `ARK_API_KEY`                                                                | seed-code, kimi                                                                                          |
 
 List all configured providers and models:
 
@@ -167,6 +193,17 @@ You can add custom models to built-in providers or define new ones. Configuratio
 
 ```yaml
 # ~/.klaude/klaude-config.yaml
+main_model: opus
+
+fast_model:
+  - haiku
+  - gemini-flash
+  - gpt-5-nano
+
+compact_model:
+  - gemini-flash
+  - haiku
+
 provider_list:
   # Add/Override models for built-in OpenRouter provider
   - provider_name: openrouter
@@ -196,6 +233,22 @@ provider_list:
 - **Merging**: If `provider_name` matches a built-in provider, settings like `protocol` and `api_key` are inherited.
 - **Overriding**: Use the same `model_name` as a built-in model to override its parameters.
 - **Environment Variables**: Use `${VAR_NAME}` syntax for secrets.
+- **Model Preference Lists**: `fast_model` and `compact_model` accept either a single string or a list of model selectors. When you provide a list, Klaude tries them in order and picks the first available one.
+
+##### Sub-agent Model Configuration
+
+`sub_agent_models` only accepts sub-agent types. Current supported keys are:
+
+- `general-purpose` (Task sub-agent)
+- `explore` (Explore sub-agent)
+
+If a sub-agent type is not configured, it falls back to the main agent model.
+
+```yaml
+sub_agent_models:
+  general-purpose: sonnet
+  explore: haiku
+```
 
 ##### Supported Protocols
 
@@ -243,7 +296,6 @@ Inside the interactive session (`klaude`), use these commands to streamline your
 - `/resume` - Select and resume a previous session.
 - `/fork-session` - Fork current session to a new session ID (supports interactive fork point selection).
 - `/export` - Export last assistant message to a temp Markdown file.
-- `/export-online` - Export and deploy session to surge.sh as a static webpage.
 - `/debug [filters]` - Toggle debug mode and configure debug filters.
 - `/init` - Bootstrap a new project structure or module.
 - `/dev-doc [feature]` - Generate a comprehensive execution plan for a feature.
@@ -273,4 +325,3 @@ The main agent can spawn specialized sub-agents for specific tasks:
 |-----------|---------|
 | **Explore** | Fast codebase exploration - find files, search code, answer questions about the codebase |
 | **Task** | Handle complex multi-step tasks autonomously |
-| **WebAgent** | Search the web, fetch pages, and analyze content. Uses Brave LLM Context API when `BRAVE_API_KEY` is set, otherwise falls back to DuckDuckGo |

{klaude_code-2.21.0 → klaude_code-2.23.0}/README.md

@@ -7,7 +7,7 @@ Minimal code agent CLI.
 - **Keep reasoning item in context**: Interleaved thinking support
 - **Model-aware tools**: Claude Code tool set for Opus, `apply_patch` for GPT-5/Codex
 - **Reminders**: Cooldown-based todo tracking, instruction reinforcement and external file change reminder
-- **Sub-agents**: Task, Explore, Web
+- **Sub-agents**: Task, Explore
 - **Structured sub-agent output**: Main agent defines JSON schema and get schema-compliant responses via constrained decoding
 - **Recursive `@file` mentions**: Circular dependency protection, relative path resolution
 - **External file sync**: Monitoring for external edits (linter, manual)
@@ -74,7 +74,8 @@ export OPENAI_API_KEY=sk-xxx             # GPT models
 export OPENROUTER_API_KEY=sk-or-xxx      # OpenRouter (multi-provider)
 export DEEPSEEK_API_KEY=sk-xxx           # DeepSeek models
 export MOONSHOT_API_KEY=sk-xxx           # Moonshot/Kimi models
-export BRAVE_API_KEY=BSA-xxx             # Brave Search (optional, enhances web search)
+export BRAVE_API_KEY=BSA-xxx             # Brave Search (optional, WebSearch provider)
+export EXA_API_KEY=exa-xxx               # Exa Search (optional, WebSearch provider)
 
 # Then just run:
 klaude
@@ -82,16 +83,39 @@ klaude
 
 On first run, you'll be prompted to select a model. Your choice is saved as `main_model`.
 
+You can also configure fallback lists for helper models:
+
+```yaml
+fast_model:
+  - haiku
+  - gemini-flash
+  - gpt-5-nano
+
+compact_model:
+  - gemini-flash
+  - haiku
+```
+
+Klaude tries these entries in order and uses the first available model. `fast_model` is used for session-title generation; `compact_model` is used for compact/helper tasks.
+
 #### Built-in Providers
 
-| Provider    | Env Variable          | Models                                                                        |
-|-------------|-----------------------|-------------------------------------------------------------------------------|
-| anthropic   | `ANTHROPIC_API_KEY`   | sonnet, opus                                                                  |
-| openai      | `OPENAI_API_KEY`      | gpt-5.2                                                                       |
-| openrouter  | `OPENROUTER_API_KEY`  | gpt-5.2, gpt-5.2-fast, gpt-5.1-codex-max, sonnet, opus, haiku, kimi, gemini-* |
-| deepseek    | `DEEPSEEK_API_KEY`    | deepseek                                                                      |
-| moonshot    | `MOONSHOT_API_KEY`    | kimi@moonshot                                                                 |
-| codex       | N/A (OAuth)           | gpt-5.2-codex (requires ChatGPT Pro subscription)                             |
+| Provider         | Env Variable                                                                 | Models                                                                                                   |
+|------------------|------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|
+| anthropic        | `ANTHROPIC_API_KEY`                                                          | sonnet, sonnet-no-thinking, opus, haiku                                                                 |
+| openai           | `OPENAI_API_KEY`                                                             | gpt-5.4-high, gpt-5.4-xhigh, gpt-5.3-codex, gpt-5.3-codex-xhigh                                         |
+| openrouter       | `OPENROUTER_API_KEY`                                                         | gpt-5.3-codex, gpt-5.3-codex-xhigh, gpt-5.4-high, gpt-5.4-xhigh, kimi, haiku, sonnet, sonnet-no-thinking, opus, gemini-pro, gemini-flash, grok, minimax, glm |
+| google           | `GOOGLE_API_KEY` or `GEMINI_API_KEY`                                         | gemini-pro, gemini-flash                                                                                |
+| google-vertex    | `GOOGLE_APPLICATION_CREDENTIALS`, `GOOGLE_CLOUD_PROJECT`, `GOOGLE_CLOUD_LOCATION` | gemini-pro, gemini-flash                                                                                |
+| bedrock          | `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_REGION`                   | sonnet                                                                                                   |
+| deepseek         | `DEEPSEEK_API_KEY`                                                           | deepseek                                                                                                 |
+| moonshot         | `MOONSHOT_API_KEY`                                                           | kimi                                                                                                     |
+| cerebras         | `CEREBRAS_API_KEY`                                                           | glm                                                                                                      |
+| claude-max       | N/A (OAuth)                                             | sonnet, sonnet-no-thinking, opus, haiku                                                                 |
+| codex            | N/A (OAuth)                                                                  | gpt-5.3-codex, gpt-5.3-codex-xhigh, gpt-5.4-high, gpt-5.4-xhigh   |
+| github-copilot   | N/A (OAuth)                                                                  | gpt-5.3-codex, gpt-5.3-codex-xhigh, gpt-5.4-high, gpt-5.4-xhigh, sonnet, sonnet-4.5, haiku, opus       |
+| ark-api          | `ARK_API_KEY`                                                                | seed-pro, seed-code                                                                                      |
+| ark-coding-plan  | `ARK_API_KEY`                                                                | seed-code, kimi                                                                                          |
 
 List all configured providers and models:
 
@@ -145,6 +169,17 @@ You can add custom models to built-in providers or define new ones. Configuratio
 
 ```yaml
 # ~/.klaude/klaude-config.yaml
+main_model: opus
+
+fast_model:
+  - haiku
+  - gemini-flash
+  - gpt-5-nano
+
+compact_model:
+  - gemini-flash
+  - haiku
+
 provider_list:
   # Add/Override models for built-in OpenRouter provider
   - provider_name: openrouter
@@ -174,6 +209,22 @@ provider_list:
 - **Merging**: If `provider_name` matches a built-in provider, settings like `protocol` and `api_key` are inherited.
 - **Overriding**: Use the same `model_name` as a built-in model to override its parameters.
 - **Environment Variables**: Use `${VAR_NAME}` syntax for secrets.
+- **Model Preference Lists**: `fast_model` and `compact_model` accept either a single string or a list of model selectors. When you provide a list, Klaude tries them in order and picks the first available one.
+
+##### Sub-agent Model Configuration
+
+`sub_agent_models` only accepts sub-agent types. Current supported keys are:
+
+- `general-purpose` (Task sub-agent)
+- `explore` (Explore sub-agent)
+
+If a sub-agent type is not configured, it falls back to the main agent model.
+
+```yaml
+sub_agent_models:
+  general-purpose: sonnet
+  explore: haiku
+```
 
 ##### Supported Protocols
 
@@ -221,7 +272,6 @@ Inside the interactive session (`klaude`), use these commands to streamline your
 - `/resume` - Select and resume a previous session.
 - `/fork-session` - Fork current session to a new session ID (supports interactive fork point selection).
 - `/export` - Export last assistant message to a temp Markdown file.
-- `/export-online` - Export and deploy session to surge.sh as a static webpage.
 - `/debug [filters]` - Toggle debug mode and configure debug filters.
 - `/init` - Bootstrap a new project structure or module.
 - `/dev-doc [feature]` - Generate a comprehensive execution plan for a feature.
@@ -251,4 +301,3 @@ The main agent can spawn specialized sub-agents for specific tasks:
 |-----------|---------|
 | **Explore** | Fast codebase exploration - find files, search code, answer questions about the codebase |
 | **Task** | Handle complex multi-step tasks autonomously |
-| **WebAgent** | Search the web, fetch pages, and analyze content. Uses Brave LLM Context API when `BRAVE_API_KEY` is set, otherwise falls back to DuckDuckGo |

{klaude_code-2.21.0 → klaude_code-2.23.0}/pyproject.toml

@@ -4,26 +4,28 @@ build-backend = "uv_build"
 
 [project]
 name = "klaude-code"
-version = "2.21.0"
+version = "2.23.0"
 description = "Minimal code agent CLI"
 readme = "README.md"
 requires-python = ">=3.13"
 dependencies = [
     "anthropic>=0.66.0",
     "chardet>=5.2.0,<6",
-    "ddgs>=9.9.3",
     "diff-match-patch>=20241021",
     "filelock>=3.20.3",
+    "fastapi",
     "google-genai>=1.56.0",
     "markdown-it-py>=4.0.0",
-    "openai>=1.102.0",
+    "openai>=2.24.0",
     "prompt-toolkit>=3.0.52",
     "pydantic>=2.11.7",
     "python-socks>=2.8.1",
     "pyyaml>=6.0.2",
     "rich>=14.1.0",
+    "sse-starlette",
     "trafilatura>=2.0.0",
     "typer>=0.17.3",
+    "uvicorn",
 ]
 
 [project.scripts]
@@ -72,6 +74,8 @@ reportMissingImports = "warning"
 reportMissingModuleSource = "warning"
 exclude = [
     ".venv/",
+    ".pnpm-store/",
+    "web/node_modules/",
     "src/klaude_code/skill/assets/**/scripts/",
 ]
 
@@ -98,8 +102,8 @@ type = "layers"
 layers = [
     "klaude_code.cli",
     "klaude_code.tui",
+    "klaude_code.web",
     "klaude_code.app",
-    "klaude_code.ui",
     "klaude_code.core",
     "klaude_code.skill",
     "klaude_code.session",

{klaude_code-2.21.0 → klaude_code-2.23.0}/src/klaude_code/app/__init__.py

@@ -1,6 +1,6 @@
 """Application-layer runtime helpers.
 
-This package coordinates core execution (Executor) with frontend displays.
+This package coordinates core execution (RuntimeFacade) with frontend displays.
 Terminal-specific rendering and input handling live in `klaude_code.tui`.
 """
 

{klaude_code-2.21.0 → klaude_code-2.23.0}/src/klaude_code/app/auth_flow.py

@@ -136,7 +136,7 @@ def execute_login(provider: str) -> None:
             except Exception as e:
                 log((f"Login failed: {e}", "red"))
                 raise typer.Exit(1) from None
-        case "copilot":
+        case "github-copilot" | "copilot":
             from klaude_code.auth.copilot.oauth import CopilotOAuth
             from klaude_code.auth.copilot.token_manager import CopilotTokenManager
 
@@ -145,7 +145,7 @@ def execute_login(provider: str) -> None:
             if token_manager.is_logged_in():
                 state = token_manager.get_state()
                 if state and not state.is_expired():
-                    log(("You are already logged in to Copilot.", "green"))
+                    log(("You are already logged in to GitHub Copilot.", "green"))
                     domain = state.enterprise_domain or "github.com"
                     expires_dt = datetime.datetime.fromtimestamp(state.expires_at, tz=datetime.UTC)
                     log(f"  Domain: {domain}")
@@ -232,18 +232,18 @@ def execute_logout(provider: str) -> None:
             if typer.confirm("Are you sure you want to logout from Claude?"):
                 token_manager.delete()
                 log(("Logged out from Claude.", "green"))
-        case "copilot":
+        case "github-copilot" | "copilot":
             from klaude_code.auth.copilot.token_manager import CopilotTokenManager
 
             token_manager = CopilotTokenManager()
 
             if not token_manager.is_logged_in():
-                log("You are not logged in to Copilot.")
+                log("You are not logged in to GitHub Copilot.")
                 return
 
-            if typer.confirm("Are you sure you want to logout from Copilot?"):
+            if typer.confirm("Are you sure you want to logout from GitHub Copilot?"):
                 token_manager.delete()
-                log(("Logged out from Copilot.", "green"))
+                log(("Logged out from GitHub Copilot.", "green"))
         case _:
-            log((f"Error: Unknown provider '{provider}'. Supported: codex, claude, copilot", "red"))
+            log((f"Error: Unknown provider '{provider}'. Supported: codex, claude, github-copilot", "red"))
             raise typer.Exit(1)

{klaude_code-2.21.0/src/klaude_code/cli → klaude_code-2.23.0/src/klaude_code/app}/log_viewer.html

@@ -86,6 +86,25 @@ body {
   flex: 1;
   letter-spacing: -0.01em;
 }
+.nav-btn {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  color: var(--fg-secondary);
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 700;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
+}
+.nav-btn:hover {
+  background: var(--bg-hover);
+  color: var(--fg);
+  border-color: var(--border-strong);
+}
 #toolbar .filter-group {
   display: flex;
   gap: 6px;
@@ -182,6 +201,8 @@ body {
 .log-line .dtype-RESPONSE { color: #5b21b6; background: #ede9fe; }
 .log-line .dtype-EXECUTION { color: #0f766e; background: #ccfbf1; }
 .log-line .dtype-TERMINAL { color: #be123c; background: #ffe4e6; }
+.log-line .dtype-OPERATION { color: #1e1b4b; background: #e0e7ff; }
+.log-line .dtype-EVENT_BUS { color: #6d28d9; background: #f3e8ff; }
 .log-line .msg { color: var(--fg-secondary); }
 .log-line .json-inline { color: var(--fg-tertiary); }
 .log-line .lineno {
@@ -214,11 +235,14 @@ body {
 #right {
   width: 50%;
   min-width: 300px;
-  display: flex;
+  display: none;
   flex-direction: column;
   background: var(--bg-surface);
   border-left: 1px solid var(--border);
 }
+#right.open {
+  display: flex;
+}
 #right-toolbar {
   display: flex;
   align-items: center;
@@ -361,6 +385,7 @@ body {
 
 /* Resize handle */
 #resize-handle {
+  display: none;
   width: 4px;
   cursor: col-resize;
   background: transparent;
@@ -372,6 +397,7 @@ body {
   margin-left: -2px;
   margin-right: -2px;
 }
+#resize-handle.open { display: block; }
 #resize-handle:hover, #resize-handle.dragging { background: var(--border-strong); }
 </style>
 </head>
@@ -379,6 +405,7 @@ body {
 <div id="container">
   <div id="left">
     <div id="toolbar">
+      <button class="nav-btn" id="btn-back-list" title="Back to log files">Logs</button>
       <span class="title" id="log-title">No log loaded</span>
       <input type="text" id="search-box" placeholder="Search... (/)">
       <div class="filter-group" id="filter-group"></div>
@@ -393,6 +420,7 @@ body {
       <button class="action-btn" id="btn-expand-all" title="Expand all">Expand All</button>
       <button class="action-btn" id="btn-collapse-all" title="Collapse all">Collapse All</button>
       <button class="action-btn" id="btn-raw" title="Toggle raw text">Raw</button>
+      <button class="action-btn" id="btn-close-panel" title="Close panel" style="padding:4px 8px;">&#x2715;</button>
     </div>
     <div id="json-view"><span class="empty-hint">Select a log line to view details</span></div>
   </div>
@@ -400,23 +428,84 @@ body {
 
 <script>
 const LOG_RE = /^\[([^\]]+)\]\s+(\S+)\s+(.*)/;
-const ALL_TYPES = ['GENERAL','LLM_CONFIG','LLM_PAYLOAD','LLM_STREAM','UI_EVENT','RESPONSE','EXECUTION','TERMINAL'];
-const DEFAULT_FILTERS = new Set(['LLM_CONFIG','LLM_PAYLOAD','LLM_STREAM']);
+const ALL_TYPES = ['GENERAL','LLM_CONFIG','LLM_PAYLOAD','LLM_STREAM','OPERATION','EVENT_BUS','UI_EVENT','RESPONSE','EXECUTION','TERMINAL'];
+const DEFAULT_FILTERS = new Set(['LLM_CONFIG','LLM_PAYLOAD','LLM_STREAM','OPERATION']);
 
 let logLines = [];
 let selectedIdx = -1;
 let activeFilters = new Set();
 let searchQuery = '';
 let showRaw = false;
+let viewerMode = 'files';
+
+function setViewerMode(mode) {
+  viewerMode = mode;
+  const isLogMode = mode === 'log';
+  document.getElementById('btn-back-list').style.display = isLogMode ? '' : 'none';
+  document.getElementById('search-box').style.display = isLogMode ? '' : 'none';
+  document.getElementById('filter-group').style.display = isLogMode ? '' : 'none';
+  for (const id of ['btn-copy', 'btn-expand-all', 'btn-collapse-all', 'btn-raw', 'btn-close-panel']) {
+    document.getElementById(id).disabled = !isLogMode;
+  }
+}
+
+document.getElementById('btn-back-list').addEventListener('click', () => {
+  location.search = '';
+});
+
+async function loadLogList() {
+  setViewerMode('files');
+  const title = document.getElementById('log-title');
+  const list = document.getElementById('log-list');
+  const label = document.getElementById('right-label');
+  const view = document.getElementById('json-view');
+  title.textContent = 'Log files';
+  label.textContent = 'Select a log file';
+  view.innerHTML = '<span class="empty-hint">Choose a log file from the left list</span>';
+  list.innerHTML = '<div class="log-line"><span class="msg">Loading...</span></div>';
+
+  try {
+    const resp = await fetch('/api/logs');
+    if (!resp.ok) throw new Error(resp.statusText);
+    const files = await resp.json();
+    list.innerHTML = '';
+
+    if (files.length === 0) {
+      list.innerHTML = '<div class="log-line"><span class="msg">No log files found</span></div>';
+      return;
+    }
+
+    const frag = document.createDocumentFragment();
+    files.forEach((file, idx) => {
+      const div = document.createElement('div');
+      div.className = 'log-line';
+      const mtime = new Date(file.mtime * 1000).toLocaleString();
+      div.innerHTML =
+        '<span class="lineno">' + (idx + 1) + '</span>' +
+        '<span class="ts">' + esc(mtime) + '</span> ' +
+        '<span class="msg">' + esc(file.relative_path) + '</span> ' +
+        '<span class="json-inline">' + esc(formatBytes(file.size_bytes)) + '</span>';
+      div.addEventListener('click', () => {
+        location.search = '?log=' + encodeURIComponent(file.path);
+      });
+      frag.appendChild(div);
+    });
+    list.appendChild(frag);
+  } catch (e) {
+    title.textContent = 'Error: ' + e.message;
+    list.innerHTML = '<div class="log-line"><span class="msg">Failed to load log files</span></div>';
+  }
+}
 
 // --- Data loading ---
 async function loadLog() {
   const params = new URLSearchParams(location.search);
   const logPath = params.get('log');
   if (!logPath) {
-    document.getElementById('log-title').textContent = 'No log path specified';
+    await loadLogList();
     return;
   }
+  setViewerMode('log');
   document.getElementById('log-title').textContent = logPath.split('/').slice(-2).join('/');
   try {
     const resp = await fetch('/api/log?path=' + encodeURIComponent(logPath));
@@ -495,13 +584,28 @@ function toggleFilter(type, btn) {
     btn.classList.add('active');
   }
   applyFilters();
+
+  if (selectedIdx >= 0) {
+    const list = document.getElementById('log-list');
+    const selected = list.children[selectedIdx];
+    if (selected && !selected.classList.contains('hidden')) {
+      const listRect = list.getBoundingClientRect();
+      const rowRect = selected.getBoundingClientRect();
+      const fullyVisible = rowRect.top >= listRect.top && rowRect.bottom <= listRect.bottom;
+      if (!fullyVisible) {
+        selected.scrollIntoView({ block: 'center' });
+      }
+    }
+  }
 }
 
 function applyFilters() {
+  if (viewerMode !== 'log') return;
   const list = document.getElementById('log-list');
   const items = list.children;
   for (let i = 0; i < items.length; i++) {
     const entry = logLines[i];
+    if (!entry) continue;
     let visible = true;
     if (activeFilters.size > 0 && entry.type && !activeFilters.has(entry.type)) {
       visible = false;
@@ -555,7 +659,23 @@ function renderLogList() {
   list.appendChild(frag);
 }
 
+function openRightPanel() {
+  document.getElementById('right').classList.add('open');
+  document.getElementById('resize-handle').classList.add('open');
+}
+
+function closeRightPanel() {
+  document.getElementById('right').classList.remove('open');
+  document.getElementById('resize-handle').classList.remove('open');
+  const list = document.getElementById('log-list');
+  if (selectedIdx >= 0 && list.children[selectedIdx]) {
+    list.children[selectedIdx].classList.remove('selected');
+  }
+  selectedIdx = -1;
+}
+
 function selectLine(idx) {
+  openRightPanel();
   const list = document.getElementById('log-list');
   if (selectedIdx >= 0 && list.children[selectedIdx]) {
     list.children[selectedIdx].classList.remove('selected');
@@ -757,6 +877,8 @@ document.getElementById('btn-collapse-all').addEventListener('click', () => {
   });
 });
 
+document.getElementById('btn-close-panel').addEventListener('click', closeRightPanel);
+
 document.getElementById('btn-raw').addEventListener('click', () => {
   if (selectedIdx < 0) return;
   const entry = logLines[selectedIdx];
@@ -776,11 +898,12 @@ document.getElementById('btn-raw').addEventListener('click', () => {
 // --- Search ---
 const searchBox = document.getElementById('search-box');
 searchBox.addEventListener('input', () => {
+  if (viewerMode !== 'log') return;
   searchQuery = searchBox.value.toLowerCase();
   applyFilters();
 });
 document.addEventListener('keydown', (e) => {
-  if (e.key === '/' && document.activeElement !== searchBox) {
+  if (viewerMode === 'log' && e.key === '/' && document.activeElement !== searchBox) {
     e.preventDefault();
     searchBox.focus();
   }
@@ -788,16 +911,17 @@ document.addEventListener('keydown', (e) => {
     searchBox.value = '';
     searchQuery = '';
     searchBox.blur();
-    applyFilters();
+    if (viewerMode === 'log') applyFilters();
   }
   // Arrow keys for navigation
-  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+  if (viewerMode === 'log' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
     e.preventDefault();
     navigateLine(e.key === 'ArrowDown' ? 1 : -1);
   }
 });
 
 function navigateLine(direction) {
+  if (viewerMode !== 'log') return;
   const list = document.getElementById('log-list');
   let next = selectedIdx + direction;
   // Skip hidden lines
@@ -952,6 +1076,11 @@ function badgeify(s) {
   return esc(s).replace(/\[([\w.]+)\]/g, '<span class="badge">$1</span>');
 }
 function truncate(s, n) { return s.length <= n ? s : s.slice(0, n) + '...'; }
+function formatBytes(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
 
 // --- Init ---
 buildFilters();