claude-super-sidebar

Overview

Claude Super Sidebar brings the main agent, subagent relationships, execution details, and the current conversation’s work steps into one panel. Claude Code uses a native plugin pane; standalone Codex CLI/App uses a read-only local session dashboard. Neither requires a frontend build.

The repository and product are Claude Super Sidebar (claude-super-sidebar). The native plugin retains the ID team-panel because the host reserves the claude- prefix. The Claude plugin ID is team-panel, with a native pane titled 状态 · Status. The Codex page is titled 状态 status, and its team section is 团队面板 Team panel. Each adapter uses its host's own data source; task summaries require no additional model call.

Preview

Illustrative layout with sample data, not a runtime screenshot. The single column shows agent relationships, a stage-grouped task flow, and a preferences container. Container colors (white, beige, black) apply to the cards only; the surrounding page background stays unchanged. Actual rendering differs between the Claude native pane and Codex browser panel.

Features

• Agent relationships — main agent and subagents in a unified tree, with directional connectors and details that expand in place.
• Execution status — colored running, waiting, completed, and failed states. Claude shows active elapsed time; Codex shows recorded time without inferring process liveness.
• Agent details — model, mode, role, observed token usage, available context usage, elapsed time, and tool-call count.
• Conversation task flow — Both adapters group observed operations into work stages, use concise action titles, and show bounded operation details on expansion. Results remain separate from the stage description; failures and missing results are preserved.
• Per-request scope — each new user request clears the previous flow; tool results preserve the current round. Up to 30 recent steps are shown.
• Plan display — Claude extracts observable plan text. Codex displays successfully submitted update_plan steps; failed updates preserve the previous plan.
• Execution and verification — “Operations completed” only describes tool execution. Explicit verification conclusions retain their conversation evidence and are labeled as assistant-reported; an exit code of zero never proves product behavior.
• Container colors — white, beige, and black apply to cards and preferences; the surrounding page background stays unchanged. Authored controls support Chinese and English.
• Local parsing — deriving the flow requires no additional LLM call.

Requirements

The following requirements apply to the Claude plugin. The Codex dashboard only requires Node.js 22.18+ and locally persisted Codex sessions.

• A Claude Desktop Code host that exposes the native hook-module and pane APIs.
• The matching Claude Code CLI for plugin installation.
• A stable local copy of this repository.

Developed against Claude Code engine 2.1.299, using an early-access plugin API. The host must support hook modules, claude-code imports, and native ui.render panes. Availability may differ between distributions and versions.

Installation

Claude Desktop Code

Download or clone the repository, then run this from its root:

claude plugin install team-panel --marketplace . --scope user

Verify that team-panel@team-panel-local has scope user and enabled: true:

claude plugin list --json

If it is installed but disabled:

claude plugin enable team-panel@team-panel-local

Start a new Code session to load the plugin. User scope makes it available across projects for the current user. Keep the repository at its installation location: the verified local installation reads from the source folder.

If claude is not on PATH, invoke your host’s matching Claude Code executable by its full path. Project overrides and organization policies may affect plugin loading.

Usage

These controls apply to the Claude native plugin. See Codex configuration for the local dashboard and conversation binding.

The plugin attempts to open 状态 · Status on session startup. Type /team-panel in the conversation input to reopen it.

Use 展开 / 收起 to expand or collapse an agent. Use 刷新 to refresh immediately; the pane also refreshes every two seconds.

Task-flow arrows indicate chronological execution. A new user request starts a fresh flow automatically, without task-management controls.

Codex configuration

Codex model in a Claude host

If your Claude Desktop deployment offers a Codex model, follow the Claude installation above and select that model in the host’s model picker. No Codex-specific configuration file is required: the Claude host supplies session events and the native pane API.

Claude Super Sidebar does not add models or configure model providers.

Standalone Codex CLI or App

The read-only local session dashboard supports standalone Codex. From this repository:

npm run codex -- --cwd "/absolute/path/to/your/project"

Open the local panel, or ask Codex App to open that URL in its browser sidebar. No npm install, API key, or Codex configuration changes are required. Without --cwd, the panel observes the process working directory.

node codex/server.mjs --cwd "/path/to/project" --port 4318 --codex-home "/path/to/codex/data"

The panel incrementally reads local JSONL files under CODEX_HOME/sessions (default ~/.codex/sessions) every two seconds. Each panel stays bound to one conversation and its descendants, showing the latest turn's 30 most recent work steps, successfully submitted plan, and observed usage. Summaries come from public progress messages; wrapper names such as exec / js are hidden, with human-readable operation titles as fallbacks. The session picker, project path, task-flow explanation and refresh-mechanism footer are omitted. Stop with Ctrl+C.

Starting from Codex uses CODEX_THREAD_ID automatically. Alternatively pass --thread "full-thread-id" or open http://127.0.0.1:4317/?thread=full-thread-id. Without a binding, the panel initially pins the most recent local conversation and never switches as other conversations change.

npm run codex -- --cwd "/absolute/path/to/project" --thread "full-thread-id"

When the server is already running, open another conversation with its own ?thread=... URL. The URL binding overrides the server default; all conversations remain limited to the project path chosen at server startup.

This is a companion browser UI, not a Claude ui.render plugin inside Codex, and it does not drive conversations. The local rollout format is not a stable public API. Compatibility was checked with Codex CLI 0.162.1 and this machine's App session records. Ephemeral, remote, archived, and unpersisted sessions are excluded; abnormal exits can leave the last observed state. See Codex adapter details.

How it works

Claude Code session
  ├─ Agent / turn / tool events ──→ Agent status and usage
  └─ Conversation transcript ─────→ Stage-grouped work steps
                                      │
                              Session-scoped state
                                      │
                            Native Status pane (single column)
                            ├─ Agent relationships
                            ├─ Task flow (stages, operations, verification)
                            └─ Preferences (container colors, version)

The manifest loads hooks/register.tsx through `hook