50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T9ce,.cr-plan { display: grid; gap: var(--cr-space-4); padding: var(--cr-space-6); border-radius: var(--cr-radius-xl); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-plan__head { display: grid; gap: var(--cr-space-1); } .cr-plan__title { margin: 0; font-family: var(--cr-font-family-display); font-size: var(--cr-font-size-2xl); font-weight: var(--cr-font-weight-bold); letter-spacing: var(--cr-font-tracking-title); } .cr-plan__summary, .cr-plan__hint { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); } .cr-plan__steps { display: grid; gap: var(--cr-space-2); margin: 0; padding: 0; list-style: none; } .cr-plan__step { display: flex; align-items: center; gap: var(--cr-space-3); padding: 6px 6px 6px var(--cr-space-3); border-radius: 14px; background: var(--cr-color-glass-tile); } .cr-plan__step[data-removed] { background: transparent; box-shadow: inset 0 0 0 1px var(--cr-color-border-default); } .cr-plan__num { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: var(--cr-radius-full); background: var(--cr-color-bg-subtle); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-bold); } .cr-plan__text { flex: 1; min-width: 0; min-height: var(--cr-control-height-sm); padding: 0 var(--cr-space-2); border: 0; border-radius: var(--cr-radius-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: text; } .cr-plan__text:hover:not(:disabled) { background: var(--cr-color-bg-subtle); } .cr-plan__text:disabled { color: var(--cr-color-text-muted); text-decoration: line-through; cursor: default; } .cr-plan__text:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-plan__step .cr-input { flex: 1; } .cr-plan__tag { flex: none; padding: 3px 10px; border-radius: var(--cr-radius-full); background: var(--cr-color-ink-subtle); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); } .cr-plan__tools { display: flex; flex: none; } .cr-plan__up { transform: rotate(180deg); } .cr-plan__add { justify-self: start; } .cr-plan__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--cr-space-2); } .cr-plan__hint { margin-inline-end: auto; } 53:T1d21,'use client'; import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'; import { Button } from '@/components/creance/button/Button'; import { IconButton } from '@/components/creance/icon-button/IconButton'; import { Input } from '@/components/creance/input/Input'; import { cx } from '@/lib/creance/cx'; import { ArrowDownIcon, CrossIcon, PlusIcon } from '@/lib/creance/icons'; import { LiveRegion } from '@/lib/creance/LiveRegion'; import './PlanEditor.css'; export interface PlanStep { id: string; text: string; } export interface PlanEditorProps { /** The plan as the agent proposed it. */ steps: PlanStep[]; agentName: string; /** Called with the plan the person approved. Nothing runs before this. */ onStart: (steps: PlanStep[]) => void; /** Default "{agentName}'s plan". */ title?: ReactNode; headingLevel?: 2 | 3 | 4; className?: string; } interface Row extends PlanStep { origin: 'agent' | 'you'; edited: boolean; removed: boolean; } const fromAgent = (steps: PlanStep[]): Row[] => steps.map((s) => ({ ...s, origin: 'agent', edited: false, removed: false })); let added = 0; /** * The agent proposes a plan; the person reorders, edits, removes or adds steps before anything runs. * Alt+Up and Alt+Down move the focused step; every move is announced. */ export function PlanEditor({ steps, agentName, onStart, title, headingLevel = 3, className }: PlanEditorProps) { const id = useId(); const H = `h${headingLevel}` as const; const [rows, setRows] = useState(() => fromAgent(steps)); const [editing, setEditing] = useState(null); const [draft, setDraft] = useState(''); const [message, setMessage] = useState(''); const refocus = useRef(null); const live = rows.filter((r) => !r.removed); const changes = rows.filter((r) => r.origin === 'you' || r.edited || r.removed).length; useEffect(() => { if (refocus.current) document.getElementById(refocus.current)?.focus(); refocus.current = null; }); const move = (rowId: string, dir: -1 | 1) => { const order = live.map((r) => r.id); const at = order.indexOf(rowId); const to = at + dir; if (to < 0 || to >= order.length) return; const swap = order[to]!; setRows((prev) => { const next = [...prev]; const a = next.findIndex((r) => r.id === rowId); const b = next.findIndex((r) => r.id === swap); [next[a], next[b]] = [next[b]!, next[a]!]; return next; }); setMessage(`Step moved to position ${to + 1} of ${order.length}`); refocus.current = `${id}-text-${rowId}`; }; const save = (rowId: string) => { const text = draft.trim(); setRows((prev) => text ? prev.map((r) => (r.id === rowId ? { ...r, text, edited: r.origin === 'agent' && text !== steps.find((s) => s.id === rowId)?.text } : r)) : prev.filter((r) => r.id !== rowId || r.origin === 'agent'), ); setEditing(null); refocus.current = `${id}-text-${rowId}`; }; const keys = (e: KeyboardEvent, rowId: string) => { if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) { e.preventDefault(); move(rowId, e.key === 'ArrowUp' ? -1 : 1); } }; return (

{title ?? `${agentName}'s plan`} Nothing runs until you start it.{changes ? ` ${changes} ${changes === 1 ? 'change' : 'changes'} from the agent's plan.` : ''}

{editing === r.id ? ( setDraft(e.currentTarget.value)} onBlur={() => save(r.id)} onKeyDown={(e) => { if (e.key === 'Enter') save(r.id); if (e.key === 'Escape') { setEditing(null); refocus.current = `${id}-text-${r.id}`; } }} /> ) : ( )} {tag && {tag}} {r.removed ? ( ) : ( } disabled={n === 1} onClick={() => move(r.id, -1)} /> } disabled={n === live.length} onClick={() => move(r.id, 1)} /> } onClick={() => { setRows((p) => (r.origin === 'you' ? p.filter((x) => x.id !== r.id) : p.map((x) => (x.id === r.id ? { ...x, removed: true } : x)))); setMessage(`Step ${n} removed`); }} /> )}

Alt + ↑ ↓ moves the focused step.

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/button.json","https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/icon-button.json","https://creance.pages.dev/r/input.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"plan-editor/PlanEditor.css","content":"$52","type":"registry:file","target":"@components/creance/plan-editor/PlanEditor.css"},{"path":"plan-editor/PlanEditor.tsx","content":"$53","type":"registry:ui","target":"@components/creance/plan-editor/PlanEditor.tsx"}],"className":"h-[70svh] min-h-80"}]]}]