project-overview

An overview of cc-office, a web client for the Claude Code command-line tool, including its client, server, real-time connection, and protocol structure.

In plain words
What is it for?
Use it to understand the project architecture, locate client and server responsibilities, and check which parts of the Claude Code extension protocol are implemented.
Why use it?
It separates features that exist now from longer-term ideas, helping developers make decisions based on the current system.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/recca0120/code-quest/project-overview
Any agent
npx skills add recca0120/code-quest --skill project-overview
Clone the repo
git clone --depth 1 https://github.com/recca0120/code-quest

Made for: Claude Code, Codex.

Per session 59 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,532 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00059 $0.01532
Opus 5 $0.00030 $0.00766
Sonnet 5 $0.00012 $0.00306
Haiku 4.5 $0.00006 $0.00153

Measured 3d ago against content hash 977730a8904d, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

project-overview scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Runs shell commandslowCapability

Expected in a hook, worth knowing in a rule or an instructions file.

│ child_process
.claude/skills/project-overview/SKILL.md · 111 lines

How it starts

The opening of the file, as written. The whole thing — 111 lines — stays where its author put it; the contents beside it link to each section on GitHub.

cc-office — 專案總覽

TL;DR

當下:cc-office 是 Claude Code CLI 的 web 客戶端,對齊官方 VS Code extension 的 protocol — ChatPanel / PermissionModePicker / SessionContext / Storybook 覆蓋、design tokens、Tailwind scale 等。

長期願景(roadmap):把 Claude Code 的使用體驗包裝成 RPG 遊戲(Code Quest / CodeLand),此願景目前尚未實作,相關 skill(battle-managementmap-system)描述的是目標,不是現況。

做決策時以當下 client 為準;roadmap 內容當 reference,不當 spec 套用。


當前架構(已實作)

┌──────────────────────────────────────────┐
│  Client (apps/web)                │  ← React + Vite
│  - ChatPanel / Permission UI             │
│  - SessionContext / ChannelProvider      │
│  - Storybook stories, Tailwind v4 tokens │
└──────────────────┬───────────────────────┘
                   │ WebSocket /ws
┌──────────────────▼───────────────────────┐
│  Server (apps/server)                │  ← Node + Inversify
│  - WsTransport + middleware pipeline     │
│  - socket handlers, ChannelManager       │
│  - SessionStore (Drizzle / SQLite)       │
│  - 對齊 Claude Code extension protocol   │
└──────────────────┬───────────────────────┘
                   │ WebSocket /summoner (RPC)
┌──────────────────▼───────────────────────┐
│  Summoner (apps/summoner)            │  ← 獨立 process,本地端執行
│  - Agent: 接收 server RPC 指令           │
│  - ChildProcessProvider (spawn CLI)      │
│  - LocalFilesystemService / LocalGitService │
│  - createConnectionLoop 自動重連          │
└──────────────────┬───────────────────────┘
                   │ child_process
┌──────────────────▼───────────────────────┐
│  Claude / Gemini CLI                     │
└──────────────────────────────────────────┘

部署模式

Server 可部署在雲端或遠端主機,Summoner 在本地端獨立執行:

# 1. 啟動 server(遠端)
pnpm --filter server start

# 2. 本地跑 summoner,連回 server
pnpm --filter @code-quest/summoner start --server <url> --token <token>

# 3. 瀏覽器開 client

Summoner 負責所有本地操作(檔案讀寫、git、spawn CLI),server 只做路由和狀態管理。

Packages

Package 職責
apps/web React 19 UI,WebSocket 連線,Storybook,Tailwind v4
apps/server Express + WsTransport,DI container,session 持久化
apps/summoner 獨立 agent process — ws client 連回 server,本地執行 CLI / fs / git
packages/schemas 跨 package 的型別、zod schema、service interface
packages/transport 同構 WebSocket 傳輸(WsTransport, Envelope, Pipeline, resumable socket)
packages/broadcaster DataSource / CachedDataSource / Broadcaster — push snapshot 給 summoner agent
packages/watch WatchService 介面,LocalWatchService(chokidar),RemoteWatchService(RPC)
packages/filesystem LocalFilesystemService / RemoteFilesystemService
packages/git LocalGitService / RemoteGitService
packages/openspec LocalOpenspecService / OpenspecService 介面
packages/diff-file LocalDiffFileService / DiffFileService 介面
packages/utils 共用工具(mime type、log config、name validator)
packages/db-schema Drizzle ORM table 定義(SQLite + MySQL)
packages/test-kit 共用 test fake 和 segment builder

Read the full file on GitHub · 111 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 111 lines · 59 tokens per session scan A 977730a8904d

Subscribe to this mod's changes

project-overview is a skill published in the GitHub repository recca0120/code-quest (11 stars, last pushed 2mo ago), licensed MIT. It adds 59 tokens to every session and 1,532 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 1 finding (runs shell commands). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.

obra/superpowers · 21 tokens

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

obra/superpowers · 37 tokens

auto-perf-optimize

Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.

microsoft/vscode · 62 tokens

chat-perf

Run chat perf benchmarks and memory leak checks against the local dev build or any published VS Code version. Use when investigating chat rendering regressions, validating perf-sensitive changes to chat UI, or checking for memory leaks in the chat response pipeline.

microsoft/vscode · 51 tokens

chat-pet-sprite-creation

Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.

microsoft/vscode · 53 tokens

cpu-profile-analysis

Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…

microsoft/vscode · 71 tokens