feat(ui): NUX rework behind enableConferenceRoomChat experimental flag — capsule onboarding, conference-room chat, unified composer (#8000)
## Thinking Path
> - Paperclip is the open source app people use to manage AI agents for
work
> - The first-run experience (onboarding wizard) and the chat surfaces
(conference-room/board chat, task threads, composers) are the product's
front door — they decide whether a new operator understands "hire
agents, give them work, review results" in the first five minutes
> - Today those surfaces feel ticket-y and form-like: the wizard is a
static multi-step form that ends in an anticlimactic "Launch" screen,
the task composer and board chat behave differently from each other, and
agent-feed issue quicklooks misbehave (multiple flyouts open at once,
cards jump on hover)
> - We wanted to iterate toward a conversational, team-centric NUX — but
without risking the workflows of everyone already running Paperclip
> - This PR reworks the NUX behind a new default-OFF
`enableConferenceRoomChat` experimental flag: a capsule-motif onboarding
wizard that builds your team as you answer, a conference-room chat
surface, one shared ChatComposer across surfaces, brand-accurate status
chips, and feed-quicklook fixes — with the pre-existing UI
fork-and-frozen as `*Classic` components that flag-OFF users keep
> - The benefit is a complete, testable modern NUX that anyone can opt
into from Settings → Experimental, with zero default behavior change and
a clean path to either graduate or drop the experiment
## Linked Issues or Issue Description
No pre-existing GitHub issue — feature description per
`feature_request.yml`:
- **Problem / motivation:** Paperclip's onboarding wizard and chat
surfaces grew up as separate ticket-centric forms. New users get a
form-filling experience rather than the feeling of standing up a team;
the board chat and task threads use different composers with different
affordances; the agent feed's issue quicklook can stack multiple
popovers and shifts cards on hover.
- **Proposed solution:** A coherent NUX experiment behind one
experimental flag (`enableConferenceRoomChat`, Settings → Experimental,
default OFF): capsule onboarding wizard with an evolving team capsule,
conference-room chat, unified `ChatComposer`, team-centric copy, brand
status chips, quicklook single-flight fix. Flag-OFF users get the exact
pre-experiment UI via frozen `*Classic` forks, verified by an on/off
parity test matrix.
- **Alternatives considered:** (a) incremental unflagged restyling —
rejected: the changes interlock across surfaces and would drip risk into
every release; (b) a separate app shell / route for the new NUX —
rejected: too much divergence, the flag + classic-fork pattern keeps the
diff reviewable and reversible.
- **Roadmap alignment:** `ROADMAP.md` lists **CEO Chat** ("a
lighter-weight way to talk to leadership agents... should still resolve
to real work objects"). This experiment is groundwork in that direction
(conference-room chat resolves to issues/tasks via the same composer
used in task threads) and does not change the core task-and-comments
model.
Related PRs found in the dedup search (same area, none duplicate this
work — they target the classic wizard, which this PR intentionally
leaves intact and mergeable):
- #5385 — Coach-driven onboarding: conversational entry +
agent-companies package import
- #5378 — Onboarding wizard: reusable adapter picker + probe card
- #6636 — ui(onboarding): friendly error surface + retry for the wizard
- #7005 — fix(onboarding): explicitly await first-task wake
- #2616 — fix: restore workspace directory config in onboarding wizard
## What Changed
- **Experimental flag plumbing** — `enableConferenceRoomChat` in shared
types/validators, server instance-settings service + API, Settings →
Experimental card with explicit enable/disable copy
- **Onboarding wizard** — classic wizard forked and frozen
(`OnboardingWizardClassic`); flag-ON variant is a 5-step capsule wizard
with a persistent evolving `AgentCapsule` (gradient/glow motif),
team-centric reframed copy, and a typing-dots intro (hardened with
fake-timer tests)
- **Conference-room chat** — flag-ON board-chat surface with agent
bubble name/icon headers and copy/vote/timestamp action rows
(`AgentBubbleActionRow`)
- **Unified composer** — shared `ChatComposer` adopted across surfaces;
translucent surface + scroll-mask removal; "Agent mode"/"Plan mode"
relabels; no-assignee confirmation `AlertDialog` (new
`ui/alert-dialog.tsx` primitive); `@task` reference picker +
linkification in mentions
- **Agent feed** — single-flight issue-quicklook store (one popover at a
time), flyouts open to the left, removed hover translate-y jitter
- **Status chips** — brand-accurate task status chips behind the flag
(light/dark, 1px borders per paperclip.ing/brand)
- **Tests** — flag on/off parity matrix across IssueDetail,
NewIssueDialog, Sidebar, wizard, gate components; component tests for
all new pieces
- **Merge with `master`** — one conflict in
`ui/src/components/IssueChatThread.tsx`, resolved by keeping master's
new `AssigneeChip`/`HandoffWakeRow`/`RunStatusBadge` components inside
the flag-gated metadata-row chrome (details in commit `21a5642a`);
post-merge fixes: vitest 4 mock typing in `MarkdownEditor.test.tsx`,
flag hook made safe for provider-less mounts (master's new isolated
component tests)
- **Branch hygiene** — internal design wireframes/mockups stripped
before the PR (they live in the Paperclip issue threads)
- No user-facing documentation changes required: the flag is
intentionally experimental and self-described in the Settings card; no
existing docs reference the affected surfaces
## Verification
- `pnpm run typecheck` — green across the workspace (ui, server, shared,
plugins)
- Full UI suite (`vitest run` in `ui/`, clean worktree at this HEAD):
**1593/1595 passing, 223/224 files** — the 2 remaining failures are in
`src/components/artifacts/ArtifactCard.test.tsx` and **fail identically
on pristine `origin/master`** (pre-existing upstream, unrelated to this
branch)
- Full server suite (`vitest run` in `server/`, same clean worktree):
results in PR checks; flag plumbing covered by instance-settings tests
- Targeted post-merge resolution check: `IssueChatThread`,
`IssueChatThreadSystemNotice`, `IssueDetail`, `Sidebar`,
`ConferenceRoomChatGate`, `OnboardingWizardVariant`, `NewIssueDialog`,
`InstanceExperimentalSettings`, `MarkdownEditor` — 172/172 passing
- Manual walkthrough: flag OFF (default) → onboarding wizard, task
thread, board chat, composer all render the classic UI; flag ON via
Settings → Experimental → capsule wizard, conference-room chat, unified
composer, status chips active
- Screenshots: see below
**Flag on/off screenshots** (committed on this branch under
`screenshots/PR-8000-*`):
| Surface | Flag OFF (classic, default) | Flag ON (experimental) |
| --- | --- | --- |
| Settings → Experimental | 
| 
|
| Task thread | 
| 
|
| Home / nav | 
| 
|
| Conference Room (flag-ON only surface) | — | 
|
Capsule onboarding wizard walkthrough screenshots (flag ON) are attached
to the Paperclip design/implementation threads; the wizard requires a
fresh instance so it is captured via the e2e harness
(`tests/e2e/nux-phase4-screenshots.spec.ts`).
## Risks
- **Large surface, but gated:** all new behavior sits behind
`enableConferenceRoomChat`, default OFF; flag-OFF rendering is locked by
frozen `*Classic` forks plus an on/off parity test suite
- **Classic forks are frozen at the fork point (`e3aada1d`):** master
features added to the live thread component after that point (assignee
handoff chips, run status badge, composer mention coach) render in the
flag-ON path; the flag-OFF task thread keeps the fork-point behavior
until the experiment graduates (forks deleted) or is dropped (forks
restored as canonical). Called out for reviewer attention.
- **Merge-conflict resolution in `IssueChatThread.tsx`** (commit
`21a5642a`) deserves reviewer eyes: master's new handoff/run-status
components were kept; the base toast-style no-assignee flow remains
replaced by the AlertDialog flow introduced on this branch
- Schema/server changes are additive (one optional boolean instance
setting); no migrations of existing data
## Model Used
- Claude (Anthropic) via Claude Code running in the Paperclip agent
harness (agent: ClaudeCoder)
- Branch implemented across multiple agent sessions on Claude Opus-class
models with extended thinking + tool use (file edits, shell, Playwright
screenshots); merge/PR session model ID as reported by the harness:
`claude-fable-5` (Claude Code CLI)
- All code was agent-authored and board-reviewed through Paperclip issue
threads (plans, wireframes, confirmations) before merging
## Checklist
- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes (none
required — experimental flag, self-documenting Settings card; noted
above)
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green (run 3 on `8af3041a`: all 16
gates SUCCESS, incl. e2e and all 4 serialized-suite shards)
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
(re-review verdict: Confidence 5/5, “Safe to merge”; all 4 round-1
findings fixed + confirmed resolved; both summary notes addressed in
`8af3041a`)
- [x] I will address all Greptile and reviewer comments before
requesting merge
---------
Co-authored-by: Paperclip <noreply@paperclip.ing>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
scotttong
+100
-29
@@ -112,9 +112,11 @@ import {
|
||||
AvatarGroup,
|
||||
AvatarGroupCount,
|
||||
} from "@/components/ui/avatar";
|
||||
import { StatusBadge, AgentStatusBadge, AgentStatusCapsule } from "@/components/StatusBadge";
|
||||
import { AgentCapsule, AGENT_GRADIENT_COUNT } from "@/components/AgentCapsule";
|
||||
import { StatusBadge, IssueStatusBadge } from "@/components/StatusBadge";
|
||||
import { StatusIcon } from "@/components/StatusIcon";
|
||||
import { PriorityIcon } from "@/components/PriorityIcon";
|
||||
import { agentStatusDot, agentStatusDotDefault } from "@/lib/status-colors";
|
||||
import { EntityRow } from "@/components/EntityRow";
|
||||
import { EmptyState } from "@/components/EmptyState";
|
||||
import { MetricCard } from "@/components/MetricCard";
|
||||
@@ -470,7 +472,7 @@ export function DesignGuide() {
|
||||
|
||||
<SubSection title="With icons">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button><Plus /> New Task</Button>
|
||||
<Button><Plus /> New Issue</Button>
|
||||
<Button variant="outline"><Upload /> Upload</Button>
|
||||
<Button variant="destructive"><Trash2 /> Delete</Button>
|
||||
<Button size="sm"><Plus /> Add</Button>
|
||||
@@ -518,6 +520,16 @@ export function DesignGuide() {
|
||||
</div>
|
||||
</SubSection>
|
||||
|
||||
<SubSection title="IssueStatusBadge (brand chip + glyph — PAP-75)">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{["backlog", "todo", "in_progress", "in_review", "done", "blocked", "cancelled"].map(
|
||||
(s) => (
|
||||
<IssueStatusBadge key={s} status={s} />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</SubSection>
|
||||
|
||||
<SubSection title="StatusIcon (interactive)">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
{["backlog", "todo", "in_progress", "in_review", "done", "cancelled", "blocked"].map(
|
||||
@@ -550,18 +562,14 @@ export function DesignGuide() {
|
||||
</div>
|
||||
</SubSection>
|
||||
|
||||
<SubSection title="Agent status (capsule + chip)">
|
||||
<p className="text-xs text-muted-foreground mb-3 max-w-prose">
|
||||
The agents section uses a brand heartbeat capsule (8×16) plus a brand
|
||||
<code className="mx-1">.task-chip</code>. Four states only: idle (gray),
|
||||
running (blue, pulses), paused (amber), error (red, blinks). Motion
|
||||
honors <code>prefers-reduced-motion</code>.
|
||||
</p>
|
||||
<div className="flex items-center gap-6 flex-wrap">
|
||||
{(["idle", "running", "paused", "error"] as const).map((label) => (
|
||||
<SubSection title="Agent status dots">
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
{(["running", "active", "paused", "error", "archived"] as const).map((label) => (
|
||||
<div key={label} className="flex items-center gap-2">
|
||||
<AgentStatusCapsule status={label} />
|
||||
<AgentStatusBadge status={label} />
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className={`inline-flex h-full w-full rounded-full ${agentStatusDot[label] ?? agentStatusDotDefault}`} />
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -598,6 +606,69 @@ export function DesignGuide() {
|
||||
</SubSection>
|
||||
</Section>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* AGENT CAPSULE */}
|
||||
{/* ============================================================ */}
|
||||
<Section title="Agent Capsule">
|
||||
<p className="text-sm text-muted-foreground max-w-prose">
|
||||
The brand "capsule is the agent" motif. A single agent reads as a tall
|
||||
pill that moves through three states as it comes to life. The online fill uses
|
||||
the live brand agent-gradient tokens (<code className="font-mono">--agent-Na</code> →{" "}
|
||||
<code className="font-mono">--agent-Nb</code>); <code className="font-mono">prefers-reduced-motion</code>{" "}
|
||||
skips the liquid rise and pulses and renders the final state.
|
||||
</p>
|
||||
<SubSection title="States">
|
||||
<div className="flex items-end gap-10">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AgentCapsule state="slot" />
|
||||
<span className="text-xs text-muted-foreground">slot</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AgentCapsule state="configured" />
|
||||
<span className="text-xs text-muted-foreground">configured</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AgentCapsule state="online" gradient={5} />
|
||||
<span className="text-xs text-muted-foreground">online</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AgentCapsule state="online" gradient={5} glow="blue" />
|
||||
<span className="text-xs text-muted-foreground">online · blue glow</span>
|
||||
</div>
|
||||
</div>
|
||||
</SubSection>
|
||||
<SubSection title="Sizes">
|
||||
<div className="flex items-end gap-8">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AgentCapsule state="online" size="sm" gradient={1} />
|
||||
<span className="text-xs text-muted-foreground">sm</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AgentCapsule state="online" size="md" gradient={4} />
|
||||
<span className="text-xs text-muted-foreground">md</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AgentCapsule state="online" size="lg" gradient={8} />
|
||||
<span className="text-xs text-muted-foreground">lg</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<AgentCapsule state="online" size={{ width: 28, height: 96 }} gradient={6} />
|
||||
<span className="text-xs text-muted-foreground">custom px</span>
|
||||
</div>
|
||||
</div>
|
||||
</SubSection>
|
||||
<SubSection title="Gradients">
|
||||
<div className="flex items-end gap-3 flex-wrap">
|
||||
{Array.from({ length: AGENT_GRADIENT_COUNT }, (_, i) => (
|
||||
<div key={i} className="flex flex-col items-center gap-1.5">
|
||||
<AgentCapsule state="online" size="sm" gradient={i + 1} />
|
||||
<span className="text-[10px] font-mono text-muted-foreground">{i + 1}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SubSection>
|
||||
</Section>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* FORM ELEMENTS */}
|
||||
{/* ============================================================ */}
|
||||
@@ -727,11 +798,11 @@ export function DesignGuide() {
|
||||
checked={menuChecked}
|
||||
onCheckedChange={(value) => setMenuChecked(value === true)}
|
||||
>
|
||||
Watch task
|
||||
Watch issue
|
||||
</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuItem variant="destructive">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
Delete task
|
||||
Delete issue
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
@@ -784,7 +855,7 @@ export function DesignGuide() {
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Task Properties</SheetTitle>
|
||||
<SheetTitle>Issue Properties</SheetTitle>
|
||||
<SheetDescription>Edit metadata without leaving the current page.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="space-y-4 px-4">
|
||||
@@ -836,7 +907,7 @@ export function DesignGuide() {
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<CircleDot className="h-4 w-4" />
|
||||
Tasks
|
||||
Issues
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
@@ -847,7 +918,7 @@ export function DesignGuide() {
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<Plus className="h-4 w-4" />
|
||||
Create new task
|
||||
Create new issue
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
@@ -870,7 +941,7 @@ export function DesignGuide() {
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Task List</BreadcrumbPage>
|
||||
<BreadcrumbPage>Issue List</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
@@ -899,7 +970,7 @@ export function DesignGuide() {
|
||||
<SubSection title="Metric Cards">
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
<MetricCard icon={Bot} value={12} label="Active Agents" description="+3 this week" />
|
||||
<MetricCard icon={CircleDot} value={48} label="Open Tasks" />
|
||||
<MetricCard icon={CircleDot} value={48} label="Open Issues" />
|
||||
<MetricCard icon={DollarSign} value="$1,234" label="Monthly Cost" description="Under budget" />
|
||||
<MetricCard icon={Zap} value="99.9%" label="Uptime" />
|
||||
</div>
|
||||
@@ -968,7 +1039,7 @@ export function DesignGuide() {
|
||||
identifier="PAP-001"
|
||||
title="Implement authentication flow"
|
||||
subtitle="Assigned to Agent Alpha"
|
||||
trailing={<StatusBadge status="in_progress" />}
|
||||
trailing={<IssueStatusBadge status="in_progress" />}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<EntityRow
|
||||
@@ -981,7 +1052,7 @@ export function DesignGuide() {
|
||||
identifier="PAP-002"
|
||||
title="Set up CI/CD pipeline"
|
||||
subtitle="Completed 2 days ago"
|
||||
trailing={<StatusBadge status="done" />}
|
||||
trailing={<IssueStatusBadge status="done" />}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<EntityRow
|
||||
@@ -993,7 +1064,7 @@ export function DesignGuide() {
|
||||
}
|
||||
identifier="PAP-003"
|
||||
title="Write API documentation"
|
||||
trailing={<StatusBadge status="todo" />}
|
||||
trailing={<IssueStatusBadge status="todo" />}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<EntityRow
|
||||
@@ -1006,7 +1077,7 @@ export function DesignGuide() {
|
||||
identifier="PAP-004"
|
||||
title="Deploy to production"
|
||||
subtitle="Blocked by PAP-001"
|
||||
trailing={<StatusBadge status="blocked" />}
|
||||
trailing={<IssueStatusBadge status="blocked" />}
|
||||
selected
|
||||
/>
|
||||
</div>
|
||||
@@ -1298,7 +1369,7 @@ export function DesignGuide() {
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground cursor-pointer">
|
||||
<CircleDot className="h-4 w-4" />
|
||||
Tasks
|
||||
Issues
|
||||
<span className="ml-auto text-xs bg-primary text-primary-foreground rounded-full px-1.5 py-0.5">
|
||||
12
|
||||
</span>
|
||||
@@ -1331,7 +1402,7 @@ export function DesignGuide() {
|
||||
{/* ============================================================ */}
|
||||
{/* GROUPED LIST (Issues pattern) */}
|
||||
{/* ============================================================ */}
|
||||
<Section title="Grouped List (Tasks pattern)">
|
||||
<Section title="Grouped List (Issues pattern)">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 px-4 py-2 bg-muted/50 rounded-t-md">
|
||||
<StatusIcon status="in_progress" />
|
||||
@@ -1588,7 +1659,7 @@ export function DesignGuide() {
|
||||
<div className="border border-border rounded-md divide-y divide-border text-sm">
|
||||
{[
|
||||
["Cmd+K / Ctrl+K", "Open Command Palette"],
|
||||
["C", "New Task (outside inputs)"],
|
||||
["C", "New Issue (outside inputs)"],
|
||||
["[", "Toggle Sidebar"],
|
||||
["]", "Toggle Properties Panel"],
|
||||
|
||||
@@ -1604,7 +1675,7 @@ export function DesignGuide() {
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Task Output Surface">
|
||||
<Section title="Issue Output Surface">
|
||||
<SubSection title="Multiple outputs (primary video + 'Also produced')">
|
||||
<IssueOutputSection workProducts={DESIGN_GUIDE_OUTPUTS} />
|
||||
</SubSection>
|
||||
@@ -1613,7 +1684,7 @@ export function DesignGuide() {
|
||||
</SubSection>
|
||||
<SubSection title="Empty state">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
When a task has produced no artifact work products, the Output section renders nothing
|
||||
When an issue has produced no artifact work products, the Output section renders nothing
|
||||
at all (no placeholder card).
|
||||
</p>
|
||||
</SubSection>
|
||||
|
||||
Reference in New Issue
Block a user