Login landed on an empty "Pick a claw" stub — the integrated dashboard from the
design comp was never assembled as the home. Now `/` IS the dashboard.
- public/sw.js: cache v2→v3; RegisterServiceWorker reloads once when a new
worker activates, so deploys are picked up without a manual hard-refresh
- (workspace)/layout: ShellChrome renders the dashboard bare on "/" (it's
self-contained) and the shared TopBar/LeftRail/StatusBar on every other route
- components/dashboard: Dashboard (state machine + data) — top bar w/ breadcrumb,
ORG/CO/TEAM/CLAW tier rail, tier-aware context list, TopologyCanvas (6-mode
view-as selector, generalized layouts), and the agent "computer" slide-out
(cm-fade) wrapping the existing ComputerPanel; status bar
- motion.css: cm-fade keyframe
Wired to existing endpoints (/api/teams|companies|orgs, /api/structure/*,
/api/team/claws, /api/structure/stats, + ComputerPanel's apps/runtime-config/
routines). Defaults to the most-recent team; claw click opens the slide-out.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The token redesign couldn't touch static rasters/config — these were still the
old claw mark + old coral. Regenerate favicon (icon.svg + icon.png) and PWA
icons (192/512) as the node-mesh glyph; manifest theme_color #f96565→#ff6f61,
background #121212→#08080a; refresh the description/tagline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The "+" deploy flow now opens a scope selector (Single / Team / Company-soon /
Org-soon). Single = the existing CreateClawForm. Team = TeamWizard: pick a
baseline topology (from the catalog + role distribution), set size, auto-staff
editable claw cards (name / role / model / persona), preview the topology
graph, then POST /api/teams → land on the Team page.
Team page (/teams/[id]): topology SVG + claw roster (each links to its chat) +
a Run panel that drives the team on the durable runner with live SSE progress
(reuses the topology-run streaming). /teams list page + a Teams nav entry.
lint + typecheck + next build clean.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
#2 GLM judge (closes#114): registry NamedProvider gains a `format` field;
build_provider_registry builds an AnthropicProvider for format="anthropic".
GLM's coding/OpenAI endpoint is ToS-throttled for raw SDK, but its Anthropic
endpoint (api.z.ai/api/anthropic) accepts raw API calls (verified x-api-key
-> glm-4.7), so CLAWMATES_JUDGE_MODEL=glm:glm-4.7 routes the door governor /
topology judge through GLM with no runtime-routing. (Kimi-as-judge still needs
a Platform key — coding key is agent-only.)
#3 run-control: POST /api/topology-runs/{id}/cancel (workspace-scoped,
queued/running only); the worker honors it at the step boundary (checks
current_status in the checkpoint callback) and won't clobber a cancel with
`failed`. Frontend Run tab gains a Cancel button and clickable recent runs
that deep-link into a live/replayed stream (SSE replays from checkpoint).
cm-* tests (incl. new cancel test) + clippy + frontend lint/typecheck green.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Backend: GET /api/topology-runs/{id}/events streams Server-Sent Events by
tailing the durable per-step checkpoint the worker already writes — a `step`
event per newly-completed step (replayed on connect so reload/reconnect
re-attaches), then a terminal `done` event with the final output/error. Each
step carries its index as the SSE id, so the browser's Last-Event-ID resumes
without duplicates on reconnect. No new table, no worker change — reuses the
checkpoint; avoids run_events' agent_runs FK.
Frontend: the Run tab now opens an EventSource (through the same-origin proxy,
which adds the bearer) instead of polling — appending steps as they stream and
finalizing on `done`. One streaming connection, lower latency, auto-resume.
cm-api builds + clippy clean; frontend lint + typecheck + next build clean.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
New TopologyRun component: pick a topology + roles + task, enqueue via
POST /api/topologies/run (202), then poll GET /api/topology-runs/{id} for
live turn-by-turn progress — rendering the per-step checkpoint while running
and the final RunRecord (+ final output) when completed, with a status badge
and recent-runs list. Added as the middle "run" tab in the workbench.
Since the work runs server-side as a durable job, a long-horizon run survives
navigation/restarts; the UI just re-attaches by polling. lint + typecheck +
next build clean. (Also fixed a pre-existing set-state-in-effect lint error in
TopologyCompare surfaced by the Next 16 toolchain.)
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Save each comparison and let users reload past ones.
- migration 0008: topology_runs (workspace-scoped; full comparison as JSONB).
- cm-db repo::topology_runs (insert / list_recent / get) + regenerated .sqlx.
- cm-api: compare persists best-effort (never loses the LLM result on a DB
hiccup); GET /api/topology-runs (recent) + GET /api/topology-runs/{id}.
Integration test asserts persist → list → get.
- frontend: "Recent comparisons" list on the Compare tab; click to reload a
saved run. e2e p8 green (39 suite); offline build + clippy clean.
Server self-migrates at boot (cm_db::MIGRATOR), so 0008 applies on deploy.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Add a Compare tab to /topologies: pick a task + roles + topology kinds, build a
graph per kind, run POST /api/topologies/compare, and render a leaderboard table
+ a quality/cost Pareto scatter (SVG, no deps). Wrap Build + Compare in a tabbed
TopologyWorkbench. e2e p8 extended to run a comparison end-to-end (build×N →
compare → leaderboard + Pareto). Full suite 39 green; build + TS clean.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
New authed workspace page (/topologies, in the global nav) that browses the
topology catalog and builds + visualizes a topology from a kind + roles:
- lib/api/topology.ts: zod schemas + fetchTopologyCatalog (server, authed).
- TopologyGraphView: lightweight SVG renderer (no new deps), laid out per kind
(row for pipeline/ring, star for delegation kinds, circle otherwise).
- TopologyExplorer (client): catalog list + roles input → POST
/api/topologies/build via the /api proxy → render the graph.
- ShellNav: add the Topologies nav item.
- e2e (p8): sign in → nav → browse catalog → build a pipeline → graph renders.
Full suite green (38); npm build + TS clean. Goes live with the next server+
frontend deploy (compare/Pareto UI to follow).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Replace the floating rounded nav pill with an edge-to-edge sticky header:
solid bg, bottom border, square corners, content centered to max-w-[1392px].
Drop the hero's -mt-[98px] underlap so it sits below the solid bar. Refresh
the @visual baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Swap the clawmates-mark.png image in the nav (mobile + desktop) for a lucide
Waypoints icon in an ink chip beside the wordmark — reads as a network/mesh of
agents, matching the infrastructure theme. Refresh the @visual baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Page is now Hero → Hierarchy → Scale → Why → Use cases → FAQ → CTA → footer.
- Scale: per-tenant runtime / scale-to-zero / delegation hierarchy.
- WhyGoverned: humans-in-the-loop, single audit journal, delegation, no rogue access.
- UseCases: support / marketing / research / engineering / finance / data.
- FinalCta: dark ink band bookending the hero ("Build your agent company").
- Trim FAQ to 4 (keep the e2e-referenced Qs); repoint nav/footer anchors to
the live section ids. Refresh the @visual baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Completes 02cde39: remove the CrewStrip and Security functions, their consts,
and the now-unused AgentToken/lucide imports from Sections.tsx; render only
Hero → Hierarchy → FAQ in the marketing page; refresh the @visual baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Page is now Hero → Hierarchy → FAQ → footer. Delete the CrewStrip and
Security section functions + their consts (CREW, SECURITY), drop the now-
unused AgentToken component and the lucide imports. Refresh the @visual
baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Remove the Pitch, One-click, Works, Always-on and Skills sections and the
"Build your AI crew" footer CTA banner. Page is now Hero → CrewStrip →
Hierarchy → Security → FAQ → footer (dark tier kept). Prune the now-dead
section functions, consts, and imports (Image, skills icons). Repoint the
"marketing rendered" heading assertion (p0/p7/visual) from the removed
Pitch heading to the hero h1 (/agentic systems/); refresh the @visual baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Re-skins the playful/consumer feel into disciplined agent-infrastructure,
keeping the animated hero canvas (re-themed) and adding the hierarchy story.
- Palette: re-point coral→ember (#E0584A); add ink/surface/mist/slate-light/
azure/teal tokens. One accent per viewport; retire the black/coral split-
headline pattern across all 8 headings (single ink color).
- Typography: hero/section weights 800→~650-675, tighter tracking, smaller
hero size; uppercase eyebrow label.
- Hero: dark ink base with glowing azure/indigo + faint ember canvas blooms;
light copy; new positioning ("Build safe, scalable agentic systems" + the
single-agent-to-company subhead); ember primary CTA + ghost "Read the docs".
- Imagery overhaul (code-built, no mascots): AgentToken chips (CrewStrip,
OneClick card, footer), AlwaysOn rebuilt as a terminal/log with an approval
line, SkillsShowcase as duotone lucide cards on Mist, Security as a shield/
lock motif.
- New HierarchyDiagram section ("One agent, or a whole org chart"): SVG org
chart with an azure active path and teal human-approval checkpoints on
sandbox-leaving actions.
- Tests: dark-hero/terminal/eyebrow contrast fixed to AA; refreshed the
marketing @visual baseline (hero masked).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
- Headline → "Scale your Large World" (coral on "Large World").
- Subtext → "Building safe and scalable systems of claws for any domain of work."
- Drop the "Get started for free" hero button; keep "Book a demo".
- Remove the three hero trust pills (free credits / no card / self-hostable).
- Point the p7 hero CTA assertion at "Book a demo"; refresh the @visual baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Port of crnacura/AmbientCanvasBackgrounds' shift effect: large circles drift
at random with hue driven by 3D simplex noise, drawn to an offscreen buffer
then blurred and composited onto the visible canvas. Re-tuned to a light brand
palette (pale periwinkle base; blue→violet→coral blooms) so the dark hero copy
stays readable. Self-contained (vendored simplex noise), scoped to the hero,
respects prefers-reduced-motion, and pauses when scrolled out of view / tab
hidden.
- Replace claws-at-desk.png with <HeroAmbient/>; add a soft fade into the
section below.
- Mask the animated hero region in the marketing @visual snapshot (keeps the
baseline deterministic) and refresh the baseline.
- Fix a latent AA contrast bug the old illustration was hiding: the CrewStrip
caption (#77879e on white, 3.65:1) → #647289 (4.87:1).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Sign-out only cleared the local cm_session cookie via DELETE /auth/session.
In Clerk mode the real session is Clerk's, so that left it intact and the
push to /login bounced the user straight back into the app (Clerk's <SignIn>
auto-redirects when a session exists). Detect clerk-js at runtime
(window.Clerk) and sign out through it; local/air-gapped builds have no
window.Clerk and keep the cookie flow (never loading the Clerk SDK).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The frontend is documented as a single image whose AUTH_MODE env var
selects local vs Clerk auth per deployment (docs/clerk.md). But the root
layout and /login read AUTH_MODE during render with no request-time
signal, so Next 16 statically prerendered them at build time in the
build host's mode (local). The deployed image then served the local
login form forever, ignoring AUTH_MODE=clerk at runtime — ClerkProvider
and <SignIn/> never appeared.
Add `await connection()` (the v16 way to read env at request time) in
the layout's IdentityProvider and in /login so both render per-request
and honor the runtime AUTH_MODE.
Also add a root .dockerignore: the repo had none, so every image build
shipped the 67GB Rust target/ dir as build context.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Swapped the placeholder PawPrint icon for the new claw logo everywhere it
appears: the marketing nav (mobile + desktop), the footer, the login card,
and the app left rail. The supplied PNG was a red claw on a solid near-black
background, so I flood-filled the background to transparent (the dark-red
outline survives the black threshold) and exported a trimmed, optimized
public/images/clawmates-mark.png (321x256, 88KB from 1.7MB). It reads cleanly
on both light (nav/login) and dark (footer/rail) surfaces.
Also regenerated the favicon + PWA icons from the new mark:
- src/app/icon.png (Next uses it as the favicon; removed the old favicon.ico)
- public/icons/icon-192.png and icon-512.png (claw on #0a0a0a, maskable)
Roster-card avatars on the login panel stay as PawPrint (decorative, not the
brand). Regenerated all seven @visual baselines that contain the mark — the
swap is sub-threshold for maxDiffPixelRatio, so I deleted and recaptured them
rather than relying on update-snapshots.
typecheck/lint/build green · all @visual green · deployed and verified live
(mark, /icon.png, and PWA icons all 200).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The live /sign-in is a Clerk-rendered SignInForm (SSR is just a spinner); the
rendered design is the email-first progressive form. Reworked our /login to
match it visually while keeping our real email+password auth underneath.
- Email step: "Sign up with Slack" (cosmetic), OR, Work Email / Phone Number
tabs, work-email field, "Continue with work email →", "Other SSO Options".
Slack / Phone / SSO are cosmetic placeholders we don't support yet.
- Password step: "Continue" reveals the password field + "Sign in" (our actual
POST to /auth/session). A Back link returns to the email step.
- Headline now mirrors WorkClaw ("Multiply your team's brainpower" / "Sign up
to get early access").
- Right panel is now the role-card roster grid (PawPrint avatars, our own
roles) + "The AI crew for your team" + the claws-at-desk art.
- Updated all eight E2E signIn helpers (and the load assertions) for the new
two-step flow: fill Email → Continue → fill Password → Sign in. Labels
(Email/Password) and the "Sign in" button name are preserved.
- A11y: bumped the inactive tab text to full slate (was 3.41:1).
typecheck/lint/build green · p0-shell (full sign-in) green · p6-a11y (login
clean) green · all six @visual baselines green (login regenerated) · deployed
and verified live.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Restyled /login into WorkClaw's two-panel auth design: a white form card on
the left, a periwinkle "meet the crew" panel on the right (claw roster strip,
"Your AI crew, all hands on deck", the claws-at-desk art), light-themed via
the marketing palette. The right panel is hidden on mobile.
- Kept /login as the canonical route (workspace redirect, /api/auth/login,
and the whole E2E sign-in flow depend on it) and kept our email/password
mechanism — only the chrome changed. Field labels (Email/Password) and the
"Sign in" button are preserved so p0–p6 keep passing.
- Added /sign-in → /login redirect so WorkClaw's URL resolves.
- New AuthShell wraps both the local form and the Clerk SignIn branch.
- LoginForm restyled to the light card aesthetic (rounded inputs, full-width
ink button); uses AA-safe coral-strong for the focus ring / error.
- Regenerated the login visual baseline.
typecheck/lint/build green · p0-shell (full sign-in flow) green · p6-a11y
green · login + marketing @visual green · deployed and verified live
(/login 200, /sign-in 307 → /login).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Re-scanned the live workclaw.com (same content as our prior capture; they
redeployed but shipped no landing changes) and rebuilt our landing to mirror
its full structure section-for-section, keeping Clawmates branding and honest
claims (no borrowed customer logos, no unverified SOC 2).
Now matches the real layout: sticky pill nav (Product/Blog/Pricing/FAQ +
Sign In + dark Get Started) · light-blue hero with the claws-at-desk art ·
crew strip (honest stand-in for the customer-logo marquee) · "Multiply your
brainpower…" + four trait badges · One-click setup with the create-claw card
(Sandy Clawson) · Works where you do with the 13-app icon grid + Slack
conversation mockup · Always on (dark, moon + composite art) · Your work,
your way skills tiles · Enhanced security (hand-key + key-snap, 4 icon
columns) · FAQ on the textured field · two-tier footer (Build your AI crew
+ dark footer with socials).
- Pulled the WorkClaw assets the public capture missed (claws-at-desk,
support-claw, slack-convos/cards, always-composite, 13 app icons, security
icons, footer-team). Dropped WorkClaw's own logo mark for our PawPrint.
- Honest substitutions where WorkClaw's claims aren't ours: no SOC 2 (4th
security column is "Air-gappable"; trust pill is "Self-hostable &
air-gapped"), and the FAQ keeps our self-host/air-gap positioning.
- A11y: consolidated to AA-safe coral-strong (#d23a3a) for button fills and
small coral text; axe reports zero serious/critical.
- Regenerated the marketing visual baseline.
typecheck/lint/build green · p7-marketing (render + a11y) green · @visual
green · deployed via Compose and verified live on :3000.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Rebuilt the public landing to mirror WorkClaw's complete section layout
(verified against tools/wc-capture/out/shots/marketing.png), with original
"clawmates crew on a ship" copy and captured WorkClaw art wired as
swappable placeholders.
Sections (top to bottom): sticky pill nav (dark Get-started CTA) · hero
(dual CTA + trust row + crew banner) · crew strip · positioning headline +
four trait badges · One-click setup (periwinkle panel) · Works where you do
· Always on watch (dark panel) · Your work, your way (3 skill tiles) ·
Safety built into the hull (security columns) · FAQ on the blue field · Build
your AI crew CTA on the dotted field · dark footer.
- No SOC 2 / compliance claims (p7-marketing enforces this); honesty kept by
replacing WorkClaw's customer-logo marquee with our own crew strip.
- A11y: AA contrast fixes — text-xl coral CTAs (large-text bar), darker
coral-strong accent on periwinkle, deeper FAQ blue for white text.
- New tokens: marketing-blue, marketing-coral-strong.
- visual.spec marketing test scrolls + waits for lazy art before the shot;
regenerated the marketing baseline. (Deepest <img> — the security art —
renders for users but is blank only in Playwright's full-page capture.)
- Vendored the captured WorkClaw asset bundle under public/images/.
Built, typechecked, linted, p7-marketing + @visual green, deployed via
Compose and verified live on :3000.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The rail's middle scroll container was a plain block (flex-1 overflow-y-auto
py-4), so the claws clustered at the top with empty space below. Match
WorkClaw: make it a centered flex column —
flex w-full flex-col items-center [justify-content:safe_center] overscroll-contain
[&::-webkit-scrollbar]:hidden — so the stack sits in the vertical middle with
balanced space above/below (safe = no clipping on overflow).
To preserve last commit's left-aligned rows under items-center, the RosterList
ul and the New-claw link are now w-full (else they'd shrink/center). Row gap
0.5→1 to match WorkClaw. (Capture shows no gap on the container itself — the
reviewer's suggested gap-1 there was dropped.)
typecheck/lint(0)/86 unit/30 E2E/6 visual green; workspace-home baseline updated.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Verified against the dark chat/welcome captures:
- Active form wrapper: pb-4 → px-4 pt-4 pb-8 + bg-gradient-to-t from-background
to-transparent (32px bottom gap with a fade, was a flush 16px).
- Textarea: rest at 44px and grow-then-scroll via [field-sizing:content] (we
had no auto-grow). Per-variant caps — active min-h-11 max-h-[180px], welcome
max-h-[88px]; + pl-1. (Reviewer said keep max-h-40, but prod is 180/88, and
field-sizing is the actual grow mechanism.)
- Box surface kept as-is (#1F1F1F + shadow) per the decision — not switching to
WorkClaw's flat #262626.
typecheck/lint(0)/86 unit/p1-chat/6 visual green; no baseline change.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Match WorkClaw's left sidebar (verified vs left-sidebar captures): claw rows
are horizontal — a 44px squircle avatar (was 58px, centered) on the left with
the name beside it, hugging the edge at px-4, gap-3. The "New claw" tile is a
bare 44px dashed + at the same inset (no label, like the reference). RosterList
drops items-center; collapsed (full-panel) mode still centers the avatars.
Avatar `rail` size 58px→44px (size-11) / radius 15px; test updated.
typecheck/lint(0)/86 unit/31 E2E/6 visual green; workspace-home baseline
regenerated.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
A masked lint exit code (piped through tail) let these ship in 65a0f1a:
- DevicePanel: reset subHeader via the render-phase prev-state pattern instead
of a setState-in-effect.
- AppShell useSubHeader: assign the latest-callback ref in an effect, not
during render.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The device-size cluster's divider was to the LEFT of the whole group; move it
between the phone toggle and the Close X (matches WorkClaw): [monitor][tablet]
[phone] │ [X].
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Five capture-verified panel fixes (vs the WorkClaw size captures):
- Open from chat lands at PHONE size (launcher sets device:phone), and the
Computer launcher icon hides while the panel is open (ChatHeader).
- Card fills the column at every size (md:h-full, dropped the 652px centered
card) so phone/tablet are full-height with the dock anchored at the bottom.
- Full bleeds horizontally (drop the px-6 inset + radius at full) so it meets
the rail and covers the reserved chat — no squished text behind. Vertical
pt-[88px] kept so the app header clears the chat-header close (no overlap).
- Home grid → grid-cols-[repeat(4,72px)] so icons stay 72px/tight at every
width instead of stretching at tablet/full.
Regenerated computer-home baseline (now phone + full-height). typecheck/lint/
86 unit/31 E2E/6 visual green.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Eliminates the double-header on Settings-edit / Files-folder sub-screens
(they previously stacked the panel's app header + an inline text-xs back).
Now one sticky panel header morphs: app name + close-X at the top screen,
back-chevron + text-lg sub-title when a sub-screen registers itself.
- AppShell: SubHeaderContext + useSubHeader(active, title, onBack) hook;
removed the dead SubViewHeader (nothing used it — my earlier restyle of it
was moot; the apps had inline backs).
- DevicePanel: single header morphs on the registered sub-header; provides
the context around AppRouter; resets on app change.
- SettingsApp (edit) + FilesApp (drive): register via useSubHeader, inline
back buttons removed.
Verified by rendering the edit screen (single "‹ Edit profile" header).
typecheck/lint/86 unit/37 E2E+visual all green.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Match the captured card (rec-1): rounded-xl mx-6 ring-1 bg-neutral-900 with
not-last:border-b rows (was divide-y bg-surface-warm); row label is the
prominent text (flex-1 text-sm font-medium) and the value is muted text-xs
(previously reversed). Body uses gap-5 with hero px-6 / card+access mx-6
(was a uniform p-3). Verified by rendering the panel against the capture.
86 unit + 6 panel E2E green.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The panel app header now matches WorkClaw's measured pattern (dark captures
agent-settings / files-explorer / edit-profile):
- App TOP screen: the header lives on the app surface (sticky), showing the
app name (text-lg font-semibold) + a size-7 rounded-full close-X → home,
at px-5 pt-4 pb-3 — replacing the old px-8 pt-6 chevron+small-title. The
home screen keeps its dot + "{agent}'s Computer" header.
- Sub-screens (AppShell SubViewHeader): back-chevron PILL + text-lg
font-semibold title at px-5 pt-4 pb-3 (was text-xs px-3 pt-3 pb-2).
- Settings hero: 96px squircle avatar + text-xl name + text-sm role (matches
the capture; reviewer's 126px was wrong). New Avatar `settings` size.
p3-panel E2E updated (home nav is now the "Close" button). typecheck/lint/
86 unit/31 E2E/6 visual all green; no visual baseline change.
Known follow-up (P2): Settings/Files sub-screens still stack the top header +
the back-header (pre-existing) — to be unified per-app.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The far-right home tile read "Add" and rendered its plus through GradientGlyph
(coral, faint/unclear). Match WorkClaw's capture: label "Add Apps" and a plain
lucide-plus in currentColor (white/65, inherits from the dashed tile),
strokeWidth 2, 19px. Updated the p3-panel E2E label + computer-home baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
All verified against the captured WorkClaw panel DOM (not the reviewer's
live-preview guesses, which were wrong on two points):
- Glyphs are now FILLED — gradient on fill + stroke, 1px stroke, and a
drop-shadow(0 1px 2px rgba(0,0,0,0.25)) — via a `filled` prop on
GradientGlyph. Applied to the dark-tile glyphs (Claw Chat + dock
Skills/Files/Routines/Settings). The reviewer said keep Skills outline —
the capture shows WorkClaw fills the zap too; and it missed the drop-shadow.
- Grid inset 12px → 32px (px-8): the grid is now 336px so grid-cols-4 resolves
to 72px tracks (capture shows repeat(4,1fr) at 336px — NOT explicit 72px cols
as claimed; same grid-cols-4 as ours, just the right container width).
- Panel header: drop the fixed h-11/px-3, use px-8 pt-6 = padding 24px 32px 0
(matches WorkClaw's inline style exactly).
typecheck/lint/86 unit/31 E2E/6 visual green; computer-home baseline updated.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Forensic capture of the live app's Computer panel gave exact ground truth,
correcting my prior commit (which trusted a reviewer's measurements):
- Dock is content-width (~380px) centered by a w-full wrapper, NOT stretched
full-width — my last change had wrongly stretched it. Reverts to the real
centered-pill behaviour.
- Dark tiles (#1f1f1f) gain the measured grounding drop in --shadow-dock-tile
(0 4.65px 9.35px rgba(0,0,0,0.2)); previously flat (hairline + inset only).
- AppIcon cells fixed to 68px / 8px gap; grid gap 34px×16px; icons 34px; the
dock now uses the same nested tile component as the grid.
- White brand-tile shadow + tile nesting were already exact (capture confirms).
Regenerated computer-home baseline. typecheck/lint/86 unit/31 E2E/6 visual green.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Playwright tool to mirror our own WorkClaw app's compiled front-end (CSS,
JS, fonts, SVGs) and dump each screen's DOM + computed styles, for matching
Clawmates to the real thing instead of guessing from screenshots.
Auth is by hand (you log in, incl. the emailed code, it reuses the session);
`live` mode does login + capture in one go for OTP logins. out/ + the one-off
grab scripts are gitignored; eslint ignores the captured minified assets.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Two measured parity changes to the Computer home screen (HomeScreen.tsx):
- Dock: mx-auto centered pill → flex items-end justify-center, so it spans
the panel width as a bottom-anchored frosted bar instead of a floating
content-width pill. (Shadow/blur/bg/ring already matched prod.)
- App-grid tiles: adopt WorkClaw's nested DOM (cell → button → fade layer →
visual tile) and the measured 4-layer "physical icon" shadow on the white
brand tiles (browser/slack), where its dark hairline + drop + bright inset
read. Dark glass tiles keep the white-bevel shadow-dock-tile (a dark drop
is invisible on them). Brand icons sized to the measured 34px.
Regenerated computer-home visual baseline. typecheck/lint/86 unit/31 E2E
green; all 6 visual pass.
Note: WorkClaw's Computer panel is behind auth, so unlike the token work
these targets couldn't be verified against prod CSS — applied per the
reviewer's live measurements at the user's direction.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Verified against workclaw.com's own compiled CSS (.dark scope defines
--surface-warm-muted:#1f1f1f). Used by 11 components (composer, credits,
welcome chips, tabs, app tiles). Subtle — below the visual-diff threshold,
so baselines are unchanged — but it's the correct prod value.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The app sets the `.dark` class but never `color-scheme`, so the browser
renders native UI (scrollbars, form controls, select/date popups,
autofill) in its light default over the dark app — the one real gap a
panel review surfaced. Set `color-scheme: dark` on `.dark`, and reset it
to `light` on the `.marketing` scope (it lives inside the dark <html> and
color-scheme inherits).
The review's other claims were verified against the compiled CSS and are
non-issues: shadow utilities (shadow-dock-tile/screen/…) ARE generated
with values inlined into --tw-shadow (Tailwind v4 doesn't emit them as
root vars); --computer-width/--app-origin-scale are runtime inline styles,
not :root tokens; all 54 @property --tw-* are present.
typecheck/lint/86 unit/31 E2E green; all 6 visual baselines unchanged.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Replace the hand-rolled @theme color block with a real shadcn init shape:
bare :root (light) + .dark (dark) tokens mapped to --color-* via
@theme inline, plus the missing semantic/chart/radius tokens. --accent
is now neutral (#262626) to match WorkClaw; the ~16 coral-via-accent
usages migrate to the dedicated `coral` brand token so they stay coral.
Adds cn() (clsx + tailwind-merge) and components.json so future
`npx shadcn add` works. Clawmates-specific tokens (coral brand,
marketing palette, measured shadows, motion, layout, type scale) are
preserved verbatim in a separate @theme block. Root <html> gains `dark`
(app/login read .dark; marketing stays light via explicit colors).
We do NOT add shadcn's Button/Card/etc. — they'd conflict with the
existing measured-to-WorkClaw components.
Verified value-preserving: typecheck/lint/86 unit/31 E2E all green, and
all 6 visual baselines pass with no diff. Compiled + live CSS confirm
bg-accent→#262626 (neutral), text-coral→#f96565, chart tokens present.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The card used h-full, so it stretched to fill the column — on tall windows
it grew past the reference (808px at a 920px viewport) instead of staying a
content-sized panel. WorkClaw centers a fixed ~652px card that floats with
empty space above/below. Now phone/tablet → md:h-[652px] (md:max-h-full so
it still caps on short windows), centered via justify-center on the column
wrapper; full + mobile keep h-full to fill. Verified at a 920px window: card
652px, top 166 / bottom 818 (centered, floating) instead of 808 stretched.
At the 720px test viewport it caps to the column either way, so no baseline
change — full suite (37) green.
Co-Authored-By: Claude Fable 5 <[email protected]>
Dropped the avatar + name + role + online dot from the top of the chat
header (the claw is already shown in the rail and the welcome state). The
header now holds only the right-aligned action cluster (and the device/
Close overlay while the panel is open). Removed the now-unused agent prop
+ Avatar/Agent imports; ChatWorkspace no longer passes agent to the header.
Regenerated chat-welcome + computer-home baselines; full suite (37) green.
Co-Authored-By: Claude Fable 5 <[email protected]>
Measured sidebar parity:
- Container: dropped the aside's px-1 so the rail is the full w-rail 176px
(was 168px inner); added bg-background (solid #0a0a0a, was transparent);
padding now 8px 0 24px (pt-2 pb-6).
- Bottom nav (Skills/Apps/Team/Credits): 14px/400 → 12px/500 (text-xs
font-medium, leading-[1.3]); trailing credits balance likewise.
- Claw-name labels: active 400→600 (font-semibold), inactive 400→500
(font-medium); kept 12px.
Verified live at 1440: rail width 176, bg rgb(10,10,10), nav 12px/500,
active claw name 12px/600. Rail-wide change → regenerated all 7 visual
baselines; full suite (37) green.
Co-Authored-By: Claude Fable 5 <[email protected]>
The <body> carried Tailwind's `antialiased` (-webkit-font-smoothing:
antialiased), which inherits through the whole tree and renders every
chat/message/UI text thinner & lighter than WorkClaw. WorkClaw leaves the
browser default (`auto`), giving the crisper/heavier weight. Removed the
class — body is now just `min-h-full`; computed -webkit-font-smoothing is
`auto`. The font itself was always 14px/400 Geist; only the smoothing
differed. Global rendering change → regenerated all 7 visual baselines;
full suite (37) green.
Co-Authored-By: Claude Fable 5 <[email protected]>
--font-sans was 'var(--font-geist), system-ui, sans-serif'; WorkClaw's
chain includes ui-sans-serif before system-ui. Added it so the fallback
order matches: geist, geist Fallback, ui-sans-serif, system-ui, sans-serif.
Fallback-only — Geist always loads (vendored locally), so rendering is
unchanged; full suite (37, incl. visual) green with no baseline diff.
(The lowercase 'geist' / 'geist Fallback' names are next/font's
auto-generated, metric-adjusted family names — CSS font-family matching is
case-insensitive, so they render identically to 'Geist'/'Geist Fallback'.)
Co-Authored-By: Claude Fable 5 <[email protected]>
