feat(rectification): confirm the tap on the choice card and show the declared minute on the empty board
The choice card now marks the tapped option with a check and 已选择 and, while the tap is being recorded, carries the same live row shape as a timeline step instead of only a wait cursor. Before any candidate exists the board's clock shows the declared birth minute, its body says what fills it later, and the column narrows to minmax(16rem, 18rem); the compact peek reads "填报 HH:MM". No house table is invented for the declared time — the Case API does not provide one. BUG-508, BUG-509 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
This commit is contained in:
Jesse_Chen
@@ -2635,6 +2635,11 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
|
||||
grid-template-columns: minmax(0, 1fr) minmax(18rem, 22.5rem);
|
||||
background: var(--color-canvas);
|
||||
}
|
||||
/* No candidate yet: the board only carries the declared time, so it takes less
|
||||
width until there is a house table to show. */
|
||||
.rectification-workspace.is-board-empty {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
|
||||
}
|
||||
.rectification-workspace.is-compact {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
@@ -2960,6 +2965,31 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
|
||||
line-height: 1.55;
|
||||
}
|
||||
.rectification-empty-state p { margin: 0; }
|
||||
/* The tap is being recorded: same shape as a timeline live row. */
|
||||
.rectification-choice-card__pending {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 24px;
|
||||
margin: 0;
|
||||
color: var(--color-ink-secondary);
|
||||
font-size: var(--type-body-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.rectification-choice-card__selected {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-inline-start: var(--space-2);
|
||||
color: var(--color-action);
|
||||
font-size: var(--type-caption);
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rectification-choice-card__selected svg { width: 14px; height: 14px; }
|
||||
.rectification-board__clock.is-declared { color: var(--color-ink-tertiary); }
|
||||
.rectification-board__empty { display: grid; gap: var(--space-1); }
|
||||
.rectification-board__empty p { margin: 0; }
|
||||
.rectification-snapshot {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
|
||||
@@ -443,6 +443,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
|
||||
shouldStartOpening,
|
||||
initialTurns,
|
||||
initialSnapshot,
|
||||
declaredTime,
|
||||
models,
|
||||
selectedModelId,
|
||||
onSelectModel,
|
||||
@@ -1471,6 +1472,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
|
||||
const boardPeek = compactBoard && !boardOpen ? (
|
||||
<RectificationBoardPeek
|
||||
result={candidateResult}
|
||||
declaredTime={declaredTime}
|
||||
expanded={boardOpen}
|
||||
boardId={boardId}
|
||||
onOpen={toggleBoard}
|
||||
@@ -1480,7 +1482,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
|
||||
return (
|
||||
<div
|
||||
ref={workspace}
|
||||
className={`rectification-workspace${compactBoard ? " is-compact" : ""}${boardOpen ? " is-board-open" : ""}`}
|
||||
className={`rectification-workspace${candidateResult ? "" : " is-board-empty"}${compactBoard ? " is-compact" : ""}${boardOpen ? " is-board-open" : ""}`}
|
||||
>
|
||||
{headerSlot && boardPeek ? createPortal(boardPeek, headerSlot) : null}
|
||||
<div className="rectification-workspace__chat" inert={compactBoard && boardOpen ? true : undefined}>
|
||||
@@ -1733,6 +1735,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
|
||||
</div>
|
||||
<RectificationBoard
|
||||
result={candidateResult}
|
||||
declaredTime={declaredTime}
|
||||
savedStatus={savedStatus}
|
||||
diff={boardDiff}
|
||||
compact={compactBoard}
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
windowScanLayerLabel,
|
||||
type WindowScanLayer,
|
||||
} from "@/lib/rectification-agentic/v9/refinement-packet";
|
||||
import { rectificationBoardEmptyCopy } from "@/lib/rectification-surface-state";
|
||||
import { RectificationHouseTableView } from "./rectification-house-table";
|
||||
import { ConfirmationGateDisclosure, TechniqueAuditDisclosure } from "./technique-audit-disclosure";
|
||||
|
||||
@@ -35,6 +36,7 @@ function LayerChips({ layers }: Readonly<{ layers: readonly WindowScanLayer[] }>
|
||||
|
||||
function RectificationBoardBody({
|
||||
result,
|
||||
declaredTime,
|
||||
savedStatus,
|
||||
diff,
|
||||
compact,
|
||||
@@ -42,6 +44,7 @@ function RectificationBoardBody({
|
||||
onClose,
|
||||
}: Readonly<{
|
||||
result: RectificationCandidateResult | null;
|
||||
declaredTime: string | null;
|
||||
savedStatus: "accepted" | "confirmed" | null;
|
||||
diff: RectificationBoardDiff;
|
||||
compact: boolean;
|
||||
@@ -50,6 +53,7 @@ function RectificationBoardBody({
|
||||
}>) {
|
||||
const table = result ? workingRectificationHouseTable(result) : null;
|
||||
const workingTime = workingRectificationTime(result);
|
||||
const emptyCopy = rectificationBoardEmptyCopy(declaredTime);
|
||||
const grouped = result ? groupWindowTransitions(result.windowTransitions) : [];
|
||||
const scoringMinutes = grouped.filter((row) => row.scoringLayers.length > 0);
|
||||
const displayMinutes = grouped.filter((row) => row.displayLayers.length > 0);
|
||||
@@ -69,7 +73,11 @@ function RectificationBoardBody({
|
||||
<header className="rectification-board__header">
|
||||
<div className="rectification-board__title-row">
|
||||
<h2 id={titleId}>当前盘面</h2>
|
||||
{workingTime ? <span className="rectification-board__clock">{workingTime}</span> : null}
|
||||
{workingTime
|
||||
? <span className="rectification-board__clock">{workingTime}</span>
|
||||
: emptyCopy.clock
|
||||
? <span className="rectification-board__clock is-declared">{emptyCopy.clock}</span>
|
||||
: null}
|
||||
{compact && (
|
||||
<button
|
||||
className="rectification-board__close"
|
||||
@@ -86,9 +94,9 @@ function RectificationBoardBody({
|
||||
<div className="rectification-board__body">
|
||||
<p className="sr-only" role="status" aria-live="polite" aria-atomic="true">{diff.liveMessage}</p>
|
||||
{!table && (
|
||||
<p className="rectification-board__empty">
|
||||
补充经历后，这里会显示当前本命宫位和换升时刻。
|
||||
</p>
|
||||
<div className="rectification-board__empty">
|
||||
{emptyCopy.lines.map((line) => <p key={line}>{line}</p>)}
|
||||
</div>
|
||||
)}
|
||||
{table && (
|
||||
<div className="rectification-snapshot">
|
||||
@@ -194,6 +202,7 @@ function RectificationBoardBody({
|
||||
|
||||
export function RectificationBoard({
|
||||
result,
|
||||
declaredTime,
|
||||
savedStatus,
|
||||
diff,
|
||||
compact,
|
||||
@@ -203,6 +212,7 @@ export function RectificationBoard({
|
||||
onClose,
|
||||
}: Readonly<{
|
||||
result: RectificationCandidateResult | null;
|
||||
declaredTime: string | null;
|
||||
savedStatus: "accepted" | "confirmed" | null;
|
||||
diff: RectificationBoardDiff;
|
||||
compact: boolean;
|
||||
@@ -237,6 +247,7 @@ export function RectificationBoard({
|
||||
>
|
||||
<RectificationBoardBody
|
||||
result={result}
|
||||
declaredTime={declaredTime}
|
||||
savedStatus={savedStatus}
|
||||
diff={diff}
|
||||
compact={compact}
|
||||
@@ -258,16 +269,18 @@ export function RectificationBoard({
|
||||
|
||||
export function RectificationBoardPeek({
|
||||
result,
|
||||
declaredTime = null,
|
||||
expanded,
|
||||
boardId,
|
||||
onOpen,
|
||||
}: Readonly<{
|
||||
result: RectificationCandidateResult | null;
|
||||
declaredTime?: string | null;
|
||||
expanded: boolean;
|
||||
boardId: string;
|
||||
onOpen: () => void;
|
||||
}>) {
|
||||
const peek = rectificationBoardPeekCopy(result);
|
||||
const peek = rectificationBoardPeekCopy(result, declaredTime);
|
||||
return (
|
||||
<button
|
||||
className="rectification-board-peek"
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { Check } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { InlineSpinner } from "@/components/inline-spinner";
|
||||
import type {
|
||||
ChoiceKey,
|
||||
RectificationChoiceCard as ChoiceCard,
|
||||
@@ -42,6 +44,14 @@ export function RectificationChoiceCard(props: RectificationChoiceCardProps) {
|
||||
className={`rectification-choice-card${embedded ? " is-embedded" : ""}${props.pending ? " is-pending" : ""}${answered ? " is-answered" : ""}`}
|
||||
aria-label={props.card.scoring ? "校正判断" : "盘外核对"}
|
||||
>
|
||||
{props.pending && answered ? (
|
||||
// The tap is being recorded: the same live-row shape as a timeline step,
|
||||
// so the card itself says something is happening.
|
||||
<p className="rectification-choice-card__pending" role="status">
|
||||
<InlineSpinner size={12} />
|
||||
<span className="agent-activity-status__text">正在记录…</span>
|
||||
</p>
|
||||
) : null}
|
||||
<fieldset
|
||||
className="birth-time-choice-question"
|
||||
disabled={props.pending || props.disabled || answered}
|
||||
@@ -61,6 +71,12 @@ export function RectificationChoiceCard(props: RectificationChoiceCardProps) {
|
||||
onClick={() => select(option.key)}
|
||||
>
|
||||
<strong>{option.key}.</strong> {option.label}
|
||||
{selectedKey === option.key ? (
|
||||
<span className="rectification-choice-card__selected">
|
||||
<Check aria-hidden="true" />
|
||||
已选择
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
@@ -70,6 +86,12 @@ export function RectificationChoiceCard(props: RectificationChoiceCardProps) {
|
||||
onClick={stop}
|
||||
>
|
||||
{props.card.stop_label}
|
||||
{selectedKey === "stop" ? (
|
||||
<span className="rectification-choice-card__selected">
|
||||
<Check aria-hidden="true" />
|
||||
已选择
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -160,13 +160,18 @@ export function diffRectificationBoard(
|
||||
};
|
||||
}
|
||||
|
||||
export function rectificationBoardPeekCopy(result: RectificationCandidateResult | null): Readonly<{
|
||||
export function rectificationBoardPeekCopy(
|
||||
result: RectificationCandidateResult | null,
|
||||
declaredTime: string | null = null,
|
||||
): Readonly<{
|
||||
title: string;
|
||||
detail: string | null;
|
||||
}> {
|
||||
const table = result ? workingRectificationHouseTable(result) : null;
|
||||
if (!table) {
|
||||
return { title: "当前盘面", detail: "补充经历后会在这里更新" };
|
||||
// Before any candidate exists the board still has a time to show: the one
|
||||
// the reader declared. Without one, say what fills it later.
|
||||
return { title: "当前盘面", detail: declaredTime ? `填报 ${declaredTime}` : "补充经历后会在这里更新" };
|
||||
}
|
||||
return { title: "当前盘面", detail: `${table.time} · 上升${table.lagna}` };
|
||||
}
|
||||
|
||||
@@ -522,7 +522,10 @@ test("compact board overlays chat as a bottom sheet above the composer", () => {
|
||||
assert.match(styles, /\.chat-header-rectification \.rectification-board-peek \{[\s\S]*width: auto/);
|
||||
assert.doesNotMatch(chat, /rectification-workspace__board-trigger/);
|
||||
assert.doesNotMatch(chat.slice(chat.indexOf("className=\"composer-wrap\""), chat.indexOf("<form className=\"composer\"")), /RectificationBoardPeek/);
|
||||
assert.match(chat, /className=\{`rectification-workspace\$\{compactBoard \? " is-compact" : ""\}\$\{boardOpen \? " is-board-open" : ""\}`\}/);
|
||||
// Was: the class template without `is-board-empty`. The board narrows while no
|
||||
// candidate exists (BUG-509); compact/open modifiers are unchanged and still
|
||||
// follow the empty modifier so the single-column layout wins.
|
||||
assert.match(chat, /className=\{`rectification-workspace\$\{candidateResult \? "" : " is-board-empty"\}\$\{compactBoard \? " is-compact" : ""\}\$\{boardOpen \? " is-board-open" : ""\}`\}/);
|
||||
});
|
||||
|
||||
test("rectification composer can stop a live agent run", () => {
|
||||
|
||||
Reference in New Issue
Block a user