Wave-5 refinement round 2 (owner's batch)
- Home view: StatsBar under the composer (model+thinking control) — the DOCK geometry matches the chat view (max-w-[46rem] px-4) so nothing shifts when a session starts; pre-chat selection persists via deferred save (ModelControl chatId-empty) + PUT after POST /api/chats. - Answer marks (✓/✗): same visual size as row text, vertically centered; colored green-500/red-500 matching the verdict chips. - All user-typed inputs (composer, question-dock text/thinking/Other, answered-card 'your thinking' and free-text records) now render Source Sans 3 via the font-prose utility. Placeholders inherit the family via the element. - Answered-card explanation: markdown wrapper made truly inline so the 'Why:' label + the paragraph sit on one line — removes the oversized leading gap.
This commit is contained in:
amosblomqvist
@@ -58,7 +58,17 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
)}
|
||||
>
|
||||
{isQuiz && (
|
||||
<span className="w-4 shrink-0">
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
// Same visual size as the row text, vertically centered,
|
||||
// colored like the verdict chips (owner).
|
||||
"flex size-4 shrink-0 items-center justify-center text-sm font-semibold leading-none",
|
||||
sel && key && "text-green-500",
|
||||
sel && !key && "text-red-500",
|
||||
!sel && key && "text-green-500",
|
||||
)}
|
||||
>
|
||||
{sel && key && "✓"}
|
||||
{sel && !key && "✗"}
|
||||
{!sel && key && "✓"}
|
||||
@@ -84,7 +94,7 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{answer.text && <div className="mt-2 whitespace-pre-wrap text-sm">“{answer.text}”</div>}
|
||||
{answer.text && <div className="font-prose mt-2 whitespace-pre-wrap text-sm">“{answer.text}”</div>}
|
||||
{answer.dontKnow && isQuiz && <div className="mt-2 text-sm text-muted-foreground">Answered “I don't know”.</div>}
|
||||
|
||||
{answer.note && (
|
||||
@@ -92,14 +102,16 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
<span className="mb-0.5 block text-xxs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Your thinking
|
||||
</span>
|
||||
<span className="block whitespace-pre-wrap text-sm text-foreground/90">{answer.note}</span>
|
||||
<span className="font-prose block whitespace-pre-wrap text-sm text-foreground/90">{answer.note}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isQuiz && answer.explanation && (
|
||||
<div className="mt-3 rounded-lg bg-muted px-3 py-2 text-sm text-muted-foreground">
|
||||
<span className="font-medium text-foreground">Why: </span>
|
||||
<MessageResponse className="inline">{answer.explanation}</MessageResponse>
|
||||
{/* The markdown wrapper must go truly inline — a block <p> after the
|
||||
"Why:" label created the oversized leading gap (owner's fix list). */}
|
||||
<MessageResponse className="inline [&_p]:inline [&_p]:m-0">{answer.explanation}</MessageResponse>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -59,7 +59,7 @@ export function Composer({
|
||||
placeholder="Ask, answer, or steer the lesson…"
|
||||
autoFocus={autoFocus}
|
||||
rows={1}
|
||||
className="field-sizing-content max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
||||
className="field-sizing-content font-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
{verdict && !busy ? (
|
||||
// The plan verdict (docs/probe-teach-split.md §4): accept
|
||||
|
||||
+26
-1
@@ -5,6 +5,8 @@ import { useRouter } from "next/navigation";
|
||||
import { CornerDownLeftIcon } from "lucide-react";
|
||||
import { GraphView } from "@/components/graph-view";
|
||||
import { SidebarToggle } from "@/components/sidebar";
|
||||
import { StatsBar } from "@/components/stats-bar";
|
||||
import type { ChatSettings, TurnUsage } from "@/src/core";
|
||||
|
||||
/**
|
||||
* Home — the knowledge graph is the main view (placeholder until the graph
|
||||
@@ -15,6 +17,10 @@ export function Home() {
|
||||
const router = useRouter();
|
||||
const [topic, setTopic] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
// The model+thinking selection made pre-chat — lifted from the StatsBar's
|
||||
// ModelControl, carried to the chat POST then PUT-on-create (the model
|
||||
// picker defers its save when chatId is empty; see components/model-picker).
|
||||
const [settings, setSettings] = useState<ChatSettings | undefined>(undefined);
|
||||
|
||||
const start = async () => {
|
||||
const t = topic.trim();
|
||||
@@ -27,6 +33,14 @@ export function Home() {
|
||||
body: JSON.stringify({ title: t }),
|
||||
});
|
||||
const { id } = (await res.json()) as { id: string };
|
||||
if (settings) {
|
||||
// Best-effort persist — the selection was made pre-chat.
|
||||
await fetch(`/api/chats/${id}/settings`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(settings),
|
||||
}).catch(() => {});
|
||||
}
|
||||
router.push(`/chat/${id}?prompt=${encodeURIComponent(t)}`);
|
||||
} catch {
|
||||
setBusy(false);
|
||||
@@ -46,7 +60,9 @@ export function Home() {
|
||||
|
||||
{/* New session — same floating blob as the chat composer. */}
|
||||
<div className="pb-4">
|
||||
<div className="mx-auto w-full max-w-3xl px-4">
|
||||
{/* Matches chat.tsx's DOCK geometry (max-w-[46rem] px-4) so nothing
|
||||
shifts when a session starts (owner). */}
|
||||
<div className="mx-auto w-full max-w-[46rem] px-4">
|
||||
<form
|
||||
className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
|
||||
onSubmit={(e) => {
|
||||
@@ -77,6 +93,15 @@ export function Home() {
|
||||
<CornerDownLeftIcon className="size-5" />
|
||||
</button>
|
||||
</form>
|
||||
{/* Same as the chat view's under-composer stats bar (owner) — no
|
||||
session yet, so money/context fold as "—"; the model +
|
||||
thinking control still works (deferred save). */}
|
||||
<StatsBar
|
||||
turns={[] as TurnUsage[]}
|
||||
chatId=""
|
||||
settings={settings}
|
||||
onSettingsSaved={setSettings}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -117,6 +117,13 @@ export function ModelControl({
|
||||
const save = useCallback(
|
||||
async (next: ChatSettings) => {
|
||||
setError(null);
|
||||
// Home view (pre-chat): defer — the selection rides along on the
|
||||
// chat POST and is PUT after creation (onSaved is still lifted).
|
||||
if (!chatId) {
|
||||
onSaved(next);
|
||||
setOpen(null);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetch(`/api/chats/${chatId}/settings`, {
|
||||
method: "PUT",
|
||||
|
||||
@@ -387,7 +387,7 @@ function QuestionDockForm({
|
||||
setSel((prev) => (prev.otherSelected ? prev : toggleOther(selectMode, prev)));
|
||||
}}
|
||||
placeholder="Type your own answer…"
|
||||
className="w-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
|
||||
className="font-prose w-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
@@ -429,7 +429,7 @@ function QuestionDockForm({
|
||||
}}
|
||||
placeholder="Type your answer…"
|
||||
rows={1}
|
||||
className="field-sizing-content max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
||||
className="field-sizing-content font-prose max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
) : (
|
||||
<textarea
|
||||
@@ -446,7 +446,7 @@ function QuestionDockForm({
|
||||
placeholder="Why this answer? What are you unsure about? Say as much as you like — the teacher reads all of this."
|
||||
rows={1}
|
||||
className={cn(
|
||||
"field-sizing-content max-h-48 w-full resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground/70",
|
||||
"field-sizing-content font-prose max-h-48 w-full resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground/70",
|
||||
// Phase-scaled prominence: teaching invites depth,
|
||||
// probing stays quick.
|
||||
phase === "teach" ? "min-h-[4.5rem]" : "min-h-10",
|
||||
|
||||
Reference in New Issue
Block a user