R3: Computer panel rebuilt to the reference 'computer' system
Panel chrome (CONSOLIDATED-computer-panel-handoff): the 448px docked rail now hosts a 400×652 r32 'screen' card with the measured wallpaper stack — 135° slate/navy base gradient tinted by the agent accent, a #000/.40 vignette, and a frosted blur(40px) white/5 overlay with grain on top. Header carries the rose-500 status dot (home) or a back chevron (drilled), keeping the 'Computer home' / 'Close computer' accessible names stable. Home screen: 56px tiles with 16px-radius icon containers (Chrome/Slack brand marks on white squircles, coral-gradient lucide glyphs elsewhere), 11px labels, active:scale-[0.92] press; the frosted dock capsule uses the exact blur(40px) saturate(1.5) bg-white/7 r24 + inset/drop shadow with 48px black tiles. App window choreography: opening an app zooms it out of the tapped tile (transform-origin + --app-origin-scale captured at click time → the app-shell-zoom-in keyframe), ~0.28s ease-app. All 8 apps restyled to the inventory spec via shared AppShell helpers (SubViewHeader, PanelEmptyState = muted lucide glyph + 16/600 + 12 muted): Files 45px rows w/ folder/file/chevron glyphs; Slack segmented tabs (active white bg / aubergine text) + cream connect gate; Skills pinned cream 'Add Skill'; Add Apps category pills + SearchPill + coral connect; Settings grouped r12 cards + coral radios + cream Save + lucide delete; Browser/Routines/ClawChat lucide empty states. Every test marker text and aria-label preserved. 83 unit + 29 functional E2E green; lucide icons throughout (emoji gone). Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
Omar Sobh
co-authored by
Claude Fable 5
Claude Fable 5
parent
6e061515b8
commit
67b80da695
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
|
||||
import { useState, type FormEvent } from "react";
|
||||
|
||||
import type { Agent } from "@/lib/api/schemas";
|
||||
@@ -75,16 +76,16 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setScreen("main")}
|
||||
className="self-start text-xs text-muted-foreground hover:text-foreground"
|
||||
className="flex items-center gap-1 self-start text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
‹ Edit profile
|
||||
<ChevronLeft aria-hidden size={14} /> Edit profile
|
||||
</button>
|
||||
<label className="flex flex-col gap-1 text-xs text-muted-foreground">
|
||||
Name
|
||||
<input
|
||||
name="name"
|
||||
defaultValue={live.name}
|
||||
className="rounded-(--radius) border border-input bg-subtle px-2 py-1.5 text-sm text-foreground outline-none focus:border-accent"
|
||||
className="rounded-xl border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-coral"
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1 text-xs text-muted-foreground">
|
||||
@@ -92,7 +93,7 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
|
||||
<input
|
||||
name="job_title"
|
||||
defaultValue={live.job_title}
|
||||
className="rounded-(--radius) border border-input bg-subtle px-2 py-1.5 text-sm text-foreground outline-none focus:border-accent"
|
||||
className="rounded-xl border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-coral"
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1 text-xs text-muted-foreground">
|
||||
@@ -102,32 +103,32 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
|
||||
rows={5}
|
||||
defaultValue={live.system_prompt}
|
||||
placeholder="Describe how this claw should think..."
|
||||
className="rounded-(--radius) border border-input bg-subtle px-2 py-1.5 text-sm text-foreground outline-none focus:border-accent"
|
||||
className="rounded-xl border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-coral"
|
||||
/>
|
||||
<span className="text-xxs">Becomes part of its system prompt.</span>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="rounded-(--radius-button) bg-accent px-4 py-1.5 text-xs font-medium text-background hover:bg-coral-light disabled:opacity-50"
|
||||
className="rounded-radius-button bg-cream px-4 py-2 text-sm font-semibold text-primary-foreground shadow-button transition-colors duration-normal ease-app hover:bg-white disabled:opacity-50"
|
||||
>
|
||||
{saving ? "Saving…" : "Save profile"}
|
||||
</button>
|
||||
{confirmingDelete ? (
|
||||
<div className="rounded-(--radius) border border-destructive p-2 text-xs">
|
||||
<div className="rounded-xl border border-destructive p-3 text-xs">
|
||||
<p>Delete {live.name} permanently? This cannot be undone.</p>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmingDelete(false)}
|
||||
className="rounded-(--radius-button) border border-border px-3 py-1"
|
||||
className="rounded-radius-button border border-border px-3 py-1.5 transition-colors hover:bg-hover-bg"
|
||||
>
|
||||
Keep
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteClaw}
|
||||
className="rounded-(--radius-button) bg-destructive px-3 py-1 text-foreground"
|
||||
className="rounded-radius-button bg-destructive px-3 py-1.5 text-foreground"
|
||||
>
|
||||
Delete claw
|
||||
</button>
|
||||
@@ -137,9 +138,9 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmingDelete(true)}
|
||||
className="self-start text-xs text-accent hover:underline"
|
||||
className="flex items-center gap-1.5 self-start text-xs text-coral transition-colors hover:text-coral-light"
|
||||
>
|
||||
🗑 Delete claw
|
||||
<Trash2 aria-hidden size={13} /> Delete claw
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
@@ -150,32 +151,33 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 p-3">
|
||||
<div className="flex flex-col items-center gap-1 py-2">
|
||||
<Avatar name={live.name} accent={live.accent} size="lg" />
|
||||
<Avatar name={live.name} accent={live.accent} size="lg" shape="squircle" />
|
||||
<p className="text-sm font-medium">{live.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{live.job_title}</p>
|
||||
</div>
|
||||
<div className="rounded-(--radius) border border-border bg-subtle text-xs">
|
||||
<div className="flex justify-between border-b border-border px-2 py-2">
|
||||
<div className="divide-y divide-divider-subtle overflow-hidden rounded-xl bg-surface-warm text-xs">
|
||||
<div className="flex justify-between px-3 py-2.5">
|
||||
<span className="text-muted-foreground">Managed by</span>
|
||||
<span>{settings.data?.managed_by_name ?? "…"}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setScreen("edit")}
|
||||
className="flex w-full justify-between px-2 py-2 hover:bg-surface-warm"
|
||||
className="flex w-full items-center justify-between px-3 py-2.5 transition-colors hover:bg-neutral-800/40"
|
||||
>
|
||||
Edit profile <span aria-hidden>›</span>
|
||||
Edit profile
|
||||
<ChevronRight aria-hidden size={14} className="text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="pt-1 text-xxs uppercase tracking-wide text-muted-foreground">
|
||||
<p className="pt-1 text-[11px] font-medium uppercase tracking-wider text-subtle-foreground">
|
||||
Who else has access
|
||||
</p>
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label="Other Claws"
|
||||
className="rounded-(--radius) border border-border bg-subtle p-2 text-xs"
|
||||
className="rounded-xl bg-surface-warm p-2 text-xs"
|
||||
>
|
||||
<p className="pb-1">Other Claws</p>
|
||||
<p className="px-1 pb-1 text-muted-foreground">Other Claws</p>
|
||||
{(["any", "specific"] as const).map((mode) => (
|
||||
<button
|
||||
key={mode}
|
||||
@@ -183,9 +185,9 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
|
||||
role="radio"
|
||||
aria-checked={agentsMode === mode}
|
||||
onClick={() => setAgentsMode(mode)}
|
||||
className="flex w-full items-center gap-2 px-1 py-1 text-left hover:bg-surface-warm"
|
||||
className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-neutral-800/40"
|
||||
>
|
||||
<span aria-hidden>{agentsMode === mode ? "◉" : "○"}</span>
|
||||
<span aria-hidden className={agentsMode === mode ? "text-coral" : "text-muted-foreground"}>{agentsMode === mode ? "◉" : "○"}</span>
|
||||
{mode === "any"
|
||||
? "Any Claw on the team"
|
||||
: "Specific claws — pick claws"}
|
||||
|
||||
Reference in New Issue
Block a user