Pinned
redakt · ~/Dev
Claude Code desktop app scaffolding
iOS onboarding flow redesign
Native iOS app for Redakt
Inbox switching and Gmail token persistence
Railway API token config and merge
solvay
Platform UI/UX improvements4
Add multiple instances of a Claude agent2
Fix the console's teach flow gaps
Favicon and OG metadata overhaul
Ship the Agent card skill/playbook
Recent pull requests overview

Claude Code desktop app scaffolding
Hey, so this is a website to market myself. During my journey to looking into a full-time job, and what I'm doing is to basically recreating some of the popular products I like and then trying to add different things on my own to their actual prototype, so then I can just record a video and do a walkthrough of it . We build some stuff around superlogical Rex application, but now I want to start scaffolding the Claude Code desktop app. We still gonna borrow the macOS OS system and we're just gonna create a Claude Code application. What I want you to do is to actually record and get screenshots from my actual macOS so that you can see like and get like the Claude Code doc icon and then this aesthetics of the desktop app, and using the pixel perfect skill . We're gonna try and replicate as best as we can so that we can start working on those

The macOS shell and Rex live in /Users/alan/Dev/alanisavailable, not this Redakt worktree — I’ll work there. Let me check its state and the Claude app on this Mac.

Got the real dock icon straight from the app bundle (system-rendered, not a screenshot crop). Now the window itself.

3 hours ago
Now I want you to start interacting with the app and start opening menus, panels, items, and to see what their interactions are, and then you will replicate it here in our demo.

The recording covers a lot of states. From the overview I can pick out:

  • Composer: the + attach menu (with its Connectors and Plugins submenus), the model picker with its Effort submenu, the permission-mode picker, and the context-usage popover.
  • Header: the session details panel, the Terminal, Diff, Browser and Files panels, and the More (⋮) menu.
  • Sidebar: the More menu, the account menu, and the session title menu with its submenus.

Menu specs from the frame (pt):

  • Surface: fill #1d1d1d, 1pt border #2f2f2f, corner radius about 10.
  • Rows: 24pt pitch, 4pt inset; the hover row is #2b2b2b.
  • Submenu: opens 2pt to the right of its parent. Its toggles are 26pt wide, blue #246dd1.

Found the bug: Popover’s own relative class overrides my absolute, causing the model chip to overlap “Bypass permissions” in the footer. Fixing that plus the hover targets in my capture script.

Each menu from your recording next to the replica. First sheet: the composer’s menus. Second: the account menu and the session details panel.

The new code is popover.tsx (the shared menu pieces), menus.tsx and session-panel.tsx, all in src/products/claude/components/claude-code/. I’ve proposed the panels as Build Claude replica’s Terminal/Diff/Browser/Files panels.

1 hour ago
Okay, great. I need you to mimic the borders of the window, right? Assuming that we have some sort of glassy style. In this case, it's not really glassy because the app doesn't have transparency, but the borders, right? And the shadow of the window matters here.

The reference capture with shadow has the shadow in its alpha channel, so I can read the shadow’s falloff directly. Profiling the edges.

The window draws its own box-shadow, so I’ll keep the outline and drop shadow there, and draw the inner rim as an overlay on top of the window’s content, where the sidebar can’t cover it.

Window edge and shadow over white so you can see the shadow. Then the replica on the desktop.

The window’s border and shadow now match the real Claude window. You’re right that it isn’t glass. The edge is built from three layers:

  • Outer line: a thin black outline (0.5pt, 93%) around the window.
  • Inner rim: a 1pt line of white at 10% just inside the edge, the same on all four sides.
  • Shadow: cast downward. It reaches about 16pt above the window, 28pt to the sides and 34pt below.

The values live in --cc-window-shadow and --cc-window-rim in src/products/claude/styles.css, and the rim overlay is in claude-window.tsx.

12 minutes ago
I just recorded another video that is on desktop, and it's basically showcasing all the interactions and the design in terms of the conversation renderer. Which I think we need to make it more rich with more like variation of content and different components.

The recording scrolls through this very conversation and opens things along the way. Measuring each component at full resolution.

  • Extract frames from the new recording
  • Catalog every transcript component
  • Measure each component
  • Build the components and a richer fixture
  • Compare against frames and fix
Thinking142.6k tokens
Apple
  • Finder
  • File
  • Edit
  • View
  • Go
  • Window
  • Help
Fast User SwitchingInput: U.S.Now PlayingControl Center
  • 1