amosblomqvist
fb759b7aa0
Traffic lights (owner report: 'way too low, not aligned with the phase pill'): measured in the running app — circles centered at 30.75pt vs the pill box's 29.25pt (band 0-59.5, pill box 19-39.5, pill ink 28.75; uppercase glyphs sit high). trafficLightPosition y 24 -> 22.5 lands the circle centers at 29.25, exactly on the pill. Owner confirmed aligned after this change. Rename escape hitbox (owner report): entering rename was already width-of- title only, but the editing input spanned flex-1 so clicking the rest of the bar stayed inside the input. The input is now shrink-to-fit ([field-sizing:content], min 8ch / max 70%) and any mousedown outside the input blurs it, running the existing onBlur commit path; the header drops lh-drag while renaming so the drag region cannot eat the escape click. Verified: click-away commits (exactly one PUT), Escape discards, Enter commits. Phase pill is pure decoration (owner report: 'should not be interactable in any way'): no tooltip, pointer-events-none, select-none — part of the drag surface instead of a carved-out target. Graph chrome was unclickable in Electron (owner report): home.tsx's floating drag strip underlays the z-10 controls row, and Electron's app-region mask ignores z-index, so the region ate their clicks (plain browser unaffected — DOM hit-testing is fine). lh-no-drag carve-outs on the chrome row and the node detail card (it is placed imperatively anywhere, including the top strip). LhMark home link now mirrors the ghost toggle: same size-9 chip geometry and hover:bg-accent treatment.
92 lines
4.0 KiB
TypeScript
92 lines
4.0 KiB
TypeScript
import type { Phase3 } from "@/src/core";
|
|
|
|
/**
|
|
* The in-session phase presentation (owner, minimal-color round —
|
|
* monochrome now): the header chip next to the session title, and the
|
|
* dotted boundary rule the transcript draws where the session moves into a
|
|
* new phase. Phase COLOR is retired app-wide (phases only advance, so
|
|
* color-as-signal was decoration); the label text carries the phase, and
|
|
* the chip's old dot slot is repurposed for the braille spinner while a
|
|
* turn is in flight — motion is the honest state signal. Replaces the old
|
|
* inline plan-divider (artifact registry): the boundary is a MESSAGE-level
|
|
* seam, so chat.tsx renders it at the message where the phase changes, not
|
|
* inside a tool part.
|
|
*
|
|
* Quiet register (matches the old divider): hairline rules, small chips —
|
|
* never a banner. Probe never renders a divider: phases only advance, so
|
|
* probe is the start of the transcript and "Planning"/"Teaching" are the two
|
|
* visible seams.
|
|
*
|
|
* Owner, minimal-color round 2: the chip is LABEL-ONLY, deliberately — a
|
|
* working-state spinner was tried here and rejected: the pill's curve and
|
|
* the square braille cell fought for space, and the chat surface already
|
|
* shows in-flight work (thinking shimmer, the dock). The chip states the
|
|
* phase; work-state is the sidebar row's spinner.
|
|
*/
|
|
|
|
/** Header-chip labels: the phases as the learner thinks of them. */
|
|
const CHIP_LABEL: Record<Phase3, string> = {
|
|
probe: "Probing",
|
|
plan: "Planning",
|
|
teach: "Teaching",
|
|
};
|
|
|
|
/** The header chip: the phase label, monochrome — label-only by design
|
|
* (see the component note: the pill's curve suits text, not glyphs). */
|
|
export function PhaseChip({ phase }: { phase: Phase3 }) {
|
|
// Pure decoration (owner ask, 2026-09-17): no tooltip, not selectable,
|
|
// not interactive in any way — no pointer events at all, so it is part
|
|
// of the drag surface instead of a carved-out target.
|
|
return (
|
|
<span
|
|
data-testid="phase-chip"
|
|
data-phase={phase}
|
|
aria-hidden="true"
|
|
className="pointer-events-none flex shrink-0 select-none items-center rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
|
|
>
|
|
{CHIP_LABEL[phase]}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* The transcript boundary: a monochrome dotted rule at the message where
|
|
* the session enters `phase` (owner, minimal-color round — the label
|
|
* carries the transition; the phase color never did). The plan seam
|
|
* carries its node count ("Plan · 4 nodes"); teaching is just the label.
|
|
* Null for probe (defensive — the fold never emits a probe transition
|
|
* after the start).
|
|
*/
|
|
export function PhaseDivider({ phase, nodeCount }: { phase: Phase3; nodeCount?: number }) {
|
|
if (phase === "probe") return null;
|
|
const label =
|
|
phase === "plan" && nodeCount
|
|
? `Plan · ${nodeCount} node${nodeCount === 1 ? "" : "s"}`
|
|
: CHIP_LABEL[phase];
|
|
return (
|
|
<div className="my-4 flex w-full items-center gap-3" data-testid={`phase-divider-${phase}`}>
|
|
<span className="h-0 flex-1 border-t-2 border-dotted border-border/50" aria-hidden />
|
|
<span className="rounded-full border border-border/80 px-2.5 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
{label}
|
|
</span>
|
|
<span className="h-0 flex-1 border-t-2 border-dotted border-border/50" aria-hidden />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* The node count for a plan seam: the first plan-op tree output in the
|
|
* message that carries the seam (the plan_init that made the phase flip).
|
|
* Structural slice of a UI message, same shape-of-shapes as core/phases.ts.
|
|
*/
|
|
export function planNodeCount(
|
|
message: { parts: ReadonlyArray<{ type: string; state?: string; output?: unknown; [k: string]: unknown }> },
|
|
): number | undefined {
|
|
for (const part of message.parts) {
|
|
if (!part.type.startsWith("tool-plan_") || part.state !== "output-available") continue;
|
|
const tree = (part.output as { tree?: { nodes?: unknown[] } } | undefined)?.tree;
|
|
if (tree && Array.isArray(tree.nodes) && tree.nodes.length > 0) return tree.nodes.length;
|
|
}
|
|
return undefined;
|
|
}
|