mirror of
https://github.com/NanmiCoder/cc-haha
synced 2026-07-31 16:33:34 +08:00
8eba29bdd4
Three things about the left column, all reported from the same screenshot. The brand mark beside the wordmark was clutter. Expanded, the sidebar already says "Claude Code Haha" in the headline face, and the 32px seal next to it repeats what the words carry. Removing it outright emptied the header on the 72px rail, though — the copy there is width-clamped to zero by `.sidebar-copy--hidden`, so nothing was left to identify the app. The mark now renders only when collapsed, at `sm`: two C's and the seal bar, without the cursor arrow that reads as a stray orange wedge at that size. BrandSeal already sheds parts as it shrinks, so this is the size ladder doing its job rather than a new variant. The settings rail was 260px for a column whose longest label is two words. It is now 220px. 200px was the first choice and it was wrong: measured in a real browser against the live stylesheet, the Japanese "コンピューター操作" needs 122px of text box and 200px leaves 115px, so it truncated. The threshold sits at 210px; 220px keeps ten pixels of headroom over the worst locale. The sidebar itself is now resizable. An 8px handle on its right edge drives the width between 240 and 480px, persisted to localStorage, with a double click back to 300 and arrow-key steps for the keyboard. Dragging left past 240 pins there until the pointer crosses 180, which collapses to the rail; coming back out past 200 re-opens it. The 20px gap between those two thresholds is hysteresis — with one boundary the sidebar flickers open and closed on any tremor of the hand. A drag that ends in a collapse deliberately does not commit its width, so re-opening from the toggle restores the size the user chose rather than whatever value the pointer happened to sweep through. The live width travels as a CSS variable written imperatively onto the shell, never through React state. Sidebar re-renders during a streaming turn would otherwise land between drag frames and fight the pointer, which is the failure that made the pet animation stutter. The store is written once, when the drag settles. That variable exposed a bug the unit tests could not see. `#sidebar-shell` sits behind AppShell's startup gate, so it mounts a render later than the hook. With a plain object ref, `shellRef.current` is still null on the single pass the width effect ever runs, and because neither dependency changes afterwards the effect never fires again — the remembered width never reaches the DOM and every launch silently falls back to the stylesheet's 300px. Only visible by loading the real app: the harness in a test mounts the shell and the hook together. Fixed with a callback ref, and `useSidebarResize.test.tsx` now models the gate; that case was confirmed to fail against the object-ref version. Verified in a browser against the dev server: drag 300→420 persists as "420", crossing 150 settles the shell at the 72px rail while localStorage still holds the chosen width, and the truncation thresholds above were measured by substituting each locale's longest label into a live tab.
Claude Code Haha
A Claude Code build repaired from the source leaked from Anthropic's npm registry on 2026-03-31. Claude Code Haha is now primarily a desktop Claude Code workspace for macOS, Windows, and Linux: sessions, projects, branch / Worktree launch, right-side file changes, code diffs, permission review, provider setup, Computer Use, H5 remote access, IM integration, and scheduled tasks in one app.
Desktop Preview · Install · Highlights · Sponsorship · More Docs
Desktop Preview
The Claude Code Haha desktop app brings sessions, multi-project navigation, branch / Worktree controls, right-side file changes, code diffs, permission review, provider setup, and remote access into one graphical workspace for daily development flows beyond the terminal.
 Desktop Workspace |
 Right-side Changes & Worktree |
 Code Editing & Diff View |
 Permission Review & AI Questions |
 H5 Remote Access |
 Token Usage |
 Computer Use |
 Scheduled Tasks |
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 global usage for more configuration options.
Desktop Highlights
- Multi-session workspace: tabs, project switching, terminal entry, and session history in one place.
- Branch / Worktree launch: choose a repository branch and decide whether to use the current working tree or an isolated Worktree.
- Right-side file changes: review changed files, added/removed lines, and current workspace state while chatting.
- Visual code changes: inspect edits, file writes, and diffs directly in the desktop app.
- Permission review: approve risky commands, tool calls, and model follow-up questions in the GUI.
- Multi-provider setup: configure Anthropic-compatible APIs, third-party models, WebSearch fallback, and local options.
- Skill Marketplace: discover, preview, install, and manage third-party skills from ClawHub / SkillHub in the desktop app.
- Session Activity Panel: review tasks, background tasks, SubAgents, team activity, and sources in one side panel.
- Computer Use: let the agent take screenshots, click, type, and control desktop apps after authorization.
- H5 remote access: open the current desktop session from a phone or another device with a one-time token.
- IM integration: chat, switch projects, and approve actions through Telegram / Feishu / WeChat / DingTalk.
- Scheduled tasks and usage stats: create planned tasks and track local token usage trends.
More Documentation
| Document | Description |
|---|---|
| Environment Variables | Full env var reference and configuration methods |
| Third-Party Models | Using OpenAI / DeepSeek / Ollama and other non-Anthropic models |
| Contributing | Local tests, live model baselines, PR gates, and release gates |
| Memory System | Cross-session persistent memory usage and implementation |
| Multi-Agent System | Agent orchestration, parallel tasks and Teams collaboration |
| Skills System | Extensible capability plugins, custom workflows and conditional activation |
| IM Integration | Remote chat, project switching, and permission approval via Telegram / Feishu / WeChat / DingTalk |
| Computer Use | Desktop control (screenshots, mouse, keyboard) — Architecture |
| Desktop App | Electron + React GUI client — Quick Start | Architecture | Installation |
| Global Usage | Run claude-haha from any directory |
| FAQ | Common error troubleshooting |
| Source Fixes | Fixes compared with the original leaked source |
| Project Structure | Code directory structure |
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 |
|---|---|
 接口AI |
Thanks to JieKou AI for sponsoring this project. JieKou AI provides official model resources with stable, high-performance API access. Subscription bundles are priced at 20% off the official rate; new users who register through this link and bind GitHub can claim a $3 coupon. |
|
Thanks to ShengSuanYun for sponsoring this project. ShengSuanYun is an industrial-grade AI task parallel execution platform for AI Native Teams, aggregating Claude, ChatGPT, Gemini, and other LLM, image, and video model capacity through direct, non-reverse-engineered access. Its platform SLA reaches 99.7%, with service status available online. It also supports dedicated enterprise gateways, cost and permission controls, smart routing, security protection, BYOK, usage-based billing, upcoming tokens plans, and invoicing. New users registering through this link can receive 10 yuan in model credits plus a 10% first top-up bonus. |
|
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
☕ 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 |
Thanks
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.
⭐ Star History
If this project helps you, please support it with a ⭐ Star so more people can discover Claude Code Haha.
Disclaimer
This repository is based on the Claude Code source leaked from the Anthropic npm registry on 2026-03-31. All original source code copyrights belong to Anthropic. It is provided for learning and research purposes only.