mirror of
https://github.com/NanmiCoder/claude-code-haha.git
synced 2026-10-10 11:53:10 +08:00
程序员阿江(Relakkes)
21efd1cf92
Tabs were hard to tell apart. The strip, the selected tab and the content below it sit within 1.05–1.10:1 of each other in all six themes, so the only thing marking selection was a 3px terracotta rule along the bottom — and nothing at all separated two idle tabs from each other. The obvious fix is Chrome's: darken the strip into a trough so the paper tab pops out of it. That is the wrong trade here. The strip is continuous with the sidebar, and darkening it turns the titlebar into a separate band running across the top of the window instead of the same surface the session list is already on. So the trough stays exactly --cc-s0, the fill contrast stays where it was, and the shape is carried by two new per-theme tokens instead: - --cc-tab-edge (1.35:1 against the trough) outlines the selected tab. Without it the 8px top corners do not resolve at all — a curve is drawn by a colour boundary, and on 素白 there is none. This was measured, not assumed: a radius-only build is indistinguishable from the flat strip. - --cc-tab-sep (1.22:1) is the hairline between two neighbouring idle tabs, and the same rule now divides the toolbar off (it was a full-height border-l, which read as a different kind of divider next to 16px ones). Neither can reuse --color-border or --color-outline. Both are calibrated against paper; on the trough they land at 1.12:1 (invisible) and 1.36–2.01 (a drawn box), in opposite directions between the light and ink families. Both new tokens go *lighter* than the trough on dark and ink-blue for the same structural reason --color-surface-hover was already banned here: their paper is dark enough that pure black is only ~1.26:1 against it, so there is no room downward. Hover gets the weaker of the two outlines rather than none, giving three legible tiers — no outline, hairline, full edge — because the same 1.05–1.10:1 that hides the selected tab's corners hides a hovered tab's. Two things had to go for the corners to mean anything. The terracotta rule and the strip's border-b both cut across the bottom edge that now has to run unbroken into the content the tab opens onto; a rounded tab sitting on a ruled line is just a clipped rectangle. Chat tabs also lose the chat_bubble glyph. #1123 asked for icons and got one on every kind including session, which is most of the strip, so the row filled with identical bubbles saying nothing the titles did not. The glyph now means "this tab is not a conversation". The slot animates its own width rather than collapsing outright, so a session starting up still does not jump its own title sideways — the bug the fixed slot was added for. Spacing moved to per-child margin for the same reason: flex gap is charged between children whatever their width. contrast.test.ts gains 18 assertions pinning both tokens per theme, including an upper bound on the hairline — too strong and the strip reads as a table of cells. The three TabBar guards written against the old square shape (no radius, 52px tab, the terracotta rule) are rewritten rather than deleted, since what they were protecting — this is a document tab, not a floating pill — still holds.
Claude Code Haha
English · 简体中文
Claude Code Haha is a desktop Claude Code workspace for macOS, Windows, and Linux: sessions, projects, branch / Worktree launch, workspace changes and diff review, permission approval, model setup, Computer Use, H5 remote access, IM integration, and scheduled tasks in one app.
Desktop Preview · Install · Highlights · More Docs · Sponsorship · User Group
Desktop Preview
The Claude Code Haha desktop app brings sessions, multi-project navigation, branch / Worktree controls, file changes, diff review, permission approval, model setup, and remote access into one graphical workspace for daily development beyond the terminal.
v0.5.0 shipped a full UI redesign — six colour themes that can follow your system's light/dark setting. All six shots below are from a real v0.5.0 build.
 Say it once, watch it finish Tool calls and every edit stay in the thread |
 See exactly what changed Syntax-highlighted diffs; you decide what lands |
 Verify on the spot Open your dev server inside the app |
 Six themes, follows the system Light and dark, six palettes in all |
 Missing a trick? Install it Source and safety status shown up front |
 Company while it works Dada, Huhu, Bubu and Huihui follow the task |
Install the Desktop App
- Download the macOS / Windows / Linux desktop installer from Releases.
- On first launch, configure your model provider, API key, and default model in Settings.
- Public macOS releases require signing and notarization. Draft or unsigned temporary builds may still need one-time manual approval. Unsigned Windows installers may show SmartScreen; click "More info" -> "Run anyway". See the desktop installation guide.
Run the CLI from Source
For users who want to debug the underlying CLI, server, or local development flow:
bun install
cp .env.example .env
./bin/claude-haha
See environment variables and CLI setup for more configuration options.
Desktop Highlights
- Multi-session workspace: tabs, project switching, terminal entry, and session history in one place, with a resizable sidebar.
- Branch / Worktree launch: choose a repository branch and decide whether to use the current working tree or an isolated Worktree.
- Review edits file by file: the workspace lists this turn's changes; open any file for a syntax-highlighted diff, or undo the whole turn.
- Five permission modes: from "ask every time" to "skip permissions" — risky commands, tool calls, and follow-up questions are all approved in the GUI.
- Bring your own model: sign in to Claude, ChatGPT, or Grok; use presets for DeepSeek, Kimi, Zhipu GLM and others; or point it at LM Studio and Ollama running locally.
- Six colour themes: white, paper, warm classic, celadon, ink night, and ink blue — optionally following your system's light/dark setting.
- Skill marketplace: discover, preview, and install third-party skills from ClawHub / SkillHub, with source and safety status shown up front.
- Session activity panel: track task progress, background tasks, SubAgents, and sources in one side panel.
- Computer Use: let the agent take screenshots, click, type, and control desktop apps after authorization.
- Desktop pets: Dada, Huhu, Bubu, and Huihui change what they do with the task at hand — or raise one of your own (off by default).
- H5 remote access: scan a QR code to continue the session in your phone browser; locking the screen won't kill a running task.
- IM integration: chat, switch projects, and approve actions through Telegram / Feishu / WeChat / DingTalk / WhatsApp.
- Scheduled tasks and usage stats: run planned tasks in their own sessions and track local token usage trends.
More Documentation
Full documentation site: https://cchaha.ai
| Section | Documents |
|---|---|
| Getting started | What this is · Download and install · Connect a model provider · Your first session · Troubleshooting |
| Desktop features | Feature overview · Computer Use · Desktop pets · Phone H5 and IM relay |
| IM integrations | Overview and pairing · Feishu · Telegram · WeChat · DingTalk · WhatsApp |
| CLI | Install and run · Command reference · Environment variables |
| Internals | Desktop architecture · Multi-agent system · Skills system · Memory system · Computer Use architecture · Local server and API · Channel system · Project structure · Contributing and quality gates |
Sponsorship & Partnership
This project is maintained in the author's spare time. Corporate or individual sponsorships are welcome to support ongoing development. Custom features, integrations, and business partnerships are also open for discussion.
| Sponsor | Description |
|---|---|
|
Thanks to TeamoRouter for sponsoring this project. TeamoRouter is an enterprise-grade Agentic LLM gateway for developers, AI teams, and businesses. Without any subscription, it lets you use Claude Code, Codex, Gemini CLI, and other popular AI agents through a single unified API, with API pricing at discounts of up to 90%. It aggregates hundreds of official model providers and trusted infrastructure partners — including OpenAI, Anthropic, Vertex, Azure, and AWS Bedrock — each verified for 100% Agent protocol compatibility, cache performance, and request traceability, delivering near-official TTFT, a 99.6% SLA, throughput up to 5,000 QPM, and industry-leading cache hit rates rather than reverse-engineered endpoints. It also offers centralized billing, team management, BYOK, smart routing, usage analytics, and dedicated support, and Teamo Desktop lets you use these AI agents with one-click setup. New users who register through this link receive 10% off their first top-up. |
📧 Contact: relakkes@gmail.com
User Group
Scan the QR code below to join the cc-haha user group on Feishu (Lark) — the conversation there is mostly in Chinese. For questions and bug reports in English, Issues is the better place.
☕ Buy Me a Coffee
If this project helps you, consider buying me a coffee — every bit of support keeps this project going ❤️
 WeChat Pay |
 Alipay |
Buy Me a Coffee |
Tech Stack
| Category | Technology |
|---|---|
| Language | TypeScript |
| Desktop app | Electron |
| Desktop UI | React + Vite |
| Local runtime | Bun |
| Terminal UI | React + Ink |
| CLI parsing | Commander.js |
| API | Anthropic SDK |
| Protocols | MCP, LSP |
Acknowledgements
Thanks to the following open-source projects and community practices for reference and inspiration:
- React: frontend engineering and component-based UI ecosystem.
- Electron: cross-platform desktop app capabilities and engineering practices.
- cc-switch: reference for model provider configuration.
- LINUX DO: a new ideal developer community.
⭐ Star History
If this project helps you, please support it with a ⭐ Star so more people can discover Claude Code Haha.