claude-opencode-viewer 2.6.46 → 2.6.48

package/.agents/skills/code-review-expert/README.md

@@ -0,0 +1,74 @@
+# Code Review Expert
+
+A comprehensive code review skill for AI agents. Performs structured reviews with a senior engineer lens, covering architecture, security, performance, and code quality.
+
+## Installation
+
+```bash
+npx skills add sanyuan0704/sanyuan-skills --path skills/code-review-expert
+```
+
+## Features
+
+- **SOLID Principles** - Detect SRP, OCP, LSP, ISP, DIP violations
+- **Security Scan** - XSS, injection, SSRF, race conditions, auth gaps, secrets leakage
+- **Performance** - N+1 queries, CPU hotspots, missing cache, memory issues
+- **Error Handling** - Swallowed exceptions, async errors, missing boundaries
+- **Boundary Conditions** - Null handling, empty collections, off-by-one, numeric limits
+- **Removal Planning** - Identify dead code with safe deletion plans
+
+## Usage
+
+After installation, simply run:
+
+```
+/code-review-expert
+```
+
+The skill will automatically review your current git changes.
+
+## Workflow
+
+1. **Preflight** - Scope changes via `git diff`
+2. **SOLID + Architecture** - Check design principles
+3. **Removal Candidates** - Find dead/unused code
+4. **Security Scan** - Vulnerability detection
+5. **Code Quality** - Error handling, performance, boundaries
+6. **Output** - Findings by severity (P0-P3)
+7. **Confirmation** - Ask user before implementing fixes
+
+## Severity Levels
+
+| Level | Name | Action |
+|-------|------|--------|
+| P0 | Critical | Must block merge |
+| P1 | High | Should fix before merge |
+| P2 | Medium | Fix or create follow-up |
+| P3 | Low | Optional improvement |
+
+## Structure
+
+```
+code-review-expert/
+├── SKILL.md                 # Main skill definition
+├── agents/
+│   └── agent.yaml           # Agent interface config
+└── references/
+    ├── solid-checklist.md   # SOLID smell prompts
+    ├── security-checklist.md    # Security & reliability
+    ├── code-quality-checklist.md # Error, perf, boundaries
+    └── removal-plan.md      # Deletion planning template
+```
+
+## References
+
+Each checklist provides detailed prompts and anti-patterns:
+
+- **solid-checklist.md** - SOLID violations + common code smells
+- **security-checklist.md** - OWASP risks, race conditions, crypto, supply chain
+- **code-quality-checklist.md** - Error handling, caching, N+1, null safety
+- **removal-plan.md** - Safe vs deferred deletion with rollback plans
+
+## License
+
+MIT

package/.agents/skills/code-review-expert/SKILL.md

@@ -0,0 +1,156 @@
+---
+name: code-review-expert
+description: "Expert code review of current git changes with a senior engineer lens. Detects SOLID violations, security risks, and proposes actionable improvements."
+---
+
+# Code Review Expert
+
+## Overview
+
+Perform a structured review of the current git changes with focus on SOLID, architecture, removal candidates, and security risks. Default to review-only output unless the user asks to implement changes.
+
+## Severity Levels
+
+| Level | Name | Description | Action |
+|-------|------|-------------|--------|
+| **P0** | Critical | Security vulnerability, data loss risk, correctness bug | Must block merge |
+| **P1** | High | Logic error, significant SOLID violation, performance regression | Should fix before merge |
+| **P2** | Medium | Code smell, maintainability concern, minor SOLID violation | Fix in this PR or create follow-up |
+| **P3** | Low | Style, naming, minor suggestion | Optional improvement |
+
+## Workflow
+
+### 1) Preflight context
+
+- Use `git status -sb`, `git diff --stat`, and `git diff` to scope changes.
+- If needed, use `rg` or `grep` to find related modules, usages, and contracts.
+- Identify entry points, ownership boundaries, and critical paths (auth, payments, data writes, network).
+
+**Edge cases:**
+- **No changes**: If `git diff` is empty, inform user and ask if they want to review staged changes or a specific commit range.
+- **Large diff (>500 lines)**: Summarize by file first, then review in batches by module/feature area.
+- **Mixed concerns**: Group findings by logical feature, not just file order.
+
+### 2) SOLID + architecture smells
+
+- Load `references/solid-checklist.md` for specific prompts.
+- Look for:
+  - **SRP**: Overloaded modules with unrelated responsibilities.
+  - **OCP**: Frequent edits to add behavior instead of extension points.
+  - **LSP**: Subclasses that break expectations or require type checks.
+  - **ISP**: Wide interfaces with unused methods.
+  - **DIP**: High-level logic tied to low-level implementations.
+- When you propose a refactor, explain *why* it improves cohesion/coupling and outline a minimal, safe split.
+- If refactor is non-trivial, propose an incremental plan instead of a large rewrite.
+
+### 3) Removal candidates + iteration plan
+
+- Load `references/removal-plan.md` for template.
+- Identify code that is unused, redundant, or feature-flagged off.
+- Distinguish **safe delete now** vs **defer with plan**.
+- Provide a follow-up plan with concrete steps and checkpoints (tests/metrics).
+
+### 4) Security and reliability scan
+
+- Load `references/security-checklist.md` for coverage.
+- Check for:
+  - XSS, injection (SQL/NoSQL/command), SSRF, path traversal
+  - AuthZ/AuthN gaps, missing tenancy checks
+  - Secret leakage or API keys in logs/env/files
+  - Rate limits, unbounded loops, CPU/memory hotspots
+  - Unsafe deserialization, weak crypto, insecure defaults
+  - **Race conditions**: concurrent access, check-then-act, TOCTOU, missing locks
+- Call out both **exploitability** and **impact**.
+
+### 5) Code quality scan
+
+- Load `references/code-quality-checklist.md` for coverage.
+- Check for:
+  - **Error handling**: swallowed exceptions, overly broad catch, missing error handling, async errors
+  - **Performance**: N+1 queries, CPU-intensive ops in hot paths, missing cache, unbounded memory
+  - **Boundary conditions**: null/undefined handling, empty collections, numeric boundaries, off-by-one
+- Flag issues that may cause silent failures or production incidents.
+
+### 6) Output format
+
+Structure your review as follows:
+
+```markdown
+## Code Review Summary
+
+**Files reviewed**: X files, Y lines changed
+**Overall assessment**: [APPROVE / REQUEST_CHANGES / COMMENT]
+
+---
+
+## Findings
+
+### P0 - Critical
+(none or list)
+
+### P1 - High
+1. **[file:line]** Brief title
+  - Description of issue
+  - Suggested fix
+
+### P2 - Medium
+2. (continue numbering across sections)
+  - ...
+
+### P3 - Low
+...
+
+---
+
+## Removal/Iteration Plan
+(if applicable)
+
+## Additional Suggestions
+(optional improvements, not blocking)
+```
+
+**Inline comments**: Use this format for file-specific findings:
+```
+::code-comment{file="path/to/file.ts" line="42" severity="P1"}
+Description of the issue and suggested fix.
+::
+```
+
+**Clean review**: If no issues found, explicitly state:
+- What was checked
+- Any areas not covered (e.g., "Did not verify database migrations")
+- Residual risks or recommended follow-up tests
+
+### 7) Next steps confirmation
+
+After presenting findings, ask user how to proceed:
+
+```markdown
+---
+
+## Next Steps
+
+I found X issues (P0: _, P1: _, P2: _, P3: _).
+
+**How would you like to proceed?**
+
+1. **Fix all** - I'll implement all suggested fixes
+2. **Fix P0/P1 only** - Address critical and high priority issues
+3. **Fix specific items** - Tell me which issues to fix
+4. **No changes** - Review complete, no implementation needed
+
+Please choose an option or provide specific instructions.
+```
+
+**Important**: Do NOT implement any changes until user explicitly confirms. This is a review-first workflow.
+
+## Resources
+
+### references/
+
+| File | Purpose |
+|------|---------|
+| `solid-checklist.md` | SOLID smell prompts and refactor heuristics |
+| `security-checklist.md` | Web/app security and runtime risk checklist |
+| `code-quality-checklist.md` | Error handling, performance, boundary conditions |
+| `removal-plan.md` | Template for deletion candidates and follow-up plan |

package/.agents/skills/code-review-expert/agents/agent.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: "Code Review Expert"
+  short_description: "Senior engineer code review: SOLID, security, performance, error handling"
+  default_prompt: "Review current git changes for SOLID violations, security risks, race conditions, error handling issues, performance problems, and boundary condition bugs."
+
+# Agent-agnostic skill - works with any LLM provider.
+# No provider-specific configuration required.

package/.agents/skills/code-review-expert/references/code-quality-checklist.md

@@ -0,0 +1,130 @@
+# Code Quality Checklist
+
+## Error Handling
+
+### Anti-patterns to Flag
+
+- **Swallowed exceptions**: Empty catch blocks or catch with only logging
+  ```javascript
+  try { ... } catch (e) { }  // Silent failure
+  try { ... } catch (e) { console.log(e) }  // Log and forget
+  ```
+- **Overly broad catch**: Catching `Exception`/`Error` base class instead of specific types
+- **Error information leakage**: Stack traces or internal details exposed to users
+- **Missing error handling**: No try-catch around fallible operations (I/O, network, parsing)
+- **Async error handling**: Unhandled promise rejections, missing `.catch()`, no error boundary
+
+### Best Practices to Check
+
+- [ ] Errors are caught at appropriate boundaries
+- [ ] Error messages are user-friendly (no internal details exposed)
+- [ ] Errors are logged with sufficient context for debugging
+- [ ] Async errors are properly propagated or handled
+- [ ] Fallback behavior is defined for recoverable errors
+- [ ] Critical errors trigger alerts/monitoring
+
+### Questions to Ask
+- "What happens when this operation fails?"
+- "Will the caller know something went wrong?"
+- "Is there enough context to debug this error?"
+
+---
+
+## Performance & Caching
+
+### CPU-Intensive Operations
+
+- **Expensive operations in hot paths**: Regex compilation, JSON parsing, crypto in loops
+- **Blocking main thread**: Sync I/O, heavy computation without worker/async
+- **Unnecessary recomputation**: Same calculation done multiple times
+- **Missing memoization**: Pure functions called repeatedly with same inputs
+
+### Database & I/O
+
+- **N+1 queries**: Loop that makes a query per item instead of batch
+  ```javascript
+  // Bad: N+1
+  for (const id of ids) {
+    const user = await db.query(`SELECT * FROM users WHERE id = ?`, id)
+  }
+  // Good: Batch
+  const users = await db.query(`SELECT * FROM users WHERE id IN (?)`, ids)
+  ```
+- **Missing indexes**: Queries on unindexed columns
+- **Over-fetching**: SELECT * when only few columns needed
+- **No pagination**: Loading entire dataset into memory
+
+### Caching Issues
+
+- **Missing cache for expensive operations**: Repeated API calls, DB queries, computations
+- **Cache without TTL**: Stale data served indefinitely
+- **Cache without invalidation strategy**: Data updated but cache not cleared
+- **Cache key collisions**: Insufficient key uniqueness
+- **Caching user-specific data globally**: Security/privacy issue
+
+### Memory
+
+- **Unbounded collections**: Arrays/maps that grow without limit
+- **Large object retention**: Holding references preventing GC
+- **String concatenation in loops**: Use StringBuilder/join instead
+- **Loading large files entirely**: Use streaming instead
+
+### Questions to Ask
+- "What's the time complexity of this operation?"
+- "How does this behave with 10x/100x data?"
+- "Is this result cacheable? Should it be?"
+- "Can this be batched instead of one-by-one?"
+
+---
+
+## Boundary Conditions
+
+### Null/Undefined Handling
+
+- **Missing null checks**: Accessing properties on potentially null objects
+- **Truthy/falsy confusion**: `if (value)` when `0` or `""` are valid
+- **Optional chaining overuse**: `a?.b?.c?.d` hiding structural issues
+- **Null vs undefined inconsistency**: Mixed usage without clear convention
+
+### Empty Collections
+
+- **Empty array not handled**: Code assumes array has items
+- **Empty object edge case**: `for...in` or `Object.keys` on empty object
+- **First/last element access**: `arr[0]` or `arr[arr.length-1]` without length check
+
+### Numeric Boundaries
+
+- **Division by zero**: Missing check before division
+- **Integer overflow**: Large numbers exceeding safe integer range
+- **Floating point comparison**: Using `===` instead of epsilon comparison
+- **Negative values**: Index or count that shouldn't be negative
+- **Off-by-one errors**: Loop bounds, array slicing, pagination
+
+### String Boundaries
+
+- **Empty string**: Not handled as edge case
+- **Whitespace-only string**: Passes truthy check but is effectively empty
+- **Very long strings**: No length limits causing memory/display issues
+- **Unicode edge cases**: Emoji, RTL text, combining characters
+
+### Common Patterns to Flag
+
+```javascript
+// Dangerous: no null check
+const name = user.profile.name
+
+// Dangerous: array access without check
+const first = items[0]
+
+// Dangerous: division without check
+const avg = total / count
+
+// Dangerous: truthy check excludes valid values
+if (value) { ... }  // fails for 0, "", false
+```
+
+### Questions to Ask
+- "What if this is null/undefined?"
+- "What if this collection is empty?"
+- "What's the valid range for this number?"
+- "What happens at the boundaries (0, -1, MAX_INT)?"

package/.agents/skills/code-review-expert/references/removal-plan.md

@@ -0,0 +1,52 @@
+# Removal and Iteration Plan Template
+
+## Priority Levels
+
+- [ ] **P0**: Immediate removal needed (security risk, significant cost, blocking other work)
+- [ ] **P1**: Remove in current sprint
+- [ ] **P2**: Backlog / next iteration
+
+---
+
+## Safe to Remove Now
+
+### Item: [Name/Description]
+
+| Field | Details |
+|-------|---------|
+| **Location** | `path/to/file.ts:line` |
+| **Rationale** | Why this should be removed |
+| **Evidence** | Unused (no references), dead feature flag, deprecated API |
+| **Impact** | None / Low - no active consumers |
+| **Deletion steps** | 1. Remove code 2. Remove tests 3. Remove config |
+| **Verification** | Run tests, check no runtime errors, monitor logs |
+
+---
+
+## Defer Removal (Plan Required)
+
+### Item: [Name/Description]
+
+| Field | Details |
+|-------|---------|
+| **Location** | `path/to/file.ts:line` |
+| **Why defer** | Active consumers, needs migration, stakeholder sign-off |
+| **Preconditions** | Feature flag off for 2 weeks, telemetry shows 0 usage |
+| **Breaking changes** | List any API/contract changes |
+| **Migration plan** | Steps for consumers to migrate |
+| **Timeline** | Target date or sprint |
+| **Owner** | Person/team responsible |
+| **Validation** | Metrics to confirm safe removal (error rates, usage counts) |
+| **Rollback plan** | How to restore if issues found |
+
+---
+
+## Checklist Before Removal
+
+- [ ] Searched codebase for all references (`rg`, `grep`)
+- [ ] Checked for dynamic/reflection-based usage
+- [ ] Verified no external consumers (APIs, SDKs, docs)
+- [ ] Feature flag telemetry reviewed (if applicable)
+- [ ] Tests updated/removed
+- [ ] Documentation updated
+- [ ] Team notified (if shared code)

package/.agents/skills/code-review-expert/references/security-checklist.md

@@ -0,0 +1,118 @@
+# Security and Reliability Checklist
+
+## Input/Output Safety
+
+- **XSS**: Unsafe HTML injection, `dangerouslySetInnerHTML`, unescaped templates, innerHTML assignments
+- **Injection**: SQL/NoSQL/command/GraphQL injection via string concatenation or template literals
+- **SSRF**: User-controlled URLs reaching internal services without allowlist validation
+- **Path traversal**: User input in file paths without sanitization (`../` attacks)
+- **Prototype pollution**: Unsafe object merging in JavaScript (`Object.assign`, spread with user input)
+
+## AuthN/AuthZ
+
+- Missing tenant or ownership checks for read/write operations
+- New endpoints without auth guards or RBAC enforcement
+- Trusting client-provided roles/flags/IDs
+- Broken access control (IDOR - Insecure Direct Object Reference)
+- Session fixation or weak session management
+
+## JWT & Token Security
+
+- Algorithm confusion attacks (accepting `none` or `HS256` when expecting `RS256`)
+- Weak or hardcoded secrets
+- Missing expiration (`exp`) or not validating it
+- Sensitive data in JWT payload (tokens are base64, not encrypted)
+- Not validating `iss` (issuer) or `aud` (audience)
+
+## Secrets and PII
+
+- API keys, tokens, or credentials in code/config/logs
+- Secrets in git history or environment variables exposed to client
+- Excessive logging of PII or sensitive payloads
+- Missing data masking in error messages
+
+## Supply Chain & Dependencies
+
+- Unpinned dependencies allowing malicious updates
+- Dependency confusion (private package name collision)
+- Importing from untrusted sources or CDNs without integrity checks
+- Outdated dependencies with known CVEs
+
+## CORS & Headers
+
+- Overly permissive CORS (`Access-Control-Allow-Origin: *` with credentials)
+- Missing security headers (CSP, X-Frame-Options, X-Content-Type-Options)
+- Exposed internal headers or stack traces
+
+## Runtime Risks
+
+- Unbounded loops, recursive calls, or large in-memory buffers
+- Missing timeouts, retries, or rate limiting on external calls
+- Blocking operations on request path (sync I/O in async context)
+- Resource exhaustion (file handles, connections, memory)
+- ReDoS (Regular Expression Denial of Service)
+
+## Cryptography
+
+- Weak algorithms (MD5, SHA1 for security purposes)
+- Hardcoded IVs or salts
+- Using encryption without authentication (ECB mode, no HMAC)
+- Insufficient key length
+
+## Race Conditions
+
+Race conditions are subtle bugs that cause intermittent failures and security vulnerabilities. Pay special attention to:
+
+### Shared State Access
+- Multiple threads/goroutines/async tasks accessing shared variables without synchronization
+- Global state or singletons modified concurrently
+- Lazy initialization without proper locking (double-checked locking issues)
+- Non-thread-safe collections used in concurrent context
+
+### Check-Then-Act (TOCTOU)
+- `if (exists) then use` patterns without atomic operations
+- `if (authorized) then perform` where authorization can change
+- File existence check followed by file operation
+- Balance check followed by deduction (financial operations)
+- Inventory check followed by order placement
+
+### Database Concurrency
+- Missing optimistic locking (`version` column, `updated_at` checks)
+- Missing pessimistic locking (`SELECT FOR UPDATE`)
+- Read-modify-write without transaction isolation
+- Counter increments without atomic operations (`UPDATE SET count = count + 1`)
+- Unique constraint violations in concurrent inserts
+
+### Distributed Systems
+- Missing distributed locks for shared resources
+- Leader election race conditions
+- Cache invalidation races (stale reads after writes)
+- Event ordering dependencies without proper sequencing
+- Split-brain scenarios in cluster operations
+
+### Common Patterns to Flag
+```
+# Dangerous patterns:
+if not exists(key):       # TOCTOU
+    create(key)
+
+value = get(key)          # Read-modify-write
+value += 1
+set(key, value)
+
+if user.balance >= amount:  # Check-then-act
+    user.balance -= amount
+```
+
+### Questions to Ask
+- "What happens if two requests hit this code simultaneously?"
+- "Is this operation atomic or can it be interrupted?"
+- "What shared state does this code access?"
+- "How does this behave under high concurrency?"
+
+## Data Integrity
+
+- Missing transactions, partial writes, or inconsistent state updates
+- Weak validation before persistence (type coercion issues)
+- Missing idempotency for retryable operations
+- Lost updates due to concurrent modifications

package/.agents/skills/code-review-expert/references/solid-checklist.md

@@ -0,0 +1,65 @@
+# SOLID Smell Prompts
+
+## SRP (Single Responsibility)
+
+- File owns unrelated concerns (e.g., HTTP + DB + domain rules in one file)
+- Large class/module with low cohesion or multiple reasons to change
+- Functions that orchestrate many unrelated steps
+- God objects that know too much about the system
+- **Ask**: "What is the single reason this module would change?"
+
+## OCP (Open/Closed)
+
+- Adding a new behavior requires editing many switch/if blocks
+- Feature growth requires modifying core logic rather than extending
+- No plugin/strategy/hook points for variation
+- **Ask**: "Can I add a new variant without touching existing code?"
+
+## LSP (Liskov Substitution)
+
+- Subclass checks for concrete type or throws for base method
+- Overridden methods weaken preconditions or strengthen postconditions
+- Subclass ignores or no-ops parent behavior
+- **Ask**: "Can I substitute any subclass without the caller knowing?"
+
+## ISP (Interface Segregation)
+
+- Interfaces with many methods, most unused by implementers
+- Callers depend on broad interfaces for narrow needs
+- Empty/stub implementations of interface methods
+- **Ask**: "Do all implementers use all methods?"
+
+## DIP (Dependency Inversion)
+
+- High-level logic depends on concrete IO, storage, or network types
+- Hard-coded implementations instead of abstractions or injection
+- Import chains that couple business logic to infrastructure
+- **Ask**: "Can I swap the implementation without changing business logic?"
+
+---
+
+## Common Code Smells (Beyond SOLID)
+
+| Smell | Signs |
+|-------|-------|
+| **Long method** | Function > 30 lines, multiple levels of nesting |
+| **Feature envy** | Method uses more data from another class than its own |
+| **Data clumps** | Same group of parameters passed together repeatedly |
+| **Primitive obsession** | Using strings/numbers instead of domain types |
+| **Shotgun surgery** | One change requires edits across many files |
+| **Divergent change** | One file changes for many unrelated reasons |
+| **Dead code** | Unreachable or never-called code |
+| **Speculative generality** | Abstractions for hypothetical future needs |
+| **Magic numbers/strings** | Hardcoded values without named constants |
+
+---
+
+## Refactor Heuristics
+
+1. **Split by responsibility, not by size** - A small file can still violate SRP
+2. **Introduce abstraction only when needed** - Wait for the second use case
+3. **Keep refactors incremental** - Isolate behavior before moving
+4. **Preserve behavior first** - Add tests before restructuring
+5. **Name things by intent** - If naming is hard, the abstraction might be wrong
+6. **Prefer composition over inheritance** - Inheritance creates tight coupling
+7. **Make illegal states unrepresentable** - Use types to enforce invariants

package/index-pc.html

@@ -390,8 +390,45 @@
       content: '';
       animation: loading-dots 1.2s steps(4, end) infinite;
     }
-    #terminal.transitioning #switch-overlay { display: flex;
+    #terminal.transitioning #switch-overlay { display: flex; }
+    #init-overlay {
+      display: none;
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: #0a0a0a;
+      color: #ccc;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-weight: 600;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 10;
+    }
+    #init-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
     }
+    #init-overlay.visible { display: flex; }
+    #reconnect-overlay {
+      display: none;
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(10, 10, 10, 0.85);
+      color: #f59e0b;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 600;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 10;
+    }
+    #reconnect-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
+    }
+    #reconnect-overlay.visible { display: flex; }
 
 
     /* 选择模式：原位文本层 */
@@ -1019,6 +1056,8 @@
       <div id="terminal-container">
         <div id="terminal" style="position:relative;">
           <div id="switch-overlay">正在切换</div>
+          <div id="init-overlay"></div>
+          <div id="reconnect-overlay">连接断开，正在重连</div>
           <div id="select-text-layer">
             <div id="select-hint">长按选择文本 · 点右上角 ✕ 返回终端</div>
             <pre id="select-text-pre"></pre>
@@ -1040,6 +1079,9 @@
       var fontSize = isMobile ? 11 : 13;
       var currentMode = 'claude';
       var isTransitioning = false;
+      var transitionEndTimer = null;
+      var waitingInitData = false;
+      var initDataTimer = null;
       var isBufferReplay = true; // 初始缓冲区回放中，不弹 toast
       var startupDialogShown = false;
 
@@ -1054,7 +1096,7 @@
           selectionBackground: '#264f78',
         },
         allowProposedApi: true,
-        scrollback: isIOS ? 200 : isMobile ? 1000 : 3000,
+        scrollback: isIOS ? 2000 : isMobile ? 5000 : 50000,
         smoothScrollDuration: 0,
         scrollOnUserInput: true,
       });
@@ -1592,12 +1634,18 @@
         modeSelect.value = mode;
         document.getElementById('mode-label').textContent = '';
         var label = mode === 'claude' ? 'Claude' : 'OpenCode';
-        term.write('\r\n  正在启动 ' + label + (sessionId ? '（恢复会话）' : '') + '...\r\n');
+        var initOv = document.getElementById('init-overlay');
+        initOv.textContent = '正在启动 ' + label + (sessionId ? '（恢复会话）' : '');
+        initOv.classList.add('visible');
         var msg = { type: 'init', mode: mode };
         if (sessionId) msg.sessionId = sessionId;
         ws.send(JSON.stringify(msg));
       }
 
+      function hideInitOverlay() {
+        document.getElementById('init-overlay').classList.remove('visible');
+      }
+
       function getTimeAgo(ts) {
         var diff = Date.now() - ts;
         var min = Math.floor(diff / 60000);
@@ -1615,16 +1663,16 @@
 
         ws.onopen = function() {
           isBufferReplay = true;
+          document.getElementById('reconnect-overlay').classList.remove('visible');
           resize();
           rebindTouchScroll();
-          setTimeout(function() { isBufferReplay = false; }, 500);
+          setTimeout(function() { isBufferReplay = false; }, 2000);
           // 不在这里初始化，等 state 消息判断是否需要弹对话框
         };
 
         ws.onclose = function() {
           ws = null;
-          term.reset();
-          term.write('\r\n  \x1b[33m连接断开，正在重连...\x1b[0m\r\n');
+          document.getElementById('reconnect-overlay').classList.add('visible');
           setTimeout(connect, 2000);
         };
 
@@ -1632,7 +1680,23 @@
           try {
             var msg = JSON.parse(e.data);
             if (msg.type === 'data') {
-              if (!isCreatingNewSession && !isTransitioning) {
+              if (isTransitioning) {
+                // 模式切换：TUI 渲染会发送一连串 data，debounce 等稳定后移除覆盖层
+                term.write(msg.data);
+                clearTimeout(transitionEndTimer);
+                transitionEndTimer = setTimeout(function() {
+                  terminalEl.classList.remove('transitioning');
+                  isTransitioning = false;
+                }, 2000);
+              } else if (waitingInitData) {
+                // 启动/恢复：同样 debounce 等 TUI 渲染完再隐藏启动覆盖层
+                throttledWrite(msg.data);
+                clearTimeout(initDataTimer);
+                initDataTimer = setTimeout(function() {
+                  hideInitOverlay();
+                  waitingInitData = false;
+                }, 2000);
+              } else if (!isCreatingNewSession) {
                 throttledWrite(msg.data);
               }
             }
@@ -1646,7 +1710,9 @@
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
-              endTransition(msg.mode);
+              // 更新模式但保留覆盖层，等首条 data 到达后再移除
+              currentMode = msg.mode;
+              modeSelect.value = msg.mode;
               if (msg.buffer) {
                 term.write(msg.buffer);
               }
@@ -1673,6 +1739,8 @@
               }
             }
             else if (msg.type === 'restored') {
+              // 不立即隐藏覆盖层，等 data debounce 后隐藏
+              waitingInitData = true;
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
@@ -1681,13 +1749,17 @@
               }
             }
             else if (msg.type === 'restore-error') {
+              hideInitOverlay();
               term.write('恢复失败: ' + msg.error + '\r\n');
             }
             else if (msg.type === 'started') {
+              // 不立即隐藏覆盖层，等 data debounce 后隐藏
+              waitingInitData = true;
               rebindTouchScroll();
               preloadData();
             }
             else if (msg.type === 'new-session-ok') {
+              waitingInitData = true;
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
@@ -1710,7 +1782,7 @@
           } else {
             cacheRestored = true;
           }
-        }, 800);
+        }, 2000);
       }
 
       window.addEventListener('resize', resize);
@@ -1879,7 +1951,7 @@
               setTimeout(function() {
                 sessions = sessions.filter(function(s) { return s.id !== sessionId; });
                 renderSessions();
-              }, 200);
+              }, 2000);
             } else {
               itemEl.style.opacity = '';
               itemEl.style.pointerEvents = '';
@@ -2079,7 +2151,7 @@
               itemEl.style.padding = '0 12px';
               itemEl.style.margin = '0';
               itemEl.style.opacity = '0';
-              setTimeout(function() { itemEl.remove(); }, 200);
+              setTimeout(function() { itemEl.remove(); }, 2000);
             } else {
               itemEl.style.opacity = '';
               itemEl.style.pointerEvents = '';

package/index.html

@@ -38,7 +38,6 @@
     /* 隐藏 xterm textarea 的闪烁光标 (cc-viewer TerminalPanel.module.css) */
     .xterm-helper-textarea { caret-color: transparent !important; }
 
-    /* 参考 cc-viewer 的 App.jsx 行 1319: 移动端容器使用 100vw/100vh */
     #layout {
       position: fixed;
       top: 0;
@@ -57,8 +56,7 @@
       background: #111;
       border-bottom: 1px solid #222;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       flex-shrink: 0;
       height: 40px;
@@ -94,8 +92,7 @@
 
     #session-history-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -129,8 +126,7 @@
 
     .session-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 8px;
       padding: 8px 12px;
       background: #1a1a1a;
@@ -214,8 +210,7 @@
       cursor: pointer;
       border-radius: 4px;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 3px;
       flex-shrink: 0;
     }
@@ -256,8 +251,7 @@
       cursor: pointer;
       border-radius: 50%;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       transition: all 0.15s;
       -webkit-tap-highlight-color: transparent;
@@ -302,8 +296,7 @@
 
     #claude-detail-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 10px 12px;
       background: #111;
       border-bottom: 1px solid #222;
@@ -356,8 +349,7 @@
     #mode-switcher {
       display: flex;
       gap: 4px;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
     }
 
     #mode-label {
@@ -410,8 +402,7 @@
       top: 0; left: 0; right: 0; bottom: 0;
       background: #0a0a0a;
       color: #ccc;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       font-size: 16px;
       font-family: -apple-system, BlinkMacSystemFont, sans-serif;
@@ -481,8 +472,7 @@
     }
     #msg-viewer-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 10px 14px;
       background: #111;
@@ -616,8 +606,7 @@
 
     #git-diff-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -641,8 +630,7 @@
 
     .git-diff-file-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 6px 12px;
       cursor: pointer;
       color: #ccc;
@@ -686,8 +674,7 @@
 
     .git-diff-content-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 10px;
       padding: 8px 12px;
       border-bottom: 1px solid #2a2a2a;
@@ -727,8 +714,7 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       gap: 12px;
       color: #333;
@@ -761,8 +747,7 @@
     #docs-bar.visible { display: flex; }
     #docs-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -782,8 +767,7 @@
     }
     .docs-file-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 8px 12px;
       cursor: pointer;
       color: #ccc;
@@ -829,8 +813,7 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       gap: 12px;
       color: #333;
@@ -1137,6 +1120,7 @@
       var fontSize = isMobile ? 11 : 13;
       var currentMode = 'claude';
       var isTransitioning = false;
+      var transitionEndTimer = null;
       var mobileInitSent = false;
 
       var term = new Terminal({
@@ -1153,13 +1137,14 @@
           selectionBackground: '#264f78',
         },
         allowProposedApi: true,
-        scrollback: isIOS ? 200 : isMobile ? 1000 : 3000,
+        scrollback: isIOS ? 2000 : isMobile ? 5000 : 50000,
         smoothScrollDuration: 0,
         scrollOnUserInput: true,
       });
 
       term.open(document.getElementById('terminal'));
 
+
       // Unicode 11 宽字符支持：box-drawing、CJK、emoji 等字符宽度精确计算
       if (window.Unicode11Addon) {
         try {
@@ -1326,6 +1311,7 @@
           var lineHeight = (newCellDims && newCellDims.height) || cellDims.height;
           var rows = Math.max(5, Math.min(Math.floor(availH / lineHeight), 100));
           term.resize(MOBILE_COLS, rows);
+          term.scrollToBottom();
           if (ws && ws.readyState === 1 && !isTransitioning) {
             ws.send(JSON.stringify({ type: 'resize', cols: MOBILE_COLS, rows: rows, mobile: true }));
           }
@@ -1696,7 +1682,14 @@
             var msg = JSON.parse(e.data);
             if (msg.type === 'data') {
               hideLoading();
-              if (!isCreatingNewSession && !isTransitioning) {
+              if (isTransitioning) {
+                term.write(msg.data);
+                clearTimeout(transitionEndTimer);
+                transitionEndTimer = setTimeout(function() {
+                  terminalEl.classList.remove('transitioning');
+                  isTransitioning = false;
+                }, 2000);
+              } else if (!isCreatingNewSession) {
                 throttledWrite(msg.data);
               }
             }
@@ -1752,7 +1745,8 @@
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
-              endTransition(msg.mode);
+              currentMode = msg.mode;
+              modeSelect.value = msg.mode;
               if (msg.buffer) {
                 term.write(msg.buffer);
               }
@@ -1807,7 +1801,7 @@
           } else {
             cacheRestored = true;
           }
-        }, 800);
+        }, 2000);
       }
 
       window.addEventListener('resize', resize);
@@ -2046,7 +2040,7 @@
               setTimeout(function() {
                 sessions = sessions.filter(function(s) { return s.id !== sessionId; });
                 renderSessions();
-              }, 200);
+              }, 2000);
             } else {
               itemEl.style.opacity = '';
               itemEl.style.pointerEvents = '';
@@ -2249,7 +2243,7 @@
               itemEl.style.padding = '0 12px';
               itemEl.style.margin = '0';
               itemEl.style.opacity = '0';
-              setTimeout(function() { itemEl.remove(); }, 200);
+              setTimeout(function() { itemEl.remove(); }, 2000);
             } else {
               itemEl.style.opacity = '';
               itemEl.style.pointerEvents = '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-opencode-viewer",
-  "version": "2.6.46",
+  "version": "2.6.48",
   "description": "A unified terminal viewer for Claude Code and OpenCode with seamless switching",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -201,6 +201,7 @@ function killProcessTree(proc) {
 
 // 清理孤儿进程（PPID=1 的 opencode/claude）
 function cleanupOrphanProcesses() {
+  const tc = Date.now();
   try {
     const myPid = process.pid;
     const orphans = execSync(
@@ -212,15 +213,23 @@ function cleanupOrphanProcesses() {
     }
     if (orphans.length > 0) LOG(`[cleanup] 清理孤儿进程: ${orphans.join(', ')}`);
   } catch {}
+  console.log(`[perf] cleanupOrphanProcesses: ${Date.now() - tc}ms`);
 }
 
 async function spawnProcess(mode, sessionId = null) {
+  const t0 = Date.now();
   const pty = await getPty();
+  console.log(`[perf] getPty: ${Date.now() - t0}ms`);
+
+  const t1 = Date.now();
   fixSpawnHelperPermissions();
+  console.log(`[perf] fixSpawnHelperPermissions: ${Date.now() - t1}ms`);
 
   let command, args = [];
   if (mode === 'claude') {
+    const t2 = Date.now();
     const claudePath = findCommand('claude');
+    console.log(`[perf] findCommand(claude): ${Date.now() - t2}ms`);
     if (claudePath.endsWith('.js')) {
       command = process.execPath;
       args = [claudePath];
@@ -233,7 +242,9 @@ async function spawnProcess(mode, sessionId = null) {
       LOG(`[claude] 恢复会话: ${sessionId}`);
     }
   } else {
+    const t2 = Date.now();
     command = findCommand('opencode');
+    console.log(`[perf] findCommand(opencode): ${Date.now() - t2}ms`);
     // 如果提供了 sessionId，添加 --session 参数
     if (sessionId) {
       args = ['--session', sessionId];
@@ -244,6 +255,7 @@ async function spawnProcess(mode, sessionId = null) {
   const spawnEnv = { ...process.env };
 
   // 恢复会话时，使用会话记录的工作目录
+  const t3 = Date.now();
   let spawnCwd = process.cwd();
   if (sessionId && mode === 'opencode') {
     try {
@@ -286,6 +298,9 @@ async function spawnProcess(mode, sessionId = null) {
     }
   }
 
+  console.log(`[perf] cwdLookup: ${Date.now() - t3}ms`);
+
+  const t4 = Date.now();
   const proc = pty.spawn(command, args, {
     name: 'xterm-256color',
     cols: lastPtyCols,
@@ -294,6 +309,9 @@ async function spawnProcess(mode, sessionId = null) {
     env: spawnEnv,
   });
 
+  console.log(`[perf] pty.spawn: ${Date.now() - t4}ms`);
+  console.log(`[perf] spawnProcess total: ${Date.now() - t0}ms`);
+
   proc.onData((data) => {
     // 忽略已被替换的旧进程输出
     if (currentProcess !== proc) return;
@@ -786,6 +804,7 @@ const requestHandler = async (req, res) => {
 
   // API: 获取最近的 OpenCode 和 Claude 会话（用于启动对话框）
   if (req.url === '/api/last-sessions') {
+    const tls = Date.now();
     res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
     let opencode = null, claude = null;
     // OpenCode: 从 SQLite 查最近会话
@@ -861,6 +880,7 @@ const requestHandler = async (req, res) => {
         }
       }
     } catch {}
+    console.log(`[perf] last-sessions: ${Date.now() - tls}ms`);
     res.end(JSON.stringify({ opencode, claude }));
     return;
   }

package/skills-lock.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "code-review-expert": {
+      "source": "sanyuan0704/sanyuan-skills",
+      "sourceType": "github",
+      "computedHash": "6c2fe31851a34e63e033257527eab04eea835ca1cf4c4276d1392a323e36e377"
+    }
+  }
+}