Developer ToolsmacOS · personal

A terminal that’s a support character, not the main event.

SideNook turns a macOS terminal into an ambient companion: fast when you need it, quiet when you don’t. Designed to stay out of the way.

v1.0 · April 23, 2026Self-managed, designed, and shipped · designed + built
Role
Product Designer + Builder
Duration
Concept → v1.0 · April 2026
Team
Self-managed, designed, and shipped
Tools
SwiftUIClaudeClaudeClaude CodeClaude CodeFigmaFigmaCursorCursorGitHubGitHub

Why this product exists

A terminal that stays out of the way — until you need it.

In AI-assisted workflows — Claude Code, Cursor, shell agents alongside Figma, Xcode, a browser — you alt-tab to a terminal dozens of times a day. Full windows eat screen space. No terminal was designed to be ambient.

SideNook is that terminal. Always there, never in the way.Inspired by the iOS volume HUD — same surfacing-when-needed, vanishing-when-not principle.

macOS TerminalSideNook

Fig. 01 — macOS terminal vs. SideNook v1.0. One you tolerate. One that feels designed for you.

Problem 01

Constant context-switching

Alt-tabbing breaks flow. Full terminal windows steal space.

Problem 02

Desktop-bound

Terminals assume a stationary setup. They don't follow you.

Problem 03

No ambient mode exists

Every terminal demands attention. None were designed to be secondary.

Process

Three phases. The animation came before the terminal — on purpose.

01 · Phase 1

Validate the feel before the function.

First milestone: the animation with no terminal behind it — just the pill, the spring, the collapse. A sluggish animation would’ve undermined the promise from the first interaction. Spring parameters (stiffness 280, damping 22) were iterated in Figma first, then tuned in code. The hit area is 14pt — wider than the visible 6pt pill — so the interaction catches without requiring precision.

Before · early conceptTop-bar layout, single-row tabs.
SideNook · expanded panel
~/portfolio×
claude-code×
sidenook · build×
~/portfolio$npm run dev
▲ Next.js 16.0.1
- Local: http://localhost:3000
- Network: http://192.168.1.24:3000
✓ Ready in 1.2s
~/portfolio$git status
On branch main
Changes not staged for commit:
modified: src/app/work/sidenook/page.tsx
modified: src/components/case-study/SideNookMock.tsx
~/portfolio$
Collapsed · 6pt
Expanded · spring
After · v1.0 shippedLeft-rail layout, vertical tab list, CL Notes + Help footer.
SideNook · expanded panel · v1.0
Claude Code×
CL Notes30/100
Command Line Help
SideNook v1.0
Claude Code v2.1.117
Opus 4.7 (1M context) with med…
Claude Max
/
? for shortcutsmedium · /effortIn TerminalSession.swift
Fig. 01 — The layout changed the product. Vertical tabs gave room for features the top-bar concept never had.

Status Indicator

A subtle indicator. A surprisingly hard problem.

A subtle dot shows connection status, running processes, and available updates — visible even when fully collapsed.

  • Live connection status for SSH and local sessions
  • Yellow pulse when a process pauses waiting for input
  • Panel visibility and auto-hide state at a glance

Why: Nothing blocks silently. That principle made the status indicator the hardest feature. The states looked simple on paper; making them reliable was not.

02 · Phase 2

Terminal backend with invisible focus handoff.

Focus routes to the terminal on expand, back to your app on collapse. Making that handoff invisible and reliable was the hardest design + engineering problem in the project. Users will never notice it — and that’s the point.

CL Notes

A notepad that lives where your terminal is.

A persistent monospaced notepad built into the panel. Jot commands without leaving your terminal.

  • Line-number gutter, up to 100 lines
  • Inline drawer, popover, or full tab
  • Auto-saved on every change

Why: When Claude Code generates a command you’ll reuse, you shouldn’t need another app to save it.

Command Line Help

A command reference you never have to go search for.

A searchable command reference from a markdown file. Click any row to run it in the active terminal.

  • Real-time filter as you type
  • Resizable drawer — 80 to 384pt
  • Click-to-send to active terminal

Why: Claude Code generates commands I don’t know yet. Googling them breaks flow. A local reference keeps me in the terminal.

03 · Phase 3

Interactive features that share one mental model.

Drag to any edge (panel adapts geometry automatically), multi-tab, resize handles, pin-to-stay. A panel dragged to the right edge and pinned open while resizing is still one mental model. Everything composes; nothing surprises.

Multitask

Split views. Independent sessions. One panel.

Run multiple terminal sessions side by side. Watch logs, edit configs, run commands without juggling windows.

  • Vertical and horizontal split panes
  • Independent shell sessions per pane
  • Drag to resize — keyboard shortcuts for quick-switch

Why: Running Claude Code, watching builds, editing configs — one session isn’t enough. Split panes keep context without spawning more windows.

Personalize

Every visual element is tunable. Light and dark are both first-class.

Curated themes or custom color palettes. Adjustable opacity, blur, and font controls — every visual element is tunable.

  • Curated light and dark themes — independent ANSI palettes
  • Custom accent color with live preview
  • Adjustable panel opacity, blur, and font controls

Why: Coordinating SideNook’s accents with Claude Code’s own color system — across both appearances — required a full token architecture. No hex values in any component.

Scope growth

The original plan called for 9 features. By ship day, 14 made it in.

Scope grew organically as each phase revealed the next. Features weren’t added from a wishlist — they earned their place through use. The PRD was a starting point, not a contract.

Outcomes

  • 01

    v1.0 shipped April 23, 2026 — on timeline, now in testing with early users.

  • 02

    Zero screen space consumed when collapsed (6pt pill).

  • 03

    Hover-to-use in under 300ms.

  • 04

    Works on all Spaces, fullscreen apps, and Mission Control — no special configuration needed.

Behind the build

AI-native workflow

Designed in Figma with Claude Design, built entirely with Claude Code, including Figma MCP for design-to-code. Not AI as autocomplete — AI as a collaborator across every phase: design system decisions, interaction logic, implementation, iteration. The project is as much a proof of concept for AI-native development as it is a terminal tool.

Paths I chose not to take

  • 01

    Ship as a VS Code extension

    Faster inside an existing app. But that ties SideNook to a single editor. The goal was a system-level toolthat works with any terminal-based agent — Claude Code, Cursor, SSH, whatever comes next.

  • 02

    Make it paid from day one

    I built this to learn.Charging before the interaction pattern was proven would’ve been premature. Free now, donations welcome. A pro tier makes sense if the model proves out — but not until the core is undeniable.

  • 03

    Over-engineer the plugin system before shipping

    A plugin architecture would be powerful — custom commands, integrations, themes. But building infrastructure before knowing what people want is how side projects die. Ship the terminal, learn from usage, then open the platform.

What I’d do differently

  • Accessibility earlier.

    VoiceOver support for terminal output is complex but not optional. Flagged for v2. It shouldn’t have been.

  • User testing on collapse timing.

    The 300ms debounce was tuned by feel. It works — but I’d want real usage data before calling it final.

Designed & built side by side.

The product and the marketing site — I designed both, end to end. Check it out at sidenook.dev.