Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
70977bad84 | ||
|
|
fdd63b27a9 | ||
|
|
bdd7d5e866 | ||
|
|
1c6ae6b2e2 | ||
|
|
d2d9fcd09e | ||
|
|
a65867fc39 | ||
|
|
8c564946ef | ||
|
|
f8ce0f21ef | ||
|
|
2da091d6e9 | ||
|
|
674d4bd8c6 | ||
|
|
a50ca4b867 | ||
|
|
b277ee3e0f | ||
|
|
9171a4f49c | ||
|
|
7fb9a1505c | ||
|
|
3cc598ded5 | ||
|
|
55a6501a09 | ||
|
|
d6e317c6fe | ||
|
|
0a9dabfdc2 | ||
|
|
5cf4e589be | ||
|
|
671d2c8bb7 | ||
|
|
e8c81faad9 | ||
|
|
480a29aaea | ||
|
|
c549494488 | ||
|
|
74b0c65843 | ||
|
|
04037e98d6 | ||
|
|
36338b3b55 | ||
|
|
8946209f98 | ||
|
|
624c91a437 | ||
|
|
24d1dda07d |
@@ -0,0 +1,59 @@
|
||||
name: Linux desktop release
|
||||
|
||||
# Manual until a native Linux runner is registered. The current 0.5.1
|
||||
# packages are built locally using the identical gates documented below.
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
tag:
|
||||
description: Existing stable version tag to package (for example v0.5.1)
|
||||
required: true
|
||||
type: string
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
releases: write
|
||||
|
||||
concurrency:
|
||||
group: gitea-release-${{ inputs.tag }}
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
linux:
|
||||
runs-on: ubuntu-24.04
|
||||
timeout-minutes: 60
|
||||
env:
|
||||
NEXT_TELEMETRY_DISABLED: "1"
|
||||
steps:
|
||||
- uses: https://github.com/actions/checkout@v7
|
||||
with:
|
||||
ref: ${{ inputs.tag }}
|
||||
persist-credentials: false
|
||||
- uses: https://github.com/actions/setup-node@v7
|
||||
with:
|
||||
node-version: "26"
|
||||
cache: npm
|
||||
- name: Tag must match package.json
|
||||
env:
|
||||
RELEASE_TAG: ${{ inputs.tag }}
|
||||
run: node --input-type=module -e 'import fs from "node:fs"; if (process.env.RELEASE_TAG !== `v${JSON.parse(fs.readFileSync("package.json")).version}`) process.exit(1)'
|
||||
- run: npm ci
|
||||
- run: npm run typecheck
|
||||
- run: npm test
|
||||
- run: npm run lint
|
||||
- name: Native PDF and SVG renderers
|
||||
run: npx electron --import tsx --test tests/pdf-native-render.test.ts tests/pdf-ops.test.ts tests/svg-native-render.test.ts tests/browser-service.test.ts
|
||||
env:
|
||||
NODE_ENV: test
|
||||
ELECTRON_RUN_AS_NODE: "1"
|
||||
- name: Build, smoke, package, and verify Linux installers
|
||||
run: npm run desktop:release:linux
|
||||
- name: Verify the packaged provider and demo runtimes
|
||||
run: |
|
||||
node scripts/smoke-provider-runtime.mjs --standalone dist/linux-unpacked/resources/server/standalone
|
||||
node scripts/smoke-provider-runtime.mjs --standalone dist/linux-unpacked/resources/server/standalone --runtime dist/linux-unpacked/learnharness
|
||||
xvfb-run -a node scripts/smoke-demo-runtime.mjs --standalone dist/linux-unpacked/resources/server/standalone --runtime dist/linux-unpacked/learnharness --browser
|
||||
- name: Upload and verify the draft (never publish)
|
||||
run: node scripts/gitea-release.mjs upload dist
|
||||
env:
|
||||
GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
|
||||
@@ -0,0 +1,49 @@
|
||||
name: Notify website of public desktop release
|
||||
|
||||
on:
|
||||
release:
|
||||
types: [published]
|
||||
|
||||
# Use only the separately scoped website token; no app token or checkout is needed.
|
||||
permissions: {}
|
||||
|
||||
jobs:
|
||||
notify-website:
|
||||
if: >-
|
||||
github.repository == 'amosblomqvist/learnharness' &&
|
||||
!github.event.release.draft && !github.event.release.prerelease
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 5
|
||||
steps:
|
||||
- name: Queue the website update for the published tag
|
||||
env:
|
||||
WEBSITE_DISPATCH_TOKEN: ${{ secrets.WEBSITE_DISPATCH_TOKEN }}
|
||||
RELEASE_TAG: ${{ github.event.release.tag_name }}
|
||||
shell: bash
|
||||
run: |
|
||||
set -euo pipefail
|
||||
if [[ -z "$WEBSITE_DISPATCH_TOKEN" ]]; then
|
||||
echo '::error::Missing WEBSITE_DISPATCH_TOKEN.'
|
||||
exit 1
|
||||
fi
|
||||
if [[ -z "$RELEASE_TAG" ]]; then
|
||||
echo '::error::The published release has no tag.'
|
||||
exit 1
|
||||
fi
|
||||
payload=$(jq -cn --arg tag "$RELEASE_TAG" \
|
||||
'{event_type:"desktop-release-published",client_payload:{tag:$tag}}')
|
||||
status=$(curl --fail-with-body --silent --show-error \
|
||||
--connect-timeout 15 --max-time 60 \
|
||||
--request POST \
|
||||
--header 'Accept: application/vnd.github+json' \
|
||||
--header "Authorization: Bearer $WEBSITE_DISPATCH_TOKEN" \
|
||||
--header 'X-GitHub-Api-Version: 2022-11-28' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data "$payload" \
|
||||
--output /dev/null --write-out '%{http_code}' \
|
||||
https://api.github.com/repos/amosblomqvist/learnharness-web/dispatches)
|
||||
if [[ "$status" != '204' ]]; then
|
||||
printf '::error::Expected dispatch HTTP 204, received %s.\n' "$status"
|
||||
exit 1
|
||||
fi
|
||||
echo 'Website update queued. This does not confirm website deployment.'
|
||||
+2
-1
@@ -4,7 +4,8 @@ data/
|
||||
*.log
|
||||
.DS_Store
|
||||
*.tsbuildinfo
|
||||
.env.local
|
||||
.env
|
||||
.env.*
|
||||
.memory/
|
||||
SCOPE.md
|
||||
# raw real-data import sources (user directive 2026-09-13: never commit)
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/**
|
||||
* GET /api/activity — the dock's one poll: every running background
|
||||
* process, every view (chat, home, everywhere). Composition only — the
|
||||
* feed lives in server/observability.ts; cost folds client-side via
|
||||
* core/prices.ts. See that module's header for why /api/jobs stays
|
||||
* feed lives in server/observability.ts; costs are projected server-side
|
||||
* through Pi's catalog and public calculator. See that module's header for why /api/jobs stays
|
||||
* chat-scoped and untouched.
|
||||
*/
|
||||
import { activityFeed } from "@/src/server";
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
* markers are invisible by the engine's law).
|
||||
*/
|
||||
import { sessionMarkdown } from "@/src/core";
|
||||
import { getChat } from "@/src/server";
|
||||
import { getChat, applicationLanguage } from "@/src/server";
|
||||
|
||||
/** Filename-safe title (own module scope on purpose: tiny + pure). */
|
||||
function slugify(title: string): string {
|
||||
const slug = title
|
||||
.toLowerCase()
|
||||
.normalize("NFKD")
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/[^\p{L}\p{N}]+/gu, "-")
|
||||
.replace(/^-+|-+$/g, "");
|
||||
return slug.length > 0 ? slug : "session";
|
||||
}
|
||||
@@ -27,11 +27,11 @@ export async function GET(_req: Request, ctx: { params: Promise<{ id: string }>
|
||||
const { id } = await ctx.params;
|
||||
const record = getChat(id);
|
||||
if (!record) return Response.json({ error: "Unknown chat" }, { status: 404 });
|
||||
const markdown = sessionMarkdown(record.messages, { title: record.title, anchors: false });
|
||||
const markdown = sessionMarkdown(record.messages, { title: record.title, anchors: false, language: applicationLanguage(_req.headers.get("accept-language")) });
|
||||
return new Response(markdown, {
|
||||
headers: {
|
||||
"content-type": "text/markdown; charset=utf-8",
|
||||
"content-disposition": `attachment; filename="${slugify(record.title)}.md"`,
|
||||
"content-disposition": `attachment; filename="${/^[a-z0-9-]+$/.test(slugify(record.title)) ? slugify(record.title) : "session"}.md"; filename*=UTF-8''${encodeURIComponent(slugify(record.title))}.md`,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { compactionInFlight, deleteChatSession, getChat, isTurnRunning, sessionCoverage, stores, type ChatDeleteMode } from "@/src/server";
|
||||
import { compactionInFlight, deleteChatSession, getChat, isTurnRunning, sessionCoverage, sessionCost, stores, type ChatDeleteMode } from "@/src/server";
|
||||
|
||||
export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
@@ -17,6 +17,7 @@ export async function GET(_req: Request, { params }: { params: Promise<{ id: str
|
||||
return Response.json({
|
||||
...chat,
|
||||
messages: chat.messages,
|
||||
pricing: sessionCost(chat),
|
||||
turnInFlight: isTurnRunning(id),
|
||||
compacting: compactionInFlight(id),
|
||||
coverage: sessionCoverage(id),
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* three usage channels (chat extraction runs, notes-source runs,
|
||||
* cluster-naming runs). Thin transport over src/server's graphCosts();
|
||||
* the fold itself is pure core (core/cost-summary.ts). Dollars are
|
||||
* inferred from PRICES at read time — never stored, so a price sync
|
||||
* inferred from Pi's catalog/calculator at read time — never stored, so a catalog update
|
||||
* re-prices the whole history for free.
|
||||
*
|
||||
* Scope (user-decided): the graph pipeline ONLY — teaching turns and
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
* healthy. The dock's chips + graph refetch track progress live through
|
||||
* /api/graph/status, as with session runs.
|
||||
*/
|
||||
import { extraction, NotesImportError } from "@/src/server";
|
||||
import { extraction, NotesImportError, applicationLanguage } from "@/src/server";
|
||||
import {
|
||||
ModelsNotConfiguredError,
|
||||
PROVIDER_KEY_MISSING_CODE,
|
||||
@@ -56,7 +56,7 @@ export async function POST(request: Request) {
|
||||
const { file, requestIndex } = next;
|
||||
try {
|
||||
const text = await file.text();
|
||||
const stats = await extraction.importNotes({ filePath: file.name, text });
|
||||
const stats = await extraction.importNotes({ filePath: file.name, text, language: applicationLanguage(request.headers.get("accept-language")) });
|
||||
results.push({ filePath: file.name, requestIndex, outcome: "completed", ok: true, stats });
|
||||
} catch (err) {
|
||||
if (err instanceof ModelsNotConfiguredError) {
|
||||
|
||||
@@ -598,3 +598,6 @@ body {
|
||||
outline: 1px solid var(--border);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Source Sans 3 lacks Cyrillic; Russian prose uses the bundled Noto Sans subset. */
|
||||
html[lang="ru"] { --font-sans3: var(--font-russian-prose); }
|
||||
|
||||
+22
-9
@@ -1,5 +1,9 @@
|
||||
import { headers } from "next/headers";
|
||||
import { readSettingsRecord } from "@/src/server";
|
||||
import { resolveLanguage, systemLanguage, translate } from "@/src/core";
|
||||
import { I18nProvider } from "@/components/i18n";
|
||||
import type { Metadata } from "next";
|
||||
import { JetBrains_Mono, Source_Sans_3 } from "next/font/google";
|
||||
import { JetBrains_Mono, Source_Sans_3, Noto_Sans } from "next/font/google";
|
||||
import "katex/dist/katex.min.css";
|
||||
import "./globals.css";
|
||||
import { AppShell, SidebarProvider } from "@/components/sidebar";
|
||||
@@ -10,21 +14,29 @@ import UpdateBanner from "@/components/update-banner";
|
||||
|
||||
// Chrome = JetBrains Mono, teaching prose = Source Sans 3, titles = CMU
|
||||
// Serif (the bundled lh-cmu @font-face in globals.css — no CDN).
|
||||
const ui = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains" });
|
||||
const ui = JetBrains_Mono({ subsets: ["latin", "cyrillic"], variable: "--font-jetbrains" });
|
||||
const prose = Source_Sans_3({ subsets: ["latin"], variable: "--font-sans3" });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Learning Harness",
|
||||
description: "A teacher agent with a memory — sessions, quizzes, and a knowledge graph of what you know.",
|
||||
};
|
||||
const russianProse = Noto_Sans({ subsets: ["latin", "cyrillic"], variable: "--font-russian-prose" });
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const language = resolveLanguage(readSettingsRecord()?.general?.language, (await headers()).get("accept-language"));
|
||||
return {
|
||||
title: "Learning Harness",
|
||||
description: translate(language, "A teacher agent with a memory — sessions, quizzes, and a knowledge graph of what you know."),
|
||||
};
|
||||
}
|
||||
|
||||
export default async function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
const general = readSettingsRecord()?.general ?? {};
|
||||
const system = systemLanguage((await headers()).get("accept-language"));
|
||||
const language = resolveLanguage(general.language, system);
|
||||
return (
|
||||
<html lang="en" className={`dark ${ui.variable} ${prose.variable}`}>
|
||||
<html lang={language} className={`dark ${ui.variable} ${prose.variable} ${russianProse.variable}`}>
|
||||
<body className="min-h-dvh antialiased">
|
||||
{/* The notification channel rides OUTSIDE everything: sidebar, dock,
|
||||
and pages all subscribe as the polls retire (push S3, 2026-10-02). */}
|
||||
<ServerEventsProvider>
|
||||
<I18nProvider initialGeneral={general} system={system}><ServerEventsProvider>
|
||||
<AppearanceProvider>
|
||||
<SidebarProvider>
|
||||
<ActivityProvider>
|
||||
@@ -35,6 +47,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
</ServerEventsProvider>
|
||||
{/* Auto-update banner (Wave C): fixed card, Electron-only pushes. */}
|
||||
<UpdateBanner />
|
||||
</I18nProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
@@ -60,13 +62,14 @@ export function AbortTurnBody({
|
||||
* (owner, 2026-10-04): the line says so. */
|
||||
busy?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const backdropDismiss = useBackdropDismiss(onClose);
|
||||
const copy = COPY[mode];
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={copy.title}
|
||||
aria-label={t(copy.title)}
|
||||
data-testid="abort-turn-dialog"
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
|
||||
// A genuine click on the scrim cancels — the cautious default, like Esc.
|
||||
@@ -77,11 +80,11 @@ export function AbortTurnBody({
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className="text-sm font-semibold text-card-foreground" data-testid="abort-turn-title">
|
||||
{copy.title}
|
||||
{t(copy.title)}
|
||||
</h2>
|
||||
<p className="mt-1.5 text-xs text-muted-foreground" data-testid="abort-turn-line">
|
||||
{copy.line}
|
||||
{busy && mode !== "turn" ? " The working turn stops too." : ""}
|
||||
{t(copy.line)}
|
||||
{busy && mode !== "turn" ? t(" The working turn stops too.") : ""}
|
||||
</p>
|
||||
<div className="mt-4 flex justify-end gap-2">
|
||||
<button
|
||||
@@ -90,8 +93,7 @@ export function AbortTurnBody({
|
||||
onClick={onClose}
|
||||
className="rounded-sm px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{t("Cancel")}</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="abort-turn-confirm"
|
||||
@@ -99,7 +101,7 @@ export function AbortTurnBody({
|
||||
// Destructive red — the app's established destructive pair.
|
||||
className="rounded-sm border border-destructive/50 bg-destructive/10 px-3 py-1.5 text-xs text-destructive transition-colors hover:bg-destructive/20"
|
||||
>
|
||||
{copy.action}
|
||||
{t(copy.action)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
"use client";
|
||||
import { translator, type Language } from "@/src/core";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { ActivityIcon, BotIcon, FileTextIcon, PenToolIcon, PlayIcon, SearchIcon, SquareIcon, WaypointsIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { CallUsage, JobKind, JobRecord } from "@/src/core";
|
||||
import { isModelsRefusal, isProviderKeyRefusal, jobCost } from "@/src/core";
|
||||
import { isModelsRefusal, isProviderKeyRefusal, subscriptionLabel, subscriptionLabels } from "@/src/core";
|
||||
import { formatTokens, planCostLabel } from "@/components/usage-format";
|
||||
import { useServerEvent, useServerResync } from "@/components/server-events";
|
||||
|
||||
@@ -20,7 +23,7 @@ import { useServerEvent, useServerResync } from "@/components/server-events";
|
||||
* Data: ONE feed of GET /api/activity (jobs across ALL chats, title-joined,
|
||||
* oldest-first + extraction runs), fetched when truth moves (events
|
||||
* channel, S5) and folded client-side with core/prices.ts.
|
||||
* Cost is INFERRED (jobCost); the context line is the LAST model call's
|
||||
* Cost is INFERRED server-side through Pi; the context line is the LAST model call's
|
||||
* input+output against the model's limit (JobUsage.lastStep — pending
|
||||
* contract) — never a cumulative sum, which would be the wrong number.
|
||||
* Absent data renders "—", never zero (the doctrine).
|
||||
@@ -48,6 +51,8 @@ interface FeedUsage extends NonNullable<JobRecord["usage"]> {
|
||||
}
|
||||
|
||||
export interface FeedJob extends JobRecord {
|
||||
/** Read-time server estimate; absent on older transport payloads. */
|
||||
costUsd?: number | null;
|
||||
title: string;
|
||||
usage?: FeedUsage;
|
||||
/** Server-joined live catalog limit (owner amendment 2026-09-23) —
|
||||
@@ -200,7 +205,7 @@ export function toBlobs(feed: ActivityFeed): ActivityBlob[] {
|
||||
// blob shape's call — here the line simply hides).
|
||||
const limit = job.contextLimit;
|
||||
if (usage && lastStep && limit !== null && lastStep.inputTokens !== undefined) {
|
||||
// Same metric as the session meter (prices.ts stepFootprint — the
|
||||
// Same metric as the session meter (four normalized buckets — the
|
||||
// context-meter audit, owner 2026-09-23): all four directions.
|
||||
// Provider "input" EXCLUDES cacheRead/cacheWrite, so input+output
|
||||
// alone reads wildly low on cache-heavy jobs.
|
||||
@@ -220,7 +225,7 @@ export function toBlobs(feed: ActivityFeed): ActivityBlob[] {
|
||||
title: job.title,
|
||||
chatId: job.chatId,
|
||||
startedAt: Date.parse(job.createdAt) || 0,
|
||||
cost: jobCost(job),
|
||||
cost: job.costUsd ?? null,
|
||||
context,
|
||||
// BYOK (owner, 2026-09-22): a refusal is info, not failure —
|
||||
// the honest line the runner left ("failed") reads as setup
|
||||
@@ -255,12 +260,13 @@ export function toBlobs(feed: ActivityFeed): ActivityBlob[] {
|
||||
}
|
||||
|
||||
/** Elapsed as a compact ticking string: 45s / 3m 04s / 1h 12m. */
|
||||
export function formatElapsed(ms: number): string {
|
||||
export function formatElapsed(ms: number, language: Language = "en"): string {
|
||||
const t = translator(language);
|
||||
const s = Math.max(0, Math.floor(ms / 1000));
|
||||
if (s < 60) return `${s}s`;
|
||||
if (s < 60) return t("{v0}s", { v0: s });
|
||||
const m = Math.floor(s / 60);
|
||||
if (m < 60) return `${m}m ${String(s % 60).padStart(2, "0")}s`;
|
||||
return `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`;
|
||||
if (m < 60) return t("{v0}m {v1}s", { v0: m, v1: String(s % 60).padStart(2, "0") });
|
||||
return t("{v0}h {v1}m", { v0: Math.floor(m / 60), v1: String(m % 60).padStart(2, "0") });
|
||||
}
|
||||
|
||||
// ─── The section (the sidebar's bottom strip) ─────────────────────────────────
|
||||
@@ -287,6 +293,7 @@ const KIND_ICON: Record<JobKind, typeof SearchIcon> = {
|
||||
type AbortState = "pending" | "failed";
|
||||
|
||||
export function ActivitySection({ feed: feedProp }: { feed?: ActivityFeed }) {
|
||||
const { t } = useI18n();
|
||||
const ctx = useContext(ActivityContext);
|
||||
const feed = feedProp ?? ctx.feed;
|
||||
const refresh = ctx.refresh;
|
||||
@@ -345,10 +352,9 @@ export function ActivitySection({ feed: feedProp }: { feed?: ActivityFeed }) {
|
||||
<section data-testid="activity-section" className="border-t border-border px-3 pb-3 pt-2">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-xs uppercase tracking-widest text-muted-foreground/70">
|
||||
<ActivityIcon className="size-3" />
|
||||
Background agents
|
||||
{blobs.length > 0 && (
|
||||
<span className="ml-auto tabular-nums" data-testid="activity-total-cost" title="Total running cost (inferred)">
|
||||
{planCostLabel(totalCost, blobs.some((blob) => blob.model?.startsWith("chatgpt:")))}
|
||||
{t("Background agents")}{blobs.length > 0 && (
|
||||
<span className="ml-auto tabular-nums" data-testid="activity-total-cost" title={t("Total running cost (inferred)")}>
|
||||
{planCostLabel(totalCost, subscriptionLabels(blobs.map((blob) => blob.model)))}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -387,19 +393,20 @@ function ActivityBlobRow({
|
||||
abortState: AbortState | undefined;
|
||||
onAbort: () => void;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
const Icon = blob.process === "extraction" ? WaypointsIcon : (blob.jobKind && KIND_ICON[blob.jobKind]) || BotIcon;
|
||||
const label =
|
||||
blob.process === "extraction"
|
||||
? `Extraction — ${blob.phase ?? "running"}`
|
||||
? t("Extraction — {v0}", { v0: t(blob.phase ?? "running") })
|
||||
: blob.jobKind === "research"
|
||||
? "Researcher"
|
||||
? t("Researcher")
|
||||
: blob.jobKind === "demo"
|
||||
? "Demo builder"
|
||||
? t("Demo builder")
|
||||
: blob.jobKind === "visual"
|
||||
? "Figure maker"
|
||||
? t("Figure maker")
|
||||
: blob.jobKind === "pdf"
|
||||
? "PDF reader"
|
||||
: "Sub-agent";
|
||||
? t("PDF reader")
|
||||
: t("Sub-agent");
|
||||
return (
|
||||
<div
|
||||
data-testid={`activity-blob-${blob.process}`}
|
||||
@@ -415,16 +422,16 @@ function ActivityBlobRow({
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate font-medium text-card-foreground">{blob.title}</span>
|
||||
{blob.activity ? (
|
||||
<span className="block truncate text-muted-foreground" title={blob.activity}>
|
||||
{blob.activity}
|
||||
<span className="block truncate text-muted-foreground" title={t(blob.activity)}>
|
||||
{t(blob.activity)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="block truncate text-muted-foreground/80">{label}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-2 tabular-nums text-muted-foreground">
|
||||
<span data-testid="activity-blob-cost">{planCostLabel(blob.cost, blob.model?.startsWith("chatgpt:") === true)}</span>
|
||||
<span data-testid="activity-blob-elapsed">{formatElapsed(now - blob.startedAt)}</span>
|
||||
<span data-testid="activity-blob-cost">{planCostLabel(blob.cost, subscriptionLabel(blob.model))}</span>
|
||||
<span data-testid="activity-blob-elapsed">{formatElapsed(now - blob.startedAt, language)}</span>
|
||||
</span>
|
||||
</button>
|
||||
{/* The explicit END always on the blob's face (SCOPE) — the popover
|
||||
@@ -435,8 +442,8 @@ function ActivityBlobRow({
|
||||
data-testid="activity-abort"
|
||||
onClick={onAbort}
|
||||
disabled={abortState !== undefined}
|
||||
title={abortState === "failed" ? "Abort failed — try again" : "End this background process"}
|
||||
aria-label={`End ${label} in ${blob.title}`}
|
||||
title={abortState === "failed" ? t("Abort failed — try again") : t("End this background process")}
|
||||
aria-label={t("End {v0} in {v1}", { v0: label, v1: blob.title })}
|
||||
className="absolute right-1 top-1/2 -translate-y-1/2 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
|
||||
>
|
||||
<SquareIcon className="size-3" />
|
||||
@@ -451,47 +458,46 @@ function ActivityBlobRow({
|
||||
<Icon className="size-3.5 text-muted-foreground" />
|
||||
<span className="font-medium">{label}</span>
|
||||
<span className="ml-auto tabular-nums text-muted-foreground">
|
||||
{formatElapsed(now - blob.startedAt)}
|
||||
{formatElapsed(now - blob.startedAt, language)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 text-muted-foreground">
|
||||
<div className="truncate text-card-foreground" title={blob.title}>
|
||||
{blob.title}
|
||||
</div>
|
||||
{blob.activity && <div className="break-words">{blob.activity}</div>}
|
||||
{blob.activity && <div className="break-words">{t(blob.activity)}</div>}
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Cost</span>
|
||||
<span>{t("Cost")}</span>
|
||||
<span className="tabular-nums text-card-foreground">
|
||||
{planCostLabel(blob.cost, blob.model?.startsWith("chatgpt:") === true)}
|
||||
{planCostLabel(blob.cost, subscriptionLabel(blob.model))}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Context</span>
|
||||
<span>{t("Context")}</span>
|
||||
<span className="tabular-nums text-card-foreground" data-testid="activity-blob-context">
|
||||
{blob.context === null
|
||||
? "—"
|
||||
: `${formatTokens(blob.context.used)} / ${formatTokens(blob.context.limit)}`}
|
||||
: `${formatTokens(blob.context.used, language)} / ${formatTokens(blob.context.limit, language)}`}
|
||||
</span>
|
||||
</div>
|
||||
{blob.model && (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Model</span>
|
||||
<span>{t("Model")}</span>
|
||||
<span className="truncate text-card-foreground">{blob.model}</span>
|
||||
</div>
|
||||
)}
|
||||
{blob.steps !== undefined && (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Steps</span>
|
||||
<span>{t("Steps")}</span>
|
||||
<span className="tabular-nums text-card-foreground">{blob.steps}</span>
|
||||
</div>
|
||||
)}
|
||||
<a href={`/chat/${blob.chatId}`} className="text-primary hover:underline">
|
||||
Open session →
|
||||
</a>
|
||||
{t("Open session →")}</a>
|
||||
</div>
|
||||
<div className="mt-2 text-muted-foreground/80">
|
||||
{abortState === "failed" && "Abort failed — try again"}
|
||||
{abortState === "pending" && "Stopping…"}
|
||||
{abortState === "failed" && t("Abort failed — try again")}
|
||||
{abortState === "pending" && t("Stopping…")}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -31,6 +33,8 @@ import {
|
||||
import remarkBreaks from "remark-breaks";
|
||||
import {
|
||||
Streamdown,
|
||||
defaultTranslations,
|
||||
type StreamdownTranslations,
|
||||
type PluginConfig,
|
||||
} from "streamdown";
|
||||
import { mdComponents } from "@/components/md-blocks";
|
||||
@@ -264,11 +268,12 @@ export const MessageBranchPrevious = ({
|
||||
children,
|
||||
...props
|
||||
}: MessageBranchPreviousProps) => {
|
||||
const { t } = useI18n();
|
||||
const { goToPrevious, totalBranches } = useMessageBranch();
|
||||
|
||||
return (
|
||||
<Button
|
||||
aria-label="Previous branch"
|
||||
aria-label={t("Previous branch")}
|
||||
disabled={totalBranches <= 1}
|
||||
onClick={goToPrevious}
|
||||
size="icon-sm"
|
||||
@@ -287,11 +292,12 @@ export const MessageBranchNext = ({
|
||||
children,
|
||||
...props
|
||||
}: MessageBranchNextProps) => {
|
||||
const { t } = useI18n();
|
||||
const { goToNext, totalBranches } = useMessageBranch();
|
||||
|
||||
return (
|
||||
<Button
|
||||
aria-label="Next branch"
|
||||
aria-label={t("Next branch")}
|
||||
disabled={totalBranches <= 1}
|
||||
onClick={goToNext}
|
||||
size="icon-sm"
|
||||
@@ -310,6 +316,7 @@ export const MessageBranchPage = ({
|
||||
className,
|
||||
...props
|
||||
}: MessageBranchPageProps) => {
|
||||
const { t } = useI18n();
|
||||
const { currentBranch, totalBranches } = useMessageBranch();
|
||||
|
||||
return (
|
||||
@@ -320,7 +327,7 @@ export const MessageBranchPage = ({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{currentBranch + 1} of {totalBranches}
|
||||
{currentBranch + 1}{" "}{t("of")}{" "}{totalBranches}
|
||||
</ButtonGroupText>
|
||||
);
|
||||
};
|
||||
@@ -357,6 +364,8 @@ export const streamdownPlugins = {
|
||||
|
||||
export const MessageResponse = memo(
|
||||
({ className, children, ...props }: MessageResponseProps) => {
|
||||
const { t } = useI18n();
|
||||
const translations = Object.fromEntries(Object.entries(defaultTranslations).map(([key, text]) => [key, t(text)])) as Partial<StreamdownTranslations>;
|
||||
// Legacy backslash delimiters are converted in a single linear scan;
|
||||
// native dollar math passes through to Streamdown unchanged. Incomplete
|
||||
// legacy spans are left for a later render when their closer arrives.
|
||||
@@ -373,6 +382,7 @@ export const MessageResponse = memo(
|
||||
"lh-prose size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
|
||||
className
|
||||
)}
|
||||
translations={translations}
|
||||
components={mdComponents}
|
||||
plugins={streamdownPlugins}
|
||||
{...props}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
||||
import { blurAfterPointerClick } from "@/components/focus-hygiene";
|
||||
@@ -134,20 +135,22 @@ export type ReasoningTriggerProps = ComponentProps<
|
||||
for a few seconds"), bookkeeping for information we knowingly lose. The
|
||||
label pairs with the user's collapsed "Your thinking" rows — one
|
||||
language; motion (spinner + shimmer) stays the working signal. */
|
||||
const defaultGetThinkingMessage = (isStreaming: boolean) => {
|
||||
const DefaultThinkingMessage = ({ isStreaming }: { isStreaming: boolean }) => {
|
||||
const { t } = useI18n();
|
||||
if (isStreaming) {
|
||||
return <Shimmer duration={1}>Thinking...</Shimmer>;
|
||||
return <Shimmer duration={1}>{t("Thinking...")}</Shimmer>;
|
||||
}
|
||||
return <p>AGENT’S THINKING</p>;
|
||||
return <p>{t("AGENT’S THINKING")}</p>;
|
||||
};
|
||||
|
||||
export const ReasoningTrigger = memo(
|
||||
({
|
||||
className,
|
||||
children,
|
||||
getThinkingMessage = defaultGetThinkingMessage,
|
||||
getThinkingMessage = (isStreaming) => <DefaultThinkingMessage isStreaming={isStreaming} />,
|
||||
...props
|
||||
}: ReasoningTriggerProps) => {
|
||||
const { t } = useI18n();
|
||||
const { isStreaming, isOpen } = useReasoning();
|
||||
|
||||
return (
|
||||
@@ -175,7 +178,7 @@ export const ReasoningTrigger = memo(
|
||||
the component default (h-3) — IDENTICAL to the placeholder
|
||||
spinner (owner, 2026-10-02): the handoff between the two
|
||||
states must be visually seamless, one size everywhere. */}
|
||||
{isStreaming && <BrailleSpinner label="Thinking" />}
|
||||
{isStreaming && <BrailleSpinner label={t("Thinking")} />}
|
||||
{getThinkingMessage(isStreaming)}
|
||||
<ChevronDownIcon
|
||||
className={cn(
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useState } from "react";
|
||||
import { ConfidenceRail } from "@/components/confidence-rail";
|
||||
@@ -20,12 +22,12 @@ import { parseAskInput, parseQuizInput } from "@/src/core";
|
||||
* the explanation, with NO verdict chips (owner ruling 2026-09-27).
|
||||
*/
|
||||
export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; input?: unknown }) {
|
||||
const { t } = useI18n();
|
||||
const [whyOpen, setWhyOpen] = useState(false); // the tucked explanation (predictions, owner 2026-10-03)
|
||||
if (answer.dismissed) {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
|
||||
<span className="font-medium">{answer.questionText}</span> — skipped
|
||||
</div>
|
||||
<span className="font-medium">{answer.questionText}</span> {" "}{t("— skipped")}</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -51,7 +53,7 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
|
||||
ThinkingBlock, instead of an inset inside the answer. Same muted
|
||||
rail as before; the label is now plain "Your thinking". */}
|
||||
{answer.readingThinking && (
|
||||
<ThinkingBlock testId="reading-thinking-block" label="YOUR THINKING" text={answer.readingThinking} defaultOpen />
|
||||
<ThinkingBlock testId="reading-thinking-block" label={t("YOUR THINKING")} text={answer.readingThinking} defaultOpen />
|
||||
)}
|
||||
{/* [&>*:last-child]:mb-0 (owner round, 2026-10-07): on ask cards the
|
||||
thinking row is the last child — its my-3 stacked with the card's
|
||||
@@ -66,23 +68,23 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
|
||||
cards label Probe/Recall — the phase boundary visible in the
|
||||
transcript. No `tool` on old records: kind labels as before. */}
|
||||
{answer.tool === "probe"
|
||||
? "Probe"
|
||||
? t("Probe")
|
||||
: answer.tool === "recall"
|
||||
? "Recall"
|
||||
? t("Recall")
|
||||
: isQuiz
|
||||
? answer.questionType === "predict"
|
||||
? "Prediction"
|
||||
: "Check"
|
||||
? t("Prediction")
|
||||
: t("Check")
|
||||
: isExplain
|
||||
? "Explain"
|
||||
: "Question"}
|
||||
? t("Explain")
|
||||
: t("Question")}
|
||||
{isQuiz &&
|
||||
(answer.dontKnow ? (
|
||||
<span className="rounded bg-muted px-1.5 py-0.5">didn't know</span>
|
||||
<span className="rounded bg-muted px-1.5 py-0.5">{t("didn't know")}</span>
|
||||
) : answer.correct ? (
|
||||
<span className="rounded bg-green-500/15 px-1.5 py-0.5 text-green-500">correct</span>
|
||||
<span className="rounded bg-green-500/15 px-1.5 py-0.5 text-green-500">{t("correct")}</span>
|
||||
) : (
|
||||
<span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">incorrect</span>
|
||||
<span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">{t("incorrect")}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="mb-3 font-medium">
|
||||
@@ -176,7 +178,7 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
|
||||
</div>
|
||||
)}
|
||||
{answer.dontKnow && isQuiz && (
|
||||
<div className="mt-2 text-sm text-muted-foreground">Answered “I don't know”.</div>
|
||||
<div className="mt-2 text-sm text-muted-foreground">{t("Answered “I don't know”.")}</div>
|
||||
)}
|
||||
|
||||
{(answer.thinking ?? answer.note) && (
|
||||
@@ -186,7 +188,7 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
|
||||
the accent lift read too light); rail only, heights identical. */
|
||||
<ThinkingBlock
|
||||
testId="your-thinking"
|
||||
label="YOUR THINKING"
|
||||
label={t("YOUR THINKING")}
|
||||
text={answer.thinking ?? answer.note ?? ""}
|
||||
inCard
|
||||
/>
|
||||
@@ -206,11 +208,11 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
|
||||
onClick={() => setWhyOpen((v) => !v)}
|
||||
className="text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
{whyOpen ? "Hide why" : "Why"}
|
||||
{whyOpen ? t("Hide why") : t("Why")}
|
||||
</button>
|
||||
{whyOpen && (
|
||||
<div className="mt-1.5 rounded-lg bg-muted py-2 text-sm text-foreground/50">
|
||||
<span className="font-medium text-muted-foreground">Why: </span>
|
||||
<span className="font-medium text-muted-foreground">{t("Why:")}{" "}</span>
|
||||
{/* 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>
|
||||
@@ -224,7 +226,7 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
|
||||
the model's next reply IS the grading. */}
|
||||
{isExplain && answer.committed && (
|
||||
<div className="mt-3 rounded-lg bg-muted py-2 text-sm text-muted-foreground">
|
||||
<span className="font-medium text-foreground">The answer: </span>
|
||||
<span className="font-medium text-foreground">{t("The answer:")}{" "}</span>
|
||||
<MessageResponse className="inline [&_p]:inline [&_p]:m-0">{answer.committed}</MessageResponse>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { DownloadIcon } from "lucide-react";
|
||||
@@ -100,12 +102,12 @@ export function DemoOutputCard({
|
||||
messageId?: string;
|
||||
initialInverted?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const result = output as DemoResult | undefined;
|
||||
if (!result || typeof result.html !== "string" || typeof result.title !== "string") {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
|
||||
Demo completed, but the result could not be displayed.
|
||||
</div>
|
||||
{t("Demo completed, but the result could not be displayed.")}</div>
|
||||
);
|
||||
}
|
||||
const failed = result.html.length === 0;
|
||||
@@ -113,10 +115,9 @@ export function DemoOutputCard({
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="demo-card-failed">
|
||||
<div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Interactive demo
|
||||
<span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">failed</span>
|
||||
{t("Interactive demo")}<span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">{t("failed")}</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">{result.notes ?? "The demo could not be built."}</p>
|
||||
<p className="mt-2 text-sm text-muted-foreground">{result.notes ?? t("The demo could not be built.")}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -136,6 +137,7 @@ function DemoFrame({
|
||||
messageId?: string;
|
||||
initialInverted?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const actions = useContext(ChatActionsContext);
|
||||
const iframeRef = useRef<HTMLIFrameElement | null>(null);
|
||||
const [state, setState] = useState<DemoBridgeState>(INITIAL_DEMO_BRIDGE_STATE);
|
||||
@@ -177,22 +179,21 @@ function DemoFrame({
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex min-w-0 items-baseline gap-2">
|
||||
<span className="shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
interactive demo
|
||||
</span>
|
||||
{t("interactive demo")}</span>
|
||||
<span className="truncate text-xs font-medium tracking-wide text-foreground">{title}</span>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1.5">
|
||||
<Toggle
|
||||
checked={inverted}
|
||||
onChange={toggleInverted}
|
||||
label="Invert demo brightness"
|
||||
title="Invert colors"
|
||||
label={t("Invert demo brightness")}
|
||||
title={t("Invert colors")}
|
||||
discIcon={<InvertDiscIcon className="size-3" />}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Download demo as HTML"
|
||||
title="Download as HTML"
|
||||
aria-label={t("Download demo as HTML")}
|
||||
title={t("Download as HTML")}
|
||||
onClick={() => downloadFile(`${slugFilename(title)}.html`, html, "text/html")}
|
||||
data-testid="demo-download"
|
||||
className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
@@ -205,7 +206,7 @@ function DemoFrame({
|
||||
<DemoErrorChip
|
||||
title={title}
|
||||
message={state.error}
|
||||
onSend={actions ? () => actions.sendText(`The demo "${title}" threw an error: ${state.error}`) : undefined}
|
||||
onSend={actions ? () => actions.sendText(t("The demo \"{v0}\" threw an error: {v1}", { v0: title, v1: state.error })) : undefined}
|
||||
/>
|
||||
)}
|
||||
<iframe
|
||||
@@ -245,12 +246,13 @@ export function DemoErrorChip({
|
||||
message: string;
|
||||
onSend?: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div
|
||||
className="mt-2 flex flex-wrap items-center gap-2 rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-500"
|
||||
data-testid="demo-error-chip"
|
||||
>
|
||||
<span className="font-medium">This demo threw an error</span>
|
||||
<span className="font-medium">{t("This demo threw an error")}</span>
|
||||
<span className="min-w-0 flex-1 truncate font-mono text-xs" title={message}>
|
||||
{message}
|
||||
</span>
|
||||
@@ -261,8 +263,7 @@ export function DemoErrorChip({
|
||||
className="rounded-md border border-red-500/40 px-2 py-1 text-xs font-medium hover:bg-red-500/15"
|
||||
data-testid="demo-error-send"
|
||||
>
|
||||
Send to teacher
|
||||
</button>
|
||||
{t("Send to teacher")}</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useContext } from "react";
|
||||
import { CheckIcon, SettingsIcon, XIcon } from "lucide-react";
|
||||
@@ -27,12 +29,13 @@ const KIND_LABEL: Record<JobKind, string> = {
|
||||
};
|
||||
|
||||
export function DispatchCard({ toolCallId, kind }: { toolCallId: string; kind: JobKind }) {
|
||||
const { t } = useI18n();
|
||||
const jobs = useContext(JobsContext);
|
||||
const job = jobs.find((j) => j.toolCallId === toolCallId) ?? null;
|
||||
const label = KIND_LABEL[kind];
|
||||
|
||||
if (!job || job.status === "running") {
|
||||
return <DispatchActivityCard job={job} label={label} />;
|
||||
return <DispatchActivityCard job={job} label={t(label)} />;
|
||||
}
|
||||
// BYOK (owner, 2026-09-22): a job refused for missing models is INFO,
|
||||
// not scary-error — gray glyph + "needs model setup" + the deep-link
|
||||
@@ -41,10 +44,10 @@ export function DispatchCard({ toolCallId, kind }: { toolCallId: string; kind: J
|
||||
// whose key is gone reads as the key being needed — the deep-link
|
||||
// lands on the SetupDialog's first-key stage on its own.
|
||||
if (isModelsRefusal(job.error)) {
|
||||
return <DispatchRefusedCard label={label} line="needs model setup" button="Set up models" />;
|
||||
return <DispatchRefusedCard label={t(label)} line={t("needs model setup")} button={t("Set up models")} />;
|
||||
}
|
||||
if (isProviderKeyRefusal(job.error)) {
|
||||
return <DispatchRefusedCard label={label} line="needs a provider key" button="Add a key" />;
|
||||
return <DispatchRefusedCard label={t(label)} line={t("needs a provider key")} button={t("Add a key")} />;
|
||||
}
|
||||
const failed = job.status === "error";
|
||||
return (
|
||||
@@ -53,14 +56,15 @@ export function DispatchCard({ toolCallId, kind }: { toolCallId: string; kind: J
|
||||
data-testid="dispatch-settled"
|
||||
>
|
||||
{failed ? <XIcon className="size-3.5 text-red-500" /> : <CheckIcon className="size-3.5" />}
|
||||
<span className="font-medium uppercase tracking-wide">{label}</span>
|
||||
<span>{failed ? "failed" : "delivered"}</span>
|
||||
<span className="font-medium uppercase tracking-wide">{t(label)}</span>
|
||||
<span>{failed ? t("failed") : t("delivered")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The refused card: quiet info tone — nothing red, nothing "failed". */
|
||||
function DispatchRefusedCard({ label, line, button }: { label: string; line: string; button: string }) {
|
||||
const { t } = useI18n();
|
||||
const ctx = useContext(ChatActionsContext);
|
||||
return (
|
||||
<div
|
||||
@@ -68,7 +72,7 @@ function DispatchRefusedCard({ label, line, button }: { label: string; line: str
|
||||
data-testid="dispatch-refused"
|
||||
>
|
||||
<SettingsIcon className="size-3.5" />
|
||||
<span className="font-medium uppercase tracking-wide">{label}</span>
|
||||
<span className="font-medium uppercase tracking-wide">{t(label)}</span>
|
||||
<span>{line}</span>
|
||||
{ctx && (
|
||||
<button
|
||||
@@ -85,6 +89,7 @@ function DispatchRefusedCard({ label, line, button }: { label: string; line: str
|
||||
}
|
||||
|
||||
function DispatchActivityCard({ job, label }: { job: JobRecord | null; label: string }) {
|
||||
const { t } = useI18n();
|
||||
// Elapsed from createdAt — jobs appear here only via the jobs feed (post-mount),
|
||||
// so no SSR/hydration mismatch.
|
||||
const elapsed =
|
||||
@@ -99,19 +104,18 @@ function DispatchActivityCard({ job, label }: { job: JobRecord | null; label: st
|
||||
the Braille spinner replaces the pulsing dot — one indicator
|
||||
everywhere. This is the ONLY dispatch-card change; the card's
|
||||
shape is untouched. */}
|
||||
<BrailleSpinner label={`${label} running`} />
|
||||
{label}
|
||||
{elapsed !== null && <span className="font-normal">· {elapsed}s</span>}
|
||||
<BrailleSpinner label={t("{v0} running", { v0: label })} />
|
||||
{t(label)}
|
||||
{elapsed !== null && <span className="font-normal">· {t("{v0}s", { v0: elapsed })}</span>}
|
||||
</div>
|
||||
{job?.activity && (
|
||||
<div className="mt-1 truncate text-sm text-muted-foreground" data-testid="dispatch-activity-line">
|
||||
{job.activity}
|
||||
{t(job.activity)}
|
||||
</div>
|
||||
)}
|
||||
{!job && (
|
||||
<div className="mt-1 text-sm text-muted-foreground" data-testid="dispatch-pending">
|
||||
Dispatched…
|
||||
</div>
|
||||
{t("Dispatched…")}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -13,7 +13,7 @@ export function slugFilename(title: string): string {
|
||||
.toLowerCase()
|
||||
.normalize("NFKD")
|
||||
.replace(/[\u0300-\u036f]/g, "")
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/[^\p{L}\p{N}]+/gu, "-")
|
||||
.replace(/^-+|-+$/g, "")
|
||||
.slice(0, 64);
|
||||
return slug || "demo";
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { DispatchCard } from "@/components/artifacts/dispatch-card";
|
||||
import { MessageResponse } from "@/components/ai-elements/message";
|
||||
@@ -35,15 +37,15 @@ export function PdfJobCard({ part }: ArtifactPartProps) {
|
||||
* the same expand-on-demand idiom as research.
|
||||
*/
|
||||
export function PdfBriefCard({ output }: { output: unknown }) {
|
||||
const { t } = useI18n();
|
||||
const result = output as PdfResult | undefined;
|
||||
if (!result || typeof result.brief !== "string") {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
|
||||
PDF reading completed, but the result could not be displayed.
|
||||
</div>
|
||||
{t("PDF reading completed, but the result could not be displayed.")}</div>
|
||||
);
|
||||
}
|
||||
const failed = result.brief.startsWith("PDF failed");
|
||||
const failed = result.brief.startsWith(t("PDF failed"));
|
||||
// Read = extract/render output entered the loop; consulted = every page
|
||||
// incl. search hits (the full audit set — the brief's citations may point
|
||||
// there). The ?? fallbacks tolerate pre-split persisted records.
|
||||
@@ -52,20 +54,19 @@ export function PdfBriefCard({ output }: { output: unknown }) {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="pdf-brief-card">
|
||||
<div className="mb-1 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
PDF brief
|
||||
{failed && <span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">failed</span>}
|
||||
{t("PDF brief")}{failed && <span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">{t("failed")}</span>}
|
||||
</div>
|
||||
<div className="text-sm [&_p:first-child]:mt-0 [&_p:last-child]:mb-0">
|
||||
<MessageResponse>{result.brief}</MessageResponse>
|
||||
</div>
|
||||
{!failed && readList.length > 0 && (
|
||||
<div className="mt-3 border-t pt-2 text-xs text-muted-foreground">
|
||||
Pages read: {readList.join(", ")}
|
||||
{t("Pages read:")}{" "}{readList.join(", ")}
|
||||
</div>
|
||||
)}
|
||||
{!failed && consultedList.length > readList.length && (
|
||||
<div className="mt-3 border-t pt-2 text-xs text-muted-foreground">
|
||||
Pages consulted: {consultedList.join(", ")}
|
||||
{t("Pages consulted:")}{" "}{consultedList.join(", ")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -77,27 +78,26 @@ export function PdfBriefCard({ output }: { output: unknown }) {
|
||||
* the steer card (sub-agent result delivery) renders the same artifact.
|
||||
*/
|
||||
export function ResearchBriefCard({ output }: { output: unknown }) {
|
||||
const { t } = useI18n();
|
||||
const result = output as ResearchResult | undefined;
|
||||
if (!result || typeof result.brief !== "string") {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
|
||||
Research completed, but the result could not be displayed.
|
||||
</div>
|
||||
{t("Research completed, but the result could not be displayed.")}</div>
|
||||
);
|
||||
}
|
||||
const failed = result.brief.startsWith("Research failed");
|
||||
const failed = result.brief.startsWith(t("Research failed"));
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="research-brief-card">
|
||||
<div className="mb-1 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Research brief
|
||||
{failed && <span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">failed</span>}
|
||||
{t("Research brief")}{failed && <span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">{t("failed")}</span>}
|
||||
</div>
|
||||
<div className="text-sm [&_p:first-child]:mt-0 [&_p:last-child]:mb-0">
|
||||
<MessageResponse>{result.brief}</MessageResponse>
|
||||
</div>
|
||||
{result.sources.length > 0 && (
|
||||
<div className="mt-3 border-t pt-2">
|
||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Sources</div>
|
||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Sources")}</div>
|
||||
<ul className="flex flex-col gap-0.5 text-xs">
|
||||
{result.sources.map((s) => (
|
||||
<li key={s.url} className="truncate">
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { BrailleSpinner } from "@/components/braille-spinner";
|
||||
@@ -28,6 +30,7 @@ interface StreamingToolPart {
|
||||
}
|
||||
|
||||
export function LiveToolCard({ part }: ArtifactPartProps) {
|
||||
const { t } = useI18n();
|
||||
const p = part as StreamingToolPart;
|
||||
const tool = p.type.replace(/^tool-/, "");
|
||||
const inp = (p.input ?? {}) as Record<string, unknown>;
|
||||
@@ -47,7 +50,7 @@ export function LiveToolCard({ part }: ArtifactPartProps) {
|
||||
className="group my-1 w-full max-w-2xl select-none"
|
||||
>
|
||||
<summary className="flex cursor-pointer list-none items-center gap-2 text-xs text-muted-foreground [&::-webkit-details-marker]:hidden">
|
||||
<BrailleSpinner label={`${toolActivityLabel(tool)} — live`} />
|
||||
<BrailleSpinner label={t("{v0} — live", { v0: toolActivityLabel(tool) })} />
|
||||
<Shimmer duration={1} className="text-xs">
|
||||
{toolActivityLabel(tool)}
|
||||
</Shimmer>
|
||||
@@ -55,7 +58,7 @@ export function LiveToolCard({ part }: ArtifactPartProps) {
|
||||
<ChevronRight className="size-3 shrink-0 opacity-50 transition-transform group-open:rotate-90" />
|
||||
</summary>
|
||||
<div className="mt-2 rounded-xl border bg-card p-3 text-xs">
|
||||
<div className="mb-1 font-medium uppercase tracking-wide text-muted-foreground">Input (streaming)</div>
|
||||
<div className="mb-1 font-medium uppercase tracking-wide text-muted-foreground">{t("Input (streaming)")}</div>
|
||||
<pre className="max-h-32 overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-relaxed">
|
||||
{hasInput ? JSON.stringify(p.input, null, 2) : "…"}
|
||||
</pre>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { ClipboardCheckIcon } from "lucide-react";
|
||||
import { parseProbeDoneInput, type ProbeDoneResult } from "@/src/core";
|
||||
@@ -22,6 +24,7 @@ import { parseProbeDoneInput, type ProbeDoneResult } from "@/src/core";
|
||||
* the UI wave; this card just guarantees the data is never invisible.
|
||||
*/
|
||||
export function ProbeDoneCard({ part }: { part: { input?: unknown; output?: unknown; state?: unknown } }) {
|
||||
const { t } = useI18n();
|
||||
const output = part.output as ProbeDoneResult | undefined;
|
||||
const state = typeof part.state === "string" ? part.state : "";
|
||||
|
||||
@@ -43,14 +46,12 @@ export function ProbeDoneCard({ part }: { part: { input?: unknown; output?: unkn
|
||||
<div data-testid="probe-done-card" className="my-3 rounded-xl border bg-card/60 p-3">
|
||||
<div className="mb-2 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<ClipboardCheckIcon className="size-3.5 text-primary" />
|
||||
Probe concluded — your assessment
|
||||
</div>
|
||||
{t("Probe concluded — your assessment")}</div>
|
||||
{output && !output.ok ? (
|
||||
<p className="text-sm text-muted-foreground">The prober retried: {output.error}</p>
|
||||
<p className="text-sm text-muted-foreground">{t("The prober retried:")}{" "}{output.error}</p>
|
||||
) : state === "output-error" ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The assessment was malformed — the prober retried with a corrected one.
|
||||
</p>
|
||||
{t("The assessment was malformed — the prober retried with a corrected one.")}</p>
|
||||
) : strands ? (
|
||||
<div className="space-y-2">
|
||||
{strands.map((s, i) => (
|
||||
@@ -64,7 +65,7 @@ export function ProbeDoneCard({ part }: { part: { input?: unknown; output?: unkn
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Writing the assessment…</p>
|
||||
<p className="text-sm text-muted-foreground">{t("Writing the assessment…")}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { CheckIcon, CircleX } from "lucide-react";
|
||||
import type { PdfResult, ResearchResult, SubagentArtifactData } from "@/src/core";
|
||||
@@ -26,6 +28,7 @@ import { VisualOutputCard } from "@/components/artifacts/visual-card";
|
||||
* render; only a failure note does.
|
||||
*/
|
||||
export function SubagentSteerCard({ message }: { message: LhViewMessage }) {
|
||||
const { t } = useI18n();
|
||||
const artifactPart = message.parts.find((p) => p.type === "data-subagent-artifact");
|
||||
const data = artifactPart?.data as SubagentArtifactData | undefined;
|
||||
// The abort steer (2026-09 dock semantics): its message-type part is
|
||||
@@ -38,8 +41,7 @@ export function SubagentSteerCard({ message }: { message: LhViewMessage }) {
|
||||
if (aborted?.data) return <AbortedBadge kind={aborted.data.kind ?? "job"} />;
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
|
||||
A sub-agent finished, but its result could not be displayed.
|
||||
</div>
|
||||
{t("A sub-agent finished, but its result could not be displayed.")}</div>
|
||||
);
|
||||
}
|
||||
switch (data.kind) {
|
||||
@@ -66,11 +68,12 @@ export function SubagentSteerCard({ message }: { message: LhViewMessage }) {
|
||||
* teacher's wake turn acknowledges the abort in the lesson itself,
|
||||
* this just marks what happened. */
|
||||
function AbortedBadge({ kind }: { kind: string }) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div data-testid="job-aborted-badge" className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<CircleX className="size-3.5" />
|
||||
<span className="font-medium uppercase tracking-wide">{kind}</span>
|
||||
<span>aborted by the learner</span>
|
||||
<span>{t("aborted by the learner")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -80,6 +83,7 @@ function AbortedBadge({ kind }: { kind: string }) {
|
||||
* the badge marks delivery, the collapsed details carries the full text
|
||||
* + consulted pages. */
|
||||
function PdfCompleteBadge({ result }: { result: PdfResult }) {
|
||||
const { t } = useI18n();
|
||||
// The honest count is READ pages (extract/render — sources v1 split);
|
||||
// the ?? is runtime tolerance for pre-split persisted steers.
|
||||
const readPages = result.pagesRead ?? result.pagesConsulted;
|
||||
@@ -88,14 +92,14 @@ function PdfCompleteBadge({ result }: { result: PdfResult }) {
|
||||
<summary className="flex cursor-pointer select-none list-none items-center gap-2 [&::-webkit-details-marker]:hidden">
|
||||
<CheckIcon className="size-3.5" />
|
||||
<span className="font-medium uppercase tracking-wide">PDF</span>
|
||||
<span>reading complete</span>
|
||||
<span>{t("reading complete")}</span>
|
||||
{readPages.length > 0 && (
|
||||
<span>
|
||||
· read {readPages.length} page{readPages.length === 1 ? "" : "s"}
|
||||
{t("· read {count} pages", { count: readPages.length })}
|
||||
</span>
|
||||
)}
|
||||
<span className="ml-1 text-xs text-muted-foreground/70 group-open:hidden">view brief</span>
|
||||
<span className="ml-1 hidden text-xs text-muted-foreground/70 group-open:inline">hide brief</span>
|
||||
<span className="ml-1 text-xs text-muted-foreground/70 group-open:hidden">{t("view brief")}</span>
|
||||
<span className="ml-1 hidden text-xs text-muted-foreground/70 group-open:inline">{t("hide brief")}</span>
|
||||
</summary>
|
||||
<div className="mt-2">
|
||||
<PdfBriefCard output={result} />
|
||||
@@ -110,15 +114,16 @@ function PdfCompleteBadge({ result }: { result: PdfResult }) {
|
||||
* affordance): full markdown + sources, one click away, no extra fetch —
|
||||
* the artifact part in the record is the single source of truth. */
|
||||
function ResearchCompleteBadge({ result }: { result: ResearchResult }) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<details data-testid="research-complete-badge" className="group w-full text-xs text-muted-foreground">
|
||||
<summary className="flex cursor-pointer select-none list-none items-center gap-2 [&::-webkit-details-marker]:hidden">
|
||||
<CheckIcon className="size-3.5" />
|
||||
<span className="font-medium uppercase tracking-wide">Research</span>
|
||||
<span>complete</span>
|
||||
{result.sources.length > 0 && <span>· {result.sources.length} sources</span>}
|
||||
<span className="ml-1 text-xs text-muted-foreground/70 group-open:hidden">view brief</span>
|
||||
<span className="ml-1 hidden text-xs text-muted-foreground/70 group-open:inline">hide brief</span>
|
||||
<span className="font-medium uppercase tracking-wide">{t("Research")}</span>
|
||||
<span>{t("complete")}</span>
|
||||
{result.sources.length > 0 && <span>· {t("{count} sources", { count: result.sources.length })}</span>}
|
||||
<span className="ml-1 text-xs text-muted-foreground/70 group-open:hidden">{t("view brief")}</span>
|
||||
<span className="ml-1 hidden text-xs text-muted-foreground/70 group-open:inline">{t("hide brief")}</span>
|
||||
</summary>
|
||||
<div className="mt-2">
|
||||
<ResearchBriefCard output={result} />
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import type { ArtifactPartProps } from "@/src/core";
|
||||
@@ -62,6 +64,7 @@ function outputText(output: unknown): string | null {
|
||||
}
|
||||
|
||||
export function ToolCallCard({ part }: ArtifactPartProps) {
|
||||
const { t } = useI18n();
|
||||
const p = part as ToolCallPart;
|
||||
const tool = p.type.replace(/^tool-/, "");
|
||||
const arg = headlineArg(tool, p.input);
|
||||
@@ -84,8 +87,7 @@ export function ToolCallCard({ part }: ArtifactPartProps) {
|
||||
{p.input != null && (
|
||||
<div>
|
||||
<div className="mb-1 font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Input
|
||||
</div>
|
||||
{t("Input")}</div>
|
||||
<pre className="max-h-32 overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-relaxed">
|
||||
{JSON.stringify(p.input, null, 2)}
|
||||
</pre>
|
||||
@@ -94,24 +96,22 @@ export function ToolCallCard({ part }: ArtifactPartProps) {
|
||||
{typeof p.errorText === "string" ? (
|
||||
<div>
|
||||
<div className="mb-1 font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Error
|
||||
</div>
|
||||
{t("Error")}</div>
|
||||
<pre className="whitespace-pre-wrap break-all font-mono text-[11px] text-red-500">
|
||||
{p.errorText}
|
||||
{t(p.errorText)}
|
||||
</pre>
|
||||
</div>
|
||||
) : out != null ? (
|
||||
<div>
|
||||
<div className="mb-1 font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Output
|
||||
</div>
|
||||
{t("Output")}</div>
|
||||
<pre className="max-h-64 overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-relaxed">
|
||||
{out}
|
||||
</pre>
|
||||
</div>
|
||||
) : (
|
||||
p.state !== "output-available" && (
|
||||
<div className="text-muted-foreground italic">running…</div>
|
||||
<div className="text-muted-foreground italic">{t("running…")}</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useContext, useState } from "react";
|
||||
import { ChatActionsContext } from "@/components/chat";
|
||||
@@ -61,6 +63,7 @@ export function VisualOutputCard({
|
||||
messageId?: string;
|
||||
initialInverted?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const result = output as VisualResult | undefined;
|
||||
const overlay = useSessionMermaid();
|
||||
const actions = useContext(ChatActionsContext);
|
||||
@@ -83,8 +86,7 @@ export function VisualOutputCard({
|
||||
if (!result || typeof result.svg !== "string") {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
|
||||
Figure completed, but the result could not be displayed.
|
||||
</div>
|
||||
{t("Figure completed, but the result could not be displayed.")}</div>
|
||||
);
|
||||
}
|
||||
const failed = result.svg.length === 0;
|
||||
@@ -92,10 +94,9 @@ export function VisualOutputCard({
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="visual-card-failed">
|
||||
<div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Figure
|
||||
<span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">failed</span>
|
||||
{t("Figure")}<span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-500">{t("failed")}</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">{result.notes ?? "The figure could not be drawn."}</p>
|
||||
<p className="mt-2 text-sm text-muted-foreground">{result.notes ?? t("The figure could not be drawn.")}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -130,21 +131,21 @@ export function VisualOutputCard({
|
||||
data-testid="visual-svg"
|
||||
/>
|
||||
<div className="mt-2 flex items-center justify-between gap-2">
|
||||
<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Figure</div>
|
||||
<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Figure")}</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* The invert affordance (owner round, 2026-10-07): the disc IS
|
||||
the half-filled contrast circle; the tooltip names it. */}
|
||||
<Toggle
|
||||
checked={inverted}
|
||||
onChange={toggleInverted}
|
||||
label="Invert figure brightness"
|
||||
title="Invert colors"
|
||||
label={t("Invert figure brightness")}
|
||||
title={t("Invert colors")}
|
||||
discIcon={<InvertDiscIcon className="size-3" />}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Download figure as SVG"
|
||||
title="Download as SVG"
|
||||
aria-label={t("Download figure as SVG")}
|
||||
title={t("Download as SVG")}
|
||||
onClick={() => downloadFile("figure.svg", result.svg, "image/svg+xml")}
|
||||
data-testid="visual-download"
|
||||
className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
@@ -154,8 +155,8 @@ export function VisualOutputCard({
|
||||
{overlay && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open figure fullscreen"
|
||||
title="Open fullscreen"
|
||||
aria-label={t("Open figure fullscreen")}
|
||||
title={t("Open fullscreen")}
|
||||
onClick={() => overlay.openFigure(result.svg, inverted)}
|
||||
data-testid="visual-open"
|
||||
className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useI18n } from "@/components/i18n";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
@@ -43,12 +46,13 @@ export function BrailleSpinner({
|
||||
/** The accessible name of the state this spinner announces. */
|
||||
label?: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 4 8"
|
||||
data-testid="braille-spinner"
|
||||
role="status"
|
||||
aria-label={label}
|
||||
aria-label={t(label)}
|
||||
className={cn("h-3 w-auto shrink-0 text-foreground", className)}
|
||||
>
|
||||
{FRAMES.map((frame, k) => (
|
||||
|
||||
+26
-26
@@ -1,4 +1,7 @@
|
||||
"use client";
|
||||
import { countLabel } from "@/src/core";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
/**
|
||||
* THE CHAIN TABLE (chains overlay; owner refinements round 2, 2026-09-29):
|
||||
@@ -143,6 +146,7 @@ export function ChainTableBody({
|
||||
selectMode?: boolean;
|
||||
onSelect?: () => void;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
const byId = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
|
||||
const chains = useMemo(() => chainsForSelection(nodes, storedChains), [nodes, storedChains]);
|
||||
const searching = query.trim() !== "";
|
||||
@@ -246,7 +250,7 @@ export function ChainTableBody({
|
||||
law: later in the DOM). */}
|
||||
<TopBar>
|
||||
<span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
|
||||
{chains.length} {chains.length === 1 ? "chain" : "chains"} · {nodes.length} {nodes.length === 1 ? "node" : "nodes"}
|
||||
{countLabel(language, chains.length, "chain", "chains")} · {countLabel(language, nodes.length, "node", "nodes")}
|
||||
</span>
|
||||
<div className="relative shrink-0">
|
||||
<SearchIcon className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
@@ -254,8 +258,8 @@ export function ChainTableBody({
|
||||
value={query}
|
||||
data-testid="chain-table-search"
|
||||
onChange={(e) => onQuery(e.target.value)}
|
||||
placeholder="Search nodes…"
|
||||
aria-label="Search nodes"
|
||||
placeholder={t("Search nodes…")}
|
||||
aria-label={t("Search nodes")}
|
||||
spellCheck={false}
|
||||
className="lh-no-drag h-8 w-56 rounded-lg border bg-background pl-8 pr-3 text-xs outline-none placeholder:text-muted-foreground focus:border-ring"
|
||||
/>
|
||||
@@ -264,7 +268,7 @@ export function ChainTableBody({
|
||||
type="button"
|
||||
data-testid="chain-table-close"
|
||||
onClick={onClose}
|
||||
aria-label="Close chains"
|
||||
aria-label={t("Close chains")}
|
||||
className="lh-no-drag flex size-8 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-card/80 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
@@ -288,7 +292,7 @@ export function ChainTableBody({
|
||||
aria-sort={sort.col === "name" ? (sort.dir === 1 ? "ascending" : "descending") : "none"}
|
||||
className="flex flex-1 items-center gap-1 text-left transition-colors hover:text-foreground"
|
||||
>
|
||||
Name {dirIcon("name")}
|
||||
{t("Name")}{" "}{dirIcon("name")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -297,7 +301,7 @@ export function ChainTableBody({
|
||||
aria-sort={sort.col === "props" ? (sort.dir === 1 ? "ascending" : "descending") : "none"}
|
||||
className="flex w-14 shrink-0 items-center justify-end gap-1 text-right transition-colors hover:text-foreground"
|
||||
>
|
||||
Props {dirIcon("props")}
|
||||
{t("Props")}{" "}{dirIcon("props")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -306,14 +310,13 @@ export function ChainTableBody({
|
||||
aria-sort={sort.col === "created" ? (sort.dir === 1 ? "ascending" : "descending") : "none"}
|
||||
className="flex w-20 shrink-0 items-center justify-end gap-1 text-right transition-colors hover:text-foreground"
|
||||
>
|
||||
Created {dirIcon("created")}
|
||||
{t("Created")}{" "}{dirIcon("created")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{groups.length === 0 && (
|
||||
<div data-testid="chain-table-nomatch" className="px-4 pt-3 text-xs text-muted-foreground">
|
||||
No matching chains.
|
||||
</div>
|
||||
{t("No matching chains.")}</div>
|
||||
)}
|
||||
|
||||
{groups.map((group) => {
|
||||
@@ -348,15 +351,15 @@ export function ChainTableBody({
|
||||
indeterminate={selectedCount > 0 && selectedCount < group.nodeIds.length}
|
||||
onToggle={(next) => onToggleNodes(group.nodeIds, next)}
|
||||
testid={`cluster-checkbox-${group.key}`}
|
||||
label={`Select everything born in ${group.label ?? "unlabeled"}`}
|
||||
label={t("Select everything born in {v0}", { v0: group.label ?? "unlabeled" })}
|
||||
/>
|
||||
<Expander open={open} onClick={() => onToggleCluster(group.key)} testid={`cluster-toggle-${group.key}`} label={`Expand cluster ${group.label ?? "unlabeled"}`} />
|
||||
<Expander open={open} onClick={() => onToggleCluster(group.key)} testid={`cluster-toggle-${group.key}`} label={t("Expand cluster {v0}", { v0: group.label ?? "unlabeled" })} />
|
||||
<span className="flex shrink-0 items-center justify-center text-muted-foreground">
|
||||
{open ? <FolderOpenIcon className="size-3.5" /> : <FolderIcon className="size-3.5" />}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 truncate text-sm font-medium">
|
||||
{group.label ?? <span className="text-muted-foreground/60">unlabeled</span>}
|
||||
{group.kind === "notes" && <span className="ml-2 text-[11px] uppercase tracking-widest text-muted-foreground/60">notes</span>}
|
||||
{group.label ?? <span className="text-muted-foreground/60">{t("unlabeled")}</span>}
|
||||
{group.kind === "notes" && <span className="ml-2 text-[11px] uppercase tracking-widest text-muted-foreground/60">{t("notes")}</span>}
|
||||
</span>
|
||||
<span className="w-14 shrink-0 text-right text-xs tabular-nums text-muted-foreground">
|
||||
{group.nodeIds.length}
|
||||
@@ -397,9 +400,9 @@ export function ChainTableBody({
|
||||
indeterminate={selectedInChain > 0 && selectedInChain < memberIds.length}
|
||||
onToggle={(next) => onToggleNodes(memberIds, next)}
|
||||
testid={`chain-checkbox-${chain.id}`}
|
||||
label={`Select chain ${nameOf(chain.conclusion)}`}
|
||||
label={t("Select chain {v0}", { v0: nameOf(chain.conclusion) })}
|
||||
/>
|
||||
<Expander open={chainOpen} onClick={() => onToggleChain(chain.id)} testid={`chain-toggle-${chain.id}`} label={`Expand chain ${nameOf(chain.conclusion)}`} />
|
||||
<Expander open={chainOpen} onClick={() => onToggleChain(chain.id)} testid={`chain-toggle-${chain.id}`} label={t("Expand chain {v0}", { v0: nameOf(chain.conclusion) })} />
|
||||
{/* The chain line: proposition names as faint-outlined
|
||||
chips. THE LOGIC IS THE PAYLOAD (owner rulings,
|
||||
2026-09-30): premises join with the LaTeX LAND (∧),
|
||||
@@ -465,7 +468,7 @@ export function ChainTableBody({
|
||||
checked={selection.has(id)}
|
||||
onToggle={(next) => onToggleNodes([id], next)}
|
||||
testid={`prop-checkbox-${id}`}
|
||||
label={`Select node ${node.name}`}
|
||||
label={t("Select node {v0}", { v0: node.name })}
|
||||
/>
|
||||
<span className="min-w-0 flex-1 text-xs leading-relaxed text-muted-foreground">
|
||||
{node.statement}
|
||||
@@ -493,8 +496,8 @@ export function ChainTableBody({
|
||||
className="pointer-events-auto flex items-center gap-3 rounded-full border bg-card px-4 py-2 shadow-lg"
|
||||
>
|
||||
<span data-testid="chain-selected-summary" className="text-xs font-medium">
|
||||
{selection.size} {selection.size === 1 ? "node" : "nodes"} →{" "}
|
||||
{derived.length} {derived.length === 1 ? "chain" : "chains"}
|
||||
{countLabel(language, selection.size, "node", "nodes")} →{" "}
|
||||
{countLabel(language, derived.length, "chain", "chains")}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@@ -502,19 +505,17 @@ export function ChainTableBody({
|
||||
onClick={onClear}
|
||||
className="rounded-full px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
{t("Clear")}</button>
|
||||
{selectMode ? (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="chain-practice-done"
|
||||
onClick={onSelect}
|
||||
aria-label={`Done picking — ${selection.size} ${selection.size === 1 ? "proposition" : "propositions"} selected`}
|
||||
aria-label={t("Done picking — {v0} {v1} selected", { v0: selection.size, v1: selection.size === 1 ? "proposition" : "propositions" })}
|
||||
className="flex items-center gap-1.5 rounded-full bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/80"
|
||||
>
|
||||
<DumbbellIcon aria-hidden="true" className="size-3.5" />
|
||||
Done
|
||||
</button>
|
||||
{t("Done")}</button>
|
||||
) : (
|
||||
<>
|
||||
{/* The danger fence (owner ruling): a divider quarantines
|
||||
@@ -526,12 +527,11 @@ export function ChainTableBody({
|
||||
type="button"
|
||||
data-testid="chain-delete"
|
||||
onClick={onDelete}
|
||||
aria-label={`Delete ${selection.size} selected ${selection.size === 1 ? "node" : "nodes"}`}
|
||||
aria-label={t("Delete {v0} selected {v1}", { v0: selection.size, v1: selection.size === 1 ? "node" : "nodes" })}
|
||||
className="flex items-center gap-1.5 rounded-full border border-destructive/50 bg-destructive/10 px-3 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/20"
|
||||
>
|
||||
<Trash2Icon aria-hidden="true" className="size-3.5" />
|
||||
Delete
|
||||
</button>
|
||||
{t("Delete")}</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
+40
-31
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { createContext, Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import { useChatSession } from "@/components/session";
|
||||
@@ -57,7 +59,7 @@ import { PracticeDock } from "@/components/practice-dock";
|
||||
import { ThinkingCard, type PracticeThinkingData } from "@/components/practice-cards";
|
||||
import { GraphContextCard, type GraphContextData } from "@/components/graph-context-card";
|
||||
import { TopBar } from "@/components/top-bar";
|
||||
import type { ArtifactPartProps, JobRecord, Phase3, QuestionAnswerData, TurnUsage } from "@/src/core";
|
||||
import type { ArtifactPartProps, JobRecord, Phase3, QuestionAnswerData, TurnUsage, SessionPricing } from "@/src/core";
|
||||
import type { LhViewMessage } from "@/src/core";
|
||||
import { PhaseChip, PhaseDivider } from "@/components/phase-divider";
|
||||
import {
|
||||
@@ -225,6 +227,7 @@ export function Chat({
|
||||
* only decides whether the pill rides the composer. */
|
||||
initialConfigured?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
// Reattach plumbing (background-turn runner wave): the hook holds the
|
||||
// settled terminal's callback — a stable ref assigned below, once
|
||||
// syncFromServer exists (refs, not closures: no stale capture).
|
||||
@@ -236,7 +239,7 @@ export function Chat({
|
||||
// (core/view.ts projectView); sends are ONE explicit input event each
|
||||
// ({chatId, input} — the stash indirection died with the SDK), and the
|
||||
// turn stream is the VERBATIM AgentEvent passthrough the server emits.
|
||||
const { messages, nativeMessages, send, steer, steerQueue, submitAnswer, dismissQuestion, dismissProblem, setMessages, adoptRecord, status, error, stop, clearError, resumeStream, setReattachSettled } =
|
||||
const { messages, nativeMessages, contextTokens, send, steer, steerQueue, submitAnswer, dismissQuestion, dismissProblem, setMessages, adoptRecord, status, error, stop, clearError, resumeStream, setReattachSettled } =
|
||||
useChatSession({ chatId, initialMessages, initiallyInFlight });
|
||||
|
||||
const sessionFindScopeRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -717,8 +720,9 @@ export function Chat({
|
||||
const syncFromServer = useCallback(async () => {
|
||||
const res = await fetch(`/api/chats/${chatId}`);
|
||||
if (!res.ok) return;
|
||||
const record = (await res.json()) as { messages?: LhMessage[]; turns?: TurnUsage[] };
|
||||
const record = (await res.json()) as { messages?: LhMessage[]; turns?: TurnUsage[]; pricing?: SessionPricing };
|
||||
if (Array.isArray(record.turns)) setTurns(record.turns);
|
||||
setPricing(record.pricing);
|
||||
if (!Array.isArray(record.messages)) return;
|
||||
setMessages(record.messages);
|
||||
// The continuation seam (contracts.ts protocol §4): a job result
|
||||
@@ -845,12 +849,13 @@ export function Chat({
|
||||
const planTree = useMemo(() => latestTree(messages), [messages]);
|
||||
|
||||
// ── Session usage (wave-4 stats bar) ──
|
||||
// The money channel: the record's turns log, folded client-side by
|
||||
// core/prices.ts. Seeded once on mount (the page doesn't carry turns),
|
||||
// The money channel: the record's turns log and read-time server Pi
|
||||
// pricing projection. Seeded once on mount (the page doesn't carry turns),
|
||||
// refreshed when the local stream settles (each turn appends to the log
|
||||
// server-side), and kept fresh by syncFromServer whenever it already
|
||||
// fetches the record. No turns yet → the bar renders "—" everywhere.
|
||||
const [turns, setTurns] = useState<TurnUsage[]>([]);
|
||||
const [pricing, setPricing] = useState<SessionPricing | undefined>();
|
||||
// The per-chat model control state (model-picker writes via PUT; the
|
||||
// record is the source of truth, lifted here so the stats bar re-renders).
|
||||
// The dock's reserved tail height (DockOverlay reports it; the spacer at
|
||||
@@ -864,8 +869,9 @@ export function Chat({
|
||||
try {
|
||||
const res = await fetch(`/api/chats/${chatId}`);
|
||||
if (!res.ok) return;
|
||||
const record = (await res.json()) as { turns?: TurnUsage[] };
|
||||
const record = (await res.json()) as { turns?: TurnUsage[]; pricing?: SessionPricing };
|
||||
if (Array.isArray(record.turns)) setTurns(record.turns);
|
||||
setPricing(record.pricing);
|
||||
} catch {
|
||||
// transient blip: stats stay on the last known figures
|
||||
}
|
||||
@@ -1233,8 +1239,8 @@ export function Chat({
|
||||
}}
|
||||
onBlur={() => void commitRename(titleDraft)}
|
||||
spellCheck={false}
|
||||
aria-label="Session title"
|
||||
title="Rename this session"
|
||||
aria-label={t("Session title")}
|
||||
title={t("Rename this session")}
|
||||
className="lh-no-drag min-w-[8ch] max-w-[70%] shrink-0 bg-transparent font-title text-3xl tracking-tight caret-current outline-none [field-sizing:content]"
|
||||
/>
|
||||
{/* flex-1 spacer during rename too, so the chips stay at
|
||||
@@ -1246,7 +1252,7 @@ export function Chat({
|
||||
<>
|
||||
<Hint
|
||||
// F2 renames (registry) — surfaced on the hover.
|
||||
label="Rename session"
|
||||
label={t("Rename session")}
|
||||
action="rename-session"
|
||||
side="bottom"
|
||||
>
|
||||
@@ -1270,7 +1276,7 @@ export function Chat({
|
||||
structure beside the phase chip — access to the full-DAG popup
|
||||
at every width; the marginalia is the wide-screen glance view. */}
|
||||
{planTree && (
|
||||
<Hint label="Open the full plan" side="bottom">
|
||||
<Hint label={t("Open the full plan")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="plan-chip"
|
||||
@@ -1281,8 +1287,7 @@ export function Chat({
|
||||
className="lh-no-drag flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:border-border hover:text-foreground"
|
||||
>
|
||||
<WaypointsIcon className="size-3.5 text-primary" aria-hidden />
|
||||
Plan
|
||||
</button>
|
||||
{t("Plan")}</button>
|
||||
</Hint>
|
||||
)}
|
||||
{/* The extraction ring (owner-locked redesign, 2026-09-24): fills
|
||||
@@ -1303,8 +1308,7 @@ export function Chat({
|
||||
className="pointer-events-none flex shrink-0 select-none items-center gap-1 text-xs font-medium uppercase tracking-wide text-muted-foreground"
|
||||
>
|
||||
<DumbbellIcon className="size-3" />
|
||||
Practice
|
||||
</span>
|
||||
{t("Practice")}</span>
|
||||
) : (
|
||||
<PhaseChip phase={phases.at(-1) ?? "probe"} />
|
||||
)}
|
||||
@@ -1318,8 +1322,8 @@ export function Chat({
|
||||
<div data-session-find-root="" className={`${COLUMN} flex flex-1 flex-col gap-4 pt-4`}>
|
||||
{messages.length === 0 && !busy && (
|
||||
<ConversationEmptyState
|
||||
title="New session"
|
||||
description="The teacher will open by probing what you already know."
|
||||
title={t("New session")}
|
||||
description={t("The teacher will open by probing what you already know.")}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -1370,8 +1374,7 @@ export function Chat({
|
||||
className="my-4 flex items-center justify-center gap-1.5 font-ui text-xs font-medium uppercase tracking-wide text-muted-foreground"
|
||||
>
|
||||
<ArrowRightIcon className="size-3" />
|
||||
Next problem
|
||||
</div>
|
||||
{t("Next problem")}</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
@@ -1429,7 +1432,7 @@ export function Chat({
|
||||
{/* The rail GROUPS (owner round 4, 2026-10-05): the YOU heading
|
||||
sits INSIDE the rail, same mono-xs register and same 1ch
|
||||
rail as the thinking rows — one quote geometry. */}
|
||||
<div className="font-medium uppercase tracking-wide text-muted-foreground">You</div>
|
||||
<div className="font-medium uppercase tracking-wide text-muted-foreground">{t("You")}</div>
|
||||
<div className="lh-prose whitespace-pre-wrap text-foreground">
|
||||
{m.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n")}
|
||||
</div>
|
||||
@@ -1462,8 +1465,7 @@ export function Chat({
|
||||
) {
|
||||
return (
|
||||
<SystemLine key={`retry-${pi}`} testId="tool-retry">
|
||||
Retrying…
|
||||
</SystemLine>
|
||||
{t("Retrying…")}</SystemLine>
|
||||
);
|
||||
}
|
||||
switch (part.type) {
|
||||
@@ -1559,21 +1561,20 @@ export function Chat({
|
||||
BEFORE beginTurn; the settle kick runs after endTurn). */}
|
||||
{compacting && (
|
||||
<span className="flex items-center gap-2 font-ui text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<BrailleSpinner label="Compacting context" />
|
||||
<Shimmer duration={1}>COMPACTING CONTEXT…</Shimmer>
|
||||
<BrailleSpinner label={t("Compacting context")} />
|
||||
<Shimmer duration={1}>{t("COMPACTING CONTEXT…")}</Shimmer>
|
||||
</span>
|
||||
)}
|
||||
{(status === "submitted" || turnInFlight) && (
|
||||
<span className="flex items-center gap-2 font-ui text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<BrailleSpinner label="Thinking" />
|
||||
<BrailleSpinner label={t("Thinking")} />
|
||||
<Shimmer duration={1}>
|
||||
THINKING…
|
||||
</Shimmer>
|
||||
{t("THINKING…")}</Shimmer>
|
||||
</span>
|
||||
)}
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm">
|
||||
Something went wrong: {error.message}
|
||||
{t("Something went wrong:")}{" "}{t(error.message)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -1604,6 +1605,8 @@ export function Chat({
|
||||
onReadingThinking={applyReadingThinking}
|
||||
phase={phases.at(-1) ?? "probe"}
|
||||
turns={turns}
|
||||
contextTokens={contextTokens}
|
||||
pricing={pricing}
|
||||
onReserve={setDockReserve}
|
||||
dictationSlot={<DictationBar dictation={dictation} />}
|
||||
dictationCancel={dictation.cancel}
|
||||
@@ -1620,8 +1623,7 @@ export function Chat({
|
||||
onClick={() => setSetupOpen(true)}
|
||||
className="rounded-sm border border-border bg-card px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 hover:bg-accent cursor-pointer"
|
||||
>
|
||||
Set up your models
|
||||
</button>
|
||||
{t("Set up your models")}</button>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
@@ -1645,7 +1647,7 @@ export function Chat({
|
||||
// applies.
|
||||
nextProblem={nextReady}
|
||||
onNext={sendNext}
|
||||
placeholder={nextReady ? "Ask anything, or press Enter for the next one." : undefined}
|
||||
placeholder={nextReady ? t("Ask anything, or press Enter for the next one.") : undefined}
|
||||
/>
|
||||
}
|
||||
onSubmitAnswer={(output) => {
|
||||
@@ -1824,6 +1826,8 @@ function DockOverlay({
|
||||
onReadingThinking,
|
||||
phase,
|
||||
turns,
|
||||
contextTokens,
|
||||
pricing,
|
||||
composer,
|
||||
onSubmitAnswer,
|
||||
chatId,
|
||||
@@ -1855,6 +1859,8 @@ function DockOverlay({
|
||||
phase: Phase3;
|
||||
/** The session's usage log — the stats bar beneath the composer folds it. */
|
||||
turns: TurnUsage[];
|
||||
contextTokens: number | null;
|
||||
pricing?: SessionPricing;
|
||||
composer: React.ReactNode;
|
||||
onSubmitAnswer: (output: QuestionAnswerData) => void;
|
||||
/** The model control's pass-through (the stats bar hosts it). */
|
||||
@@ -1880,6 +1886,7 @@ function DockOverlay({
|
||||
* home and /chat/new carry, above the composer while slots are unset. */
|
||||
setupCta?: React.ReactNode;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const { isAtBottom, scrollToBottom, scrollRef } = useStickToBottomContext();
|
||||
// Render-fresh bottom state (flicker round): the arrival block below reads
|
||||
// it DURING RENDER — the same value the after-paint effect used to read a
|
||||
@@ -2327,6 +2334,8 @@ function DockOverlay({
|
||||
morphing shell so it never joins a height animation. */}
|
||||
<StatsBar
|
||||
turns={turns}
|
||||
contextTokens={contextTokens}
|
||||
pricing={pricing}
|
||||
dictationSlot={dictationSlot}
|
||||
chatId={chatId}
|
||||
/>
|
||||
@@ -2354,7 +2363,7 @@ function DockOverlay({
|
||||
mid-question unmount), and widening past the floor fades it
|
||||
back in. */}
|
||||
{pending && plan && (
|
||||
<Hint label="Open the full plan" side="bottom">
|
||||
<Hint label={t("Open the full plan")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="plan-marginalia"
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import type { CompactionDetails } from "@/src/core";
|
||||
|
||||
@@ -19,11 +21,11 @@ export interface CompactionDividerData {
|
||||
* history was just summarized; the cut divider below carries the seam.
|
||||
* Inert since release polish 2026-10-06 — plain text, no affordance. */
|
||||
export function CompactionMomentDivider({ data: _data }: { data: CompactionDividerData }) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div className="flex w-full items-center justify-center py-1">
|
||||
<span data-testid="compaction-divider" className="px-1.5 text-xs text-muted-foreground/70">
|
||||
Context compacted
|
||||
</span>
|
||||
{t("Context compacted")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -35,12 +37,13 @@ export function CompactionMomentDivider({ data: _data }: { data: CompactionDivid
|
||||
* since release polish 2026-10-06 — the token count stays, the summary
|
||||
* is inspectable only in provider logs. */
|
||||
export function CompactionCutDivider({ data }: { data: CompactionDividerData }) {
|
||||
const kTok = data.details.tokensBefore > 0 ? ` · ${Math.round(data.details.tokensBefore / 1000)}k tok` : "";
|
||||
const { t } = useI18n();
|
||||
const kTok = data.details.tokensBefore > 0 ? t(" · {v0}k tok", { v0: Math.round(data.details.tokensBefore / 1000) }) : "";
|
||||
return (
|
||||
<div data-testid="compaction-cut-divider" className="my-4 flex w-full items-center gap-3">
|
||||
<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">
|
||||
History compacted{kTok}
|
||||
{t("History compacted")}{kTok}
|
||||
</span>
|
||||
<span className="h-0 flex-1 border-t-2 border-dotted border-border/50" aria-hidden />
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { DumbbellIcon } from "lucide-react";
|
||||
@@ -25,6 +27,7 @@ export function NodePickerControl({ count, onOpen, onClear }: {
|
||||
onOpen?: () => void;
|
||||
onClear?: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
@@ -39,7 +42,7 @@ export function NodePickerControl({ count, onOpen, onClear }: {
|
||||
}
|
||||
>
|
||||
<DumbbellIcon aria-hidden="true" className="size-3.5 text-muted-foreground" />
|
||||
{count > 0 ? `${count} ${count === 1 ? "node" : "nodes"} selected` : "Pick nodes"}
|
||||
{count > 0 ? t("{v0} {v1} selected", { v0: count, v1: count === 1 ? "node" : "nodes" }) : t("Pick nodes")}
|
||||
</button>
|
||||
{count > 0 && (
|
||||
<button
|
||||
@@ -48,8 +51,7 @@ export function NodePickerControl({ count, onOpen, onClear }: {
|
||||
onClick={onClear}
|
||||
className="cursor-pointer rounded-full px-2 py-1 font-ui text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
{t("Clear")}</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { ArrowRightIcon, CornerDownLeftIcon, SquareIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -75,6 +77,7 @@ export function Composer({
|
||||
* empty-Enter share it. */
|
||||
onNext?: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const act = () => {
|
||||
const action = enterAction({ busy, canSend, nextProblem });
|
||||
if (action === "stop") onStop();
|
||||
@@ -113,7 +116,7 @@ export function Composer({
|
||||
act();
|
||||
}
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
placeholder={t(placeholder)}
|
||||
autoFocus={autoFocus}
|
||||
rows={1}
|
||||
className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
@@ -136,16 +139,15 @@ export function Composer({
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="next-problem-button"
|
||||
aria-label="Next problem"
|
||||
aria-label={t("Next problem")}
|
||||
className="flex h-10 shrink-0 items-center justify-center gap-1.5 rounded-[10px] bg-green-600 px-4 font-ui text-xs font-medium uppercase tracking-wide text-white transition-colors hover:bg-green-500"
|
||||
>
|
||||
Next problem
|
||||
<ArrowRightIcon className="size-4" />
|
||||
{t("Next problem")}<ArrowRightIcon className="size-4" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
aria-label={busy && !canSend ? "Stop" : "Send"}
|
||||
aria-label={busy && !canSend ? t("Stop") : t("Send")}
|
||||
disabled={!busy && !canSend}
|
||||
className={cn(
|
||||
"flex size-10 shrink-0 items-center justify-center rounded-[10px] transition-colors",
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
@@ -45,17 +47,18 @@ export function DeleteNodeBody({
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Delete node"
|
||||
aria-label={t("Delete node")}
|
||||
data-testid="delete-node-dialog"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-[32rem] max-w-[calc(100vw-2rem)] rounded-xl border bg-card p-5 shadow-xl"
|
||||
>
|
||||
<h2 className="text-sm font-semibold text-destructive">
|
||||
{nodes.length === 1 ? "Delete node?" : `Delete ${nodes.length} nodes?`}
|
||||
{nodes.length === 1 ? t("Delete node?") : t("Delete {v0} nodes?", { v0: nodes.length })}
|
||||
</h2>
|
||||
{/* The node name(s) below the title in JetBrains Mono (owner,
|
||||
2026-09-24): the name is the payload — mono suits it, and
|
||||
@@ -74,14 +77,14 @@ export function DeleteNodeBody({
|
||||
) : (
|
||||
<code data-testid="node-names-code" className="font-mono text-sm text-foreground">
|
||||
{nodes.slice(0, 8).map((n) => n.name).join(", ")}
|
||||
{nodes.length > 8 ? `, and ${nodes.length - 8} more` : ""}
|
||||
{nodes.length > 8 ? t(", and {v0} more", { v0: nodes.length - 8 }) : ""}
|
||||
</code>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground" data-testid="node-permanence-line">
|
||||
{nodes.length === 1
|
||||
? "This permanently deletes the node — this cannot be undone."
|
||||
: `This permanently deletes all ${nodes.length} nodes — this cannot be undone.`}
|
||||
? t("This permanently deletes the node — this cannot be undone.")
|
||||
: t("This permanently deletes all {v0} nodes — this cannot be undone.", { v0: nodes.length })}
|
||||
</p>
|
||||
{failure && (
|
||||
<div
|
||||
@@ -90,7 +93,7 @@ export function DeleteNodeBody({
|
||||
className="mt-3 rounded-sm border border-border/60 px-3 py-2 text-xs"
|
||||
>
|
||||
<span className="text-foreground">
|
||||
{failure.code === "extraction_running" ? EXTRACTION_RETRY_LINE : failure.error}
|
||||
{t(failure.code === "extraction_running" ? EXTRACTION_RETRY_LINE : failure.error)}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@@ -99,8 +102,7 @@ export function DeleteNodeBody({
|
||||
disabled={busy}
|
||||
className="ml-3 text-xs text-foreground underline-offset-2 hover:underline disabled:opacity-40"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
{t("Try again")}</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-4 flex justify-end gap-2">
|
||||
@@ -111,8 +113,7 @@ export function DeleteNodeBody({
|
||||
disabled={busy}
|
||||
className="rounded-sm px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{t("Cancel")}</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="node-delete-confirm"
|
||||
@@ -123,7 +124,7 @@ export function DeleteNodeBody({
|
||||
// refusal banner): border + text, fill on hover.
|
||||
className="rounded-sm border border-destructive/50 bg-destructive/10 px-3 py-1.5 text-xs text-destructive transition-colors hover:bg-destructive/20 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Deleting…" : "Delete"}
|
||||
{busy ? t("Deleting…") : t("Delete")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,6 +147,7 @@ export function DeleteNodeDialog({
|
||||
* selection-side callers can prune. */
|
||||
onDeleted: (nodeIds: string[], graphRevision: number) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [busy, setBusy] = useState(false);
|
||||
const backdropDismiss = useBackdropDismiss(() => {
|
||||
if (!busy) onClose();
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
@@ -50,6 +52,7 @@ export function DeleteSessionDialog({
|
||||
/** Success path — the sidebar owns navigation + list patching. */
|
||||
onDeleted: (id: string, mode: ChatDeleteMode, graphRevision: number) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [traces, setTraces] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const backdropDismiss = useBackdropDismiss(() => {
|
||||
@@ -155,16 +158,17 @@ export function DeleteSessionBody({
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Delete session"
|
||||
aria-label={t("Delete session")}
|
||||
data-testid="delete-session-dialog"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-[32rem] max-w-[calc(100vw-2rem)] rounded-xl border bg-card p-5 shadow-xl"
|
||||
>
|
||||
<h2 className="text-sm font-semibold text-destructive">Delete session?</h2>
|
||||
<h2 className="text-sm font-semibold text-destructive">{t("Delete session?")}</h2>
|
||||
{/* The session name below the title in JetBrains Mono (owner,
|
||||
2026-09-24): no code-block chrome — the font already says
|
||||
code. Owner, 2026-10-13 polish: normal text-sm size (was
|
||||
@@ -176,9 +180,7 @@ export function DeleteSessionBody({
|
||||
</code>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
This permanently removes the session — its messages, background jobs, and extraction records. Everything
|
||||
it added to the graph stays unless you check below. This cannot be undone.
|
||||
</p>
|
||||
{t("This permanently removes the session — its messages, background jobs, and extraction records. Everything it added to the graph stays unless you check below. This cannot be undone.")}</p>
|
||||
<label
|
||||
data-testid={TRACES_COPY.testid}
|
||||
className="mt-4 flex cursor-pointer items-start gap-2.5 rounded-lg border border-border/60 px-4 py-3"
|
||||
@@ -192,8 +194,8 @@ export function DeleteSessionBody({
|
||||
className="mt-0.5 size-4 shrink-0 accent-primary"
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-sm text-foreground">{TRACES_COPY.title}</span>
|
||||
<span className="mt-1 block text-xs text-muted-foreground">{TRACES_COPY.body}</span>
|
||||
<span className="block text-sm text-foreground">{t(TRACES_COPY.title)}</span>
|
||||
<span className="mt-1 block text-xs text-muted-foreground">{t(TRACES_COPY.body)}</span>
|
||||
</span>
|
||||
</label>
|
||||
{failure && (
|
||||
@@ -202,7 +204,7 @@ export function DeleteSessionBody({
|
||||
data-testid="delete-failure"
|
||||
className="mt-3 rounded-sm border border-border/60 px-3 py-2 text-xs"
|
||||
>
|
||||
<span className="text-foreground">{failure.error}</span>
|
||||
<span className="text-foreground">{t(failure.error)}</span>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="delete-retry"
|
||||
@@ -210,8 +212,7 @@ export function DeleteSessionBody({
|
||||
disabled={busy}
|
||||
className="ml-3 text-xs text-foreground underline-offset-2 hover:underline disabled:opacity-40"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
{t("Try again")}</button>
|
||||
</div>
|
||||
)}
|
||||
{/* The node dialog's exact bottom row: quiet Cancel, destructive
|
||||
@@ -225,8 +226,7 @@ export function DeleteSessionBody({
|
||||
disabled={busy}
|
||||
className="rounded-sm px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{t("Cancel")}</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="delete-confirm"
|
||||
@@ -234,7 +234,7 @@ export function DeleteSessionBody({
|
||||
disabled={busy}
|
||||
className="rounded-sm border border-destructive/50 bg-destructive/10 px-3 py-1.5 text-xs text-destructive transition-colors hover:bg-destructive/20 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Deleting…" : "Delete"}
|
||||
{busy ? t("Deleting…") : t("Delete")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+22
-17
@@ -3,6 +3,8 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Loader2Icon, MicIcon } from "lucide-react";
|
||||
import { useSettingsDialog } from "@/components/settings/settings-dialog";
|
||||
import { dictationUrl, type SttLanguage } from "@/src/core";
|
||||
import { LanguageSelect, useI18n } from "@/components/i18n";
|
||||
import { Hint } from "@/components/ui/hint";
|
||||
|
||||
/**
|
||||
@@ -86,15 +88,7 @@ import { Hint } from "@/components/ui/hint";
|
||||
* endpointing=300, no interims. Silence streams too (the worklet never
|
||||
* pauses), so the socket never idles — no KeepAlive needed.
|
||||
*/
|
||||
const DG_URL =
|
||||
"wss://api.deepgram.com/v1/listen" +
|
||||
"?model=nova-3" +
|
||||
"&encoding=linear16" +
|
||||
"&sample_rate=16000" +
|
||||
"&channels=1" +
|
||||
"&smart_format=true" +
|
||||
"&punctuate=true" +
|
||||
"&endpointing=300";
|
||||
|
||||
|
||||
/** Meter tuning — the owner's tested values, see the file header. */
|
||||
const METER_FLOOR_DB = -50;
|
||||
@@ -285,6 +279,10 @@ export type Dictation = {
|
||||
* question waits.
|
||||
*/
|
||||
export function useDictation({ append }: { append: (text: string) => void }): Dictation {
|
||||
const { sttLanguage, setDictating } = useI18n();
|
||||
const selectedLanguage = useRef(sttLanguage);
|
||||
selectedLanguage.current = sttLanguage;
|
||||
const recordingLanguage = useRef<SttLanguage>(sttLanguage);
|
||||
const [phase, setPhase] = useState<DictationPhase>("idle");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
/** Latest RMS from the worklet — the meter samples this (dictate pattern). */
|
||||
@@ -330,6 +328,7 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
|
||||
const cleanup = useCallback(() => {
|
||||
genRef.current++;
|
||||
dictationActiveFlag = false;
|
||||
setDictating(false);
|
||||
flush(); // the deferred transcript appears when the run ends (owner round 2)
|
||||
if (safetyRef.current) {
|
||||
clearTimeout(safetyRef.current);
|
||||
@@ -366,7 +365,7 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
|
||||
// Minted JWTs authenticate via the "bearer" subprotocol — ["token",
|
||||
// jwt] is rejected at the handshake (verified live; "token" is for
|
||||
// raw API keys only, as in the owner's pi dictate extension).
|
||||
const ws = new WebSocket(DG_URL, ["bearer", token]);
|
||||
const ws = new WebSocket(dictationUrl(recordingLanguage.current), ["bearer", token]);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.addEventListener("open", () => {
|
||||
@@ -426,6 +425,8 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
|
||||
);
|
||||
|
||||
const start = useCallback(async () => {
|
||||
recordingLanguage.current = selectedLanguage.current;
|
||||
setDictating(true);
|
||||
dictationActiveFlag = true;
|
||||
setError(null);
|
||||
setPhase("connecting");
|
||||
@@ -622,6 +623,7 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
|
||||
* (full text in the tooltip), cleared on the next click.
|
||||
*/
|
||||
export function DictationBar({ dictation }: { dictation: Dictation }) {
|
||||
const { t } = useI18n();
|
||||
const { phase, error, levelRef, toggle, active, clearError } = dictation;
|
||||
const { open: openSettings } = useSettingsDialog();
|
||||
/** The keyless click (zero-keys wave, owner dictation trio): the errored
|
||||
@@ -673,12 +675,13 @@ export function DictationBar({ dictation }: { dictation: Dictation }) {
|
||||
|
||||
if (!active) {
|
||||
return (
|
||||
<div className="flex w-full min-w-0 items-center gap-1.5">
|
||||
<Hint
|
||||
// Errored: the button span truncates the line — the tooltip is its
|
||||
// full reveal (the keyless line KEEPS "Deepgram" — owner overrule:
|
||||
// it's the Keys row label, the truth the user needs). Otherwise the
|
||||
// quiet label + the live ⌘D binding.
|
||||
label={error ?? "Dictate"}
|
||||
label={error ? t(error) : t("Dictate")}
|
||||
action={error ? undefined : "toggle-dictation"}
|
||||
side="top"
|
||||
>
|
||||
@@ -692,16 +695,18 @@ export function DictationBar({ dictation }: { dictation: Dictation }) {
|
||||
toggle();
|
||||
}
|
||||
}}
|
||||
aria-label={error ? `Dictation failed: ${error}` : "Start dictation"}
|
||||
aria-label={error ? t("Dictation failed: {v0}", { v0: error }) : t("Start dictation")}
|
||||
data-testid="dictation-toggle"
|
||||
// Same blurring as the floating chrome (owner, fix wave round 3),
|
||||
// but lower opacity — the mic stays quieter than the model pills.
|
||||
className="flex h-7 w-full items-center justify-center gap-1.5 rounded-md border border-border/50 bg-card/50 text-xs text-muted-foreground/70 shadow-lg backdrop-blur transition-colors hover:border-border hover:text-muted-foreground"
|
||||
>
|
||||
<MicIcon className="size-3.5" />
|
||||
<span className="max-w-full truncate">{error ?? "Dictate"}</span>
|
||||
<span className="max-w-full truncate">{error ? t(error) : t("Dictate")}</span>
|
||||
</button>
|
||||
</Hint>
|
||||
<LanguageSelect field="sttLanguage" compact />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -710,14 +715,14 @@ export function DictationBar({ dictation }: { dictation: Dictation }) {
|
||||
<Hint
|
||||
// The owner flagged this copy good ("Stop dictation (Esc)") —
|
||||
// kept verbatim; only the machinery moved to the styled tooltip.
|
||||
label="Stop dictation (Esc)"
|
||||
label={t("Stop dictation (Esc)")}
|
||||
side="top"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
disabled={phase === "stopping"}
|
||||
aria-label="Stop dictation"
|
||||
aria-label={t("Stop dictation")}
|
||||
data-testid="dictation-toggle"
|
||||
className="flex h-7 shrink-0 items-center gap-1.5 rounded-md bg-destructive/10 px-2 text-xs font-medium text-destructive transition-colors hover:bg-destructive/20"
|
||||
>
|
||||
@@ -726,13 +731,13 @@ export function DictationBar({ dictation }: { dictation: Dictation }) {
|
||||
) : (
|
||||
<MicIcon className="size-3.5" />
|
||||
)}
|
||||
Stop
|
||||
</button>
|
||||
{t("Stop")}</button>
|
||||
</Hint>
|
||||
<span className="size-1.5 shrink-0 animate-pulse rounded-full bg-destructive" aria-hidden />
|
||||
{/* Fixed width while recording — nothing ever appends text beside it
|
||||
(no interims, owner round 1). Cells carry no minimum width; the
|
||||
COUNT adapts to the measured row space (owner round 2). */}
|
||||
<LanguageSelect field="sttLanguage" compact disabled />
|
||||
<div ref={meterRef} className="flex h-4 min-w-0 flex-1 items-center gap-[2px]" data-testid="dictation-meter">
|
||||
{levels.slice(-cellCount).map((v, i) => (
|
||||
<span
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useActivity } from "@/components/activity-dock";
|
||||
@@ -183,6 +185,7 @@ export function CoverageMenuBody({
|
||||
extracting: boolean;
|
||||
onExtract: () => void;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
const busy = coverage.running || extracting;
|
||||
const complete = coverage.uncoveredTokens === 0 && coverage.uncoveredCount === 0;
|
||||
return (
|
||||
@@ -190,17 +193,15 @@ export function CoverageMenuBody({
|
||||
{busy ? (
|
||||
<span className="flex items-center gap-1.5 text-muted-foreground" data-testid="ctx-coverage-running">
|
||||
<span className="size-1.5 animate-pulse rounded-full bg-foreground/70" aria-hidden />
|
||||
extracting…
|
||||
</span>
|
||||
{t("extracting…")}</span>
|
||||
) : complete ? (
|
||||
<span className="text-muted-foreground">fully extracted</span>
|
||||
<span className="text-muted-foreground">{t("fully extracted")}</span>
|
||||
) : (
|
||||
<span className="flex flex-col">
|
||||
<span className="tabular-nums text-foreground">
|
||||
{formatTokens(coverage.uncoveredTokens)} tok uncovered
|
||||
</span>
|
||||
{formatTokens(coverage.uncoveredTokens, language)}{" "}{t("tok uncovered")}</span>
|
||||
<span className="tabular-nums text-muted-foreground">
|
||||
{coverage.uncoveredCount} message{coverage.uncoveredCount === 1 ? "" : "s"} unextracted
|
||||
{t("{count} messages unextracted", { count: coverage.uncoveredCount })}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
@@ -211,7 +212,7 @@ export function CoverageMenuBody({
|
||||
disabled={busy || complete}
|
||||
className="flex items-center justify-center rounded-lg border px-2 py-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
>
|
||||
{busy ? "Running" : "Extract"}
|
||||
{busy ? t("Running") : t("Extract")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
@@ -241,6 +242,7 @@ export function ringFill(uncoveredTokens: number, chunkTokens: number): number {
|
||||
* threshold/kill-switch re-read live).
|
||||
*/
|
||||
export function CoverageRing({ chatId, refreshKey = 0 }: { chatId: string; refreshKey?: number }) {
|
||||
const { t } = useI18n();
|
||||
const [graph, setGraph] = useState<GraphRead | null>(null);
|
||||
const [coverage, setCoverage] = useState<SessionCoverage | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
@@ -301,7 +303,7 @@ export function CoverageRing({ chatId, refreshKey = 0 }: { chatId: string; refre
|
||||
<div ref={rootRef} className="lh-no-drag relative shrink-0">
|
||||
<Hint
|
||||
// Trimmed (owner, subtlety round 2026-09-25).
|
||||
label="How much of this session isn't mapped yet"
|
||||
label={t("How much of this session isn't mapped yet")}
|
||||
side="bottom"
|
||||
>
|
||||
<button
|
||||
@@ -359,46 +361,43 @@ export function CoverageRingGlyph({ fill, running }: { fill: number; running: bo
|
||||
* covered/uncovered tokens, message coverage, the threshold, the last
|
||||
* fold's age. */
|
||||
export function CoverageRingDetail({ coverage, chunkTokens }: { coverage: SessionCoverage; chunkTokens: number }) {
|
||||
const { t, language } = useI18n();
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Extraction coverage
|
||||
</div>
|
||||
{t("Extraction coverage")}</div>
|
||||
<div className="flex flex-col gap-1 text-muted-foreground">
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Uncovered</span>
|
||||
<span>{t("Uncovered")}</span>
|
||||
<span className="tabular-nums text-card-foreground">
|
||||
{formatTokens(coverage.uncoveredTokens)} tokens
|
||||
</span>
|
||||
{formatTokens(coverage.uncoveredTokens, language)}{" "}{t("tokens")}</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Covered</span>
|
||||
<span>{t("Covered")}</span>
|
||||
<span className="tabular-nums text-card-foreground">
|
||||
{formatTokens(coverage.coveredTokens)} tokens
|
||||
</span>
|
||||
{formatTokens(coverage.coveredTokens, language)}{" "}{t("tokens")}</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Messages</span>
|
||||
<span>{t("Messages")}</span>
|
||||
<span className="tabular-nums text-card-foreground">
|
||||
{coverage.coveredCount} / {coverage.totalMessages}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Chunk threshold</span>
|
||||
<span>{t("Chunk threshold")}</span>
|
||||
<span className="tabular-nums text-card-foreground">
|
||||
{formatTokens(chunkTokens)} tokens
|
||||
</span>
|
||||
{formatTokens(chunkTokens, language)}{" "}{t("tokens")}</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Last extraction</span>
|
||||
<span>{t("Last extraction")}</span>
|
||||
<span className="tabular-nums text-card-foreground">
|
||||
{coverage.lastFoldedAt ? timeAgo(coverage.lastFoldedAt) : "—"}
|
||||
</span>
|
||||
</div>
|
||||
{coverage.running && (
|
||||
<div className="flex justify-between gap-2" data-testid="coverage-ring-running">
|
||||
<span>Status</span>
|
||||
<span className="text-card-foreground">extracting…</span>
|
||||
<span>{t("Status")}</span>
|
||||
<span className="text-card-foreground">{t("extracting…")}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
"use client";
|
||||
import { countLabel } from "@/src/core";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useState } from "react";
|
||||
import { ChevronRightIcon } from "lucide-react";
|
||||
@@ -21,9 +24,10 @@ export interface GraphContextData {
|
||||
}
|
||||
|
||||
export function GraphContextCard({ data }: { data: GraphContextData }) {
|
||||
const { t, language } = useI18n();
|
||||
const [open, setOpen] = useState(false);
|
||||
const { propositions = [], chains = [] } = data ?? {};
|
||||
const noun = (n: number, one: string, many: string) => `${n} ${n === 1 ? one : many}`;
|
||||
const noun = (n: number, one: string, many: string) => countLabel(language, n, one, many);
|
||||
return (
|
||||
<div data-testid="graph-context-card" className="my-1">
|
||||
<button
|
||||
@@ -33,7 +37,7 @@ export function GraphContextCard({ data }: { data: GraphContextData }) {
|
||||
className="flex w-full cursor-pointer items-center gap-2 rounded-lg border border-dashed border-border/70 px-3 py-2 text-left text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<ChevronRightIcon aria-hidden="true" className={cn("size-3.5 shrink-0 transition-transform", open && "rotate-90")} />
|
||||
<span className="font-medium">Graph context</span>
|
||||
<span className="font-medium">{t("Graph context")}</span>
|
||||
<span className="min-w-0 flex-1 truncate">
|
||||
{noun(propositions.length, "proposition", "propositions")}
|
||||
{chains.length > 0 ? ` · ${noun(chains.length, "chain", "chains")}` : ""}
|
||||
|
||||
+82
-77
@@ -1,4 +1,7 @@
|
||||
"use client";
|
||||
import { translator, countLabel, type Language } from "@/src/core";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
/**
|
||||
* The home knowledge-graph view (W4; vision §1 "Rendering (DECIDED)").
|
||||
@@ -68,6 +71,7 @@ import { NotesImportErrors, useNotesImport } from "@/components/notes-import.tsx
|
||||
import Link from "next/link";
|
||||
import { FileTextIcon, ListTreeIcon, Loader2Icon, SearchIcon, SettingsIcon, UploadIcon, WaypointsIcon } from "lucide-react";
|
||||
import { incrementalLayout, propositionSessionHref, type GraphCostSummary, type GraphNode, type GraphSnapshot } from "@/src/core";
|
||||
import { planCostLabel } from "@/components/usage-format";
|
||||
import { GraphCanvasRenderer, type GraphRenderSettings } from "./graph-canvas.ts";
|
||||
import { usePopoverDismiss } from "@/components/popover-dismiss";
|
||||
import { useActivity } from "@/components/activity-dock";
|
||||
@@ -275,7 +279,8 @@ function SettingSlider({
|
||||
}
|
||||
|
||||
/** Compact token display: 45231 → "45.2k"; absent → "—". */
|
||||
function fmtTokens(n: number | undefined): string {
|
||||
function fmtTokens(n: number | undefined, language: Language = "en"): string {
|
||||
if (language === "ru" && n !== undefined) return new Intl.NumberFormat("ru-RU", { notation: "compact", maximumFractionDigits: 1 }).format(n);
|
||||
if (n === undefined) return "—";
|
||||
if (n < 1000) return String(Math.round(n));
|
||||
if (n < 1_000_000) return `${(n / 1000).toFixed(1)}k`;
|
||||
@@ -283,27 +288,30 @@ function fmtTokens(n: number | undefined): string {
|
||||
}
|
||||
|
||||
/** Relative time for run rows: "now", "12m", "3h", "2d". */
|
||||
function timeAgo(startedAt: number): string {
|
||||
function timeAgo(startedAt: number, language: Language = "en"): string {
|
||||
const t = translator(language);
|
||||
const mins = Math.round((Date.now() - startedAt) / 60_000);
|
||||
if (mins < 1) return "now";
|
||||
if (mins < 60) return `${mins}m`;
|
||||
if (mins < 1) return t("now");
|
||||
if (mins < 60) return t("{v0}m", { v0: mins });
|
||||
const hours = Math.round(mins / 60);
|
||||
if (hours < 24) return `${hours}h`;
|
||||
return `${Math.round(hours / 24)}d`;
|
||||
if (hours < 24) return t("{v0}h", { v0: hours });
|
||||
return t("{v0}d", { v0: Math.round(hours / 24) });
|
||||
}
|
||||
|
||||
/** Run/stage cost at 3 decimals (pipeline pennies are real money at this
|
||||
* scale); headline totals use 2. Null (unpriced model) renders "—". */
|
||||
function fmtRunCost(dollars: number | null, subscription = false): string {
|
||||
if (subscription) return dollars === null ? "ChatGPT plan" : `$${dollars.toFixed(3)} API + ChatGPT plan`;
|
||||
return dollars === null ? "—" : `$${dollars.toFixed(3)}`;
|
||||
function fmtRunCost(dollars: number | null, providers: readonly string[] = [], language: Language = "en"): string {
|
||||
return planCostLabel(dollars, providers, (value) => language === "ru" ? `${value.toLocaleString("ru-RU", { minimumFractionDigits: 3, maximumFractionDigits: 3 })} $` : `$${value.toFixed(3)}`);
|
||||
}
|
||||
function graphUsageLabel(costs: Pick<GraphCostSummary, "stages">): string {
|
||||
function graphProviders(value: { subscriptionRuns?: number; subscriptionProviders?: string[] }): string[] {
|
||||
return value.subscriptionProviders ?? ((value.subscriptionRuns ?? 0) > 0 ? ["ChatGPT"] : []);
|
||||
}
|
||||
function graphUsageLabel(costs: Pick<GraphCostSummary, "stages">, language: Language = "en"): string {
|
||||
const stages = [costs.stages.extraction, costs.stages.audit];
|
||||
const plan = stages.some((stage) => (stage.subscriptionRuns ?? 0) > 0);
|
||||
const providers = [...new Set(stages.flatMap(graphProviders))];
|
||||
const priced = stages.some((stage) => stage.runs - stage.unpricedRuns - (stage.subscriptionRuns ?? 0) > 0);
|
||||
const dollars = displayCostTotals(costs).totalDollars;
|
||||
return plan ? (priced ? `$${dollars.toFixed(2)} API + ChatGPT plan` : "ChatGPT plan") : `$${dollars.toFixed(2)}`;
|
||||
return planCostLabel(priced ? dollars : null, providers, (value) => language === "ru" ? `${value.toLocaleString("ru-RU", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} $` : `$${value.toFixed(2)}`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -337,6 +345,7 @@ export function displayCostTotals(costs: Pick<GraphCostSummary, "stages">): {
|
||||
/** Exported for the chains home (graph rendering off, owner
|
||||
* 2026-10-06): the same bare cumulative-dollars pill + panel. */
|
||||
export function GraphCostControl({ costs }: { costs: GraphCostSummary }) {
|
||||
const { t, language } = useI18n();
|
||||
const [open, setOpen] = useState(false);
|
||||
// Click anywhere outside (or Escape) closes the panel — the root
|
||||
// wraps button + panel, so the toggle itself keeps working.
|
||||
@@ -346,7 +355,7 @@ export function GraphCostControl({ costs }: { costs: GraphCostSummary }) {
|
||||
<div ref={rootRef} className="relative">
|
||||
<Hint
|
||||
// Trimmed (owner, subtlety round 2026-09-25).
|
||||
label="Graph costs — click for details"
|
||||
label={t("Graph costs — click for details")}
|
||||
side="bottom"
|
||||
>
|
||||
<button
|
||||
@@ -357,7 +366,7 @@ export function GraphCostControl({ costs }: { costs: GraphCostSummary }) {
|
||||
open ? "text-foreground" : "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{graphUsageLabel(costs)}
|
||||
{graphUsageLabel(costs, language)}
|
||||
</button>
|
||||
</Hint>
|
||||
{open && (
|
||||
@@ -380,9 +389,10 @@ export function GraphCostControl({ costs }: { costs: GraphCostSummary }) {
|
||||
* naming-kind runs never reach the list.
|
||||
*/
|
||||
function GraphCostPanel({ costs }: { costs: GraphCostSummary }) {
|
||||
const { t, language } = useI18n();
|
||||
const stageRows: [string, GraphCostSummary["stages"]["extraction"]][] = [
|
||||
["Extraction", costs.stages.extraction],
|
||||
["Audit", costs.stages.audit],
|
||||
[t("Extraction"), costs.stages.extraction],
|
||||
[t("Audit"), costs.stages.audit],
|
||||
];
|
||||
// The displayed figures come from displayCostTotals (naming excluded —
|
||||
// the pill and this panel must agree).
|
||||
@@ -391,12 +401,11 @@ function GraphCostPanel({ costs }: { costs: GraphCostSummary }) {
|
||||
<div className="w-80 max-w-[calc(100vw-1.5rem)] rounded-xl border bg-card/95 p-3 text-xs shadow-lg backdrop-blur">
|
||||
<div className="mb-2 flex items-baseline justify-between">
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Graph pipeline costs
|
||||
</span>
|
||||
{t("Graph pipeline costs")}</span>
|
||||
<span className="text-foreground tabular-nums">
|
||||
{graphUsageLabel(costs)}
|
||||
{graphUsageLabel(costs, language)}
|
||||
{unpricedRuns > 0 && (
|
||||
<span className="text-muted-foreground"> · {unpricedRuns} unpriced</span>
|
||||
<span className="text-muted-foreground"> · {unpricedRuns}{" "}{t("unpriced")}</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -405,14 +414,13 @@ function GraphCostPanel({ costs }: { costs: GraphCostSummary }) {
|
||||
<div key={label} className="flex items-baseline justify-between gap-2 text-[11px]">
|
||||
<span className="shrink-0 text-muted-foreground">{label}</span>
|
||||
<span className="min-w-0 text-right tabular-nums">
|
||||
{fmtRunCost(stage.runs - stage.unpricedRuns - (stage.subscriptionRuns ?? 0) <= 0 ? null : stage.dollars, (stage.subscriptionRuns ?? 0) > 0)}
|
||||
{fmtRunCost(stage.runs - stage.unpricedRuns - (stage.subscriptionRuns ?? 0) <= 0 ? null : stage.dollars, graphProviders(stage), language)}
|
||||
{stage.unpricedRuns > 0 && (stage.runs - stage.unpricedRuns - (stage.subscriptionRuns ?? 0) > 0 || (stage.subscriptionRuns ?? 0) > 0) && (
|
||||
<span className="text-muted-foreground"> +{stage.unpricedRuns} unpriced</span>
|
||||
<span className="text-muted-foreground"> +{stage.unpricedRuns}{" "}{t("unpriced")}</span>
|
||||
)}
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
· {fmtTokens(stage.tokens.inputTokens)} in / {fmtTokens(stage.tokens.outputTokens)} out
|
||||
</span>
|
||||
· {fmtTokens(stage.tokens.inputTokens, language)}{" "}{t("in /")}{" "}{fmtTokens(stage.tokens.outputTokens, language)}{" "}{t("out")}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
@@ -421,16 +429,16 @@ function GraphCostPanel({ costs }: { costs: GraphCostSummary }) {
|
||||
{costs.runs.map((run) => (
|
||||
<div key={run.startedAt} className="flex items-baseline justify-between gap-2 text-[11px]">
|
||||
<span className="min-w-0 flex-1 truncate text-muted-foreground">
|
||||
<span className="text-foreground/70">{timeAgo(run.startedAt)}</span>{" "}
|
||||
<span className="text-foreground/70">{timeAgo(run.startedAt, language)}</span>{" "}
|
||||
{run.title}
|
||||
{run.merged && (
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
+{run.merged.nodes}n
|
||||
+{language === "ru" ? countLabel(language, run.merged.nodes, "node", "nodes") : `${run.merged.nodes}n`}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="shrink-0 tabular-nums">{fmtRunCost(run.dollars, (run.subscriptionRuns ?? 0) > 0)}{run.dollars === null && run.subscriptionRuns === 1 ? " +1 unpriced" : ""}</span>
|
||||
<span className="shrink-0 tabular-nums">{fmtRunCost(run.dollars, graphProviders(run), language)}{run.dollars === null && run.subscriptionRuns === 1 ? t(" +1 unpriced") : ""}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -451,6 +459,7 @@ function GraphSettingsControl({
|
||||
settings: GraphRenderSettings;
|
||||
changeSettings: (update: (cur: RenderSettings) => RenderSettings) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [open, setOpen] = useState(false);
|
||||
// Click anywhere outside (or Escape) closes the panel (2026-09-17) —
|
||||
// the root wraps button + panel, so the toggle itself keeps working.
|
||||
@@ -462,7 +471,7 @@ function GraphSettingsControl({
|
||||
<div ref={rootRef} className="relative">
|
||||
<Hint
|
||||
// User language (tooltip wave) — "rendering" is internal.
|
||||
label="Graph display settings"
|
||||
label={t("Graph display settings")}
|
||||
side="bottom"
|
||||
>
|
||||
<button
|
||||
@@ -495,7 +504,7 @@ function GraphSettingsControl({
|
||||
number — src/core/render-settings.ts). Physics keeps the
|
||||
fine-grained log sliders (step 5). */}
|
||||
<SettingSlider
|
||||
label="Node size"
|
||||
label={t("Node size")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={10}
|
||||
@@ -505,7 +514,7 @@ function GraphSettingsControl({
|
||||
changeSettings((cur) => ({ ...cur, nodeSize: fromLadderPosition(p, NODE_SIZE_LADDER) }))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Edge width"
|
||||
label={t("Edge width")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={10}
|
||||
@@ -515,7 +524,7 @@ function GraphSettingsControl({
|
||||
changeSettings((cur) => ({ ...cur, edgeWidth: fromLadderPosition(p, EDGE_WIDTH_LADDER) }))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Arrowhead size"
|
||||
label={t("Arrowhead size")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={10}
|
||||
@@ -525,7 +534,7 @@ function GraphSettingsControl({
|
||||
changeSettings((cur) => ({ ...cur, arrowLength: fromLadderPosition(p, ARROW_LENGTH_LADDER) }))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Label size"
|
||||
label={t("Label size")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={10}
|
||||
@@ -536,7 +545,7 @@ function GraphSettingsControl({
|
||||
/>
|
||||
{/* Display is absolute (ratio / 0.5): "1×" is the default, dead-center (owner, 2026-10-07). */}
|
||||
<SettingSlider
|
||||
label="Labels until zoom"
|
||||
label={t("Labels until zoom")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={10}
|
||||
@@ -554,10 +563,9 @@ function GraphSettingsControl({
|
||||
the paint. */}
|
||||
<div className="mt-1.5 flex flex-col gap-1.5 border-t pt-1.5">
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Regions
|
||||
</span>
|
||||
{t("Regions")}</span>
|
||||
<label className="flex cursor-pointer items-center justify-between text-[11px] text-muted-foreground">
|
||||
<span>Background colors</span>
|
||||
<span>{t("Background colors")}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.regions.enabled}
|
||||
@@ -570,7 +578,7 @@ function GraphSettingsControl({
|
||||
/>
|
||||
</label>
|
||||
<SettingSlider
|
||||
label="Dilation"
|
||||
label={t("Dilation")}
|
||||
disabled={!regionTuning.enabled}
|
||||
min={0}
|
||||
max={100}
|
||||
@@ -584,7 +592,7 @@ function GraphSettingsControl({
|
||||
}))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Blur"
|
||||
label={t("Blur")}
|
||||
disabled={!regionTuning.enabled}
|
||||
min={0}
|
||||
max={100}
|
||||
@@ -599,7 +607,7 @@ function GraphSettingsControl({
|
||||
}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Edge alpha"
|
||||
label={t("Edge alpha")}
|
||||
disabled={!regionTuning.enabled}
|
||||
min={0}
|
||||
max={100}
|
||||
@@ -615,7 +623,7 @@ function GraphSettingsControl({
|
||||
<label
|
||||
className={`flex items-center justify-between gap-2 text-[11px] text-muted-foreground${!regionTuning.enabled ? " opacity-40" : ""}`}
|
||||
>
|
||||
<span>Bitmap resolution</span>
|
||||
<span>{t("Bitmap resolution")}</span>
|
||||
<select
|
||||
disabled={!regionTuning.enabled}
|
||||
className="rounded-md border bg-background px-1.5 py-0.5 text-xs tabular-nums text-foreground"
|
||||
@@ -640,7 +648,7 @@ function GraphSettingsControl({
|
||||
their own clusterLabels toggle. Size is screen px
|
||||
(constant at any zoom, unlike node labels). */}
|
||||
<label className="flex cursor-pointer items-center justify-between text-[11px] text-muted-foreground">
|
||||
<span>Cluster labels</span>
|
||||
<span>{t("Cluster labels")}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.clusterLabels}
|
||||
@@ -649,7 +657,7 @@ function GraphSettingsControl({
|
||||
/>
|
||||
</label>
|
||||
<SettingSlider
|
||||
label="Cluster label size"
|
||||
label={t("Cluster label size")}
|
||||
disabled={!settings.clusterLabels}
|
||||
min={0}
|
||||
max={100}
|
||||
@@ -675,10 +683,9 @@ function GraphSettingsControl({
|
||||
anchor + its gray-out-able controls last. */}
|
||||
<div className="mt-1.5 flex flex-col gap-1.5 border-t pt-1.5">
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Physics
|
||||
</span>
|
||||
{t("Physics")}</span>
|
||||
<SettingSlider
|
||||
label="Node repulsion"
|
||||
label={t("Node repulsion")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
@@ -691,7 +698,7 @@ function GraphSettingsControl({
|
||||
}))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Edge attraction"
|
||||
label={t("Edge attraction")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
@@ -704,7 +711,7 @@ function GraphSettingsControl({
|
||||
}))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Edge length"
|
||||
label={t("Edge length")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
@@ -717,7 +724,7 @@ function GraphSettingsControl({
|
||||
}))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Central pull"
|
||||
label={t("Central pull")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
@@ -730,12 +737,12 @@ function GraphSettingsControl({
|
||||
}))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Cluster pull"
|
||||
label={t("Cluster pull")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
value={toOffSliderPosition(physicsTuning.clusterPull, CLUSTER_PULL_RANGE.min, CLUSTER_PULL_RANGE.max)}
|
||||
display={physicsTuning.clusterPull <= 0 ? "off" : sizeDisplay(physicsTuning.clusterPull)}
|
||||
display={physicsTuning.clusterPull <= 0 ? t("off") : sizeDisplay(physicsTuning.clusterPull)}
|
||||
onChange={(p) =>
|
||||
changeSettings((cur) => ({
|
||||
...cur,
|
||||
@@ -743,7 +750,7 @@ function GraphSettingsControl({
|
||||
}))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Friction"
|
||||
label={t("Friction")}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
@@ -760,8 +767,7 @@ function GraphSettingsControl({
|
||||
controls at the very bottom — the grayed group reads
|
||||
as a self-contained sub-section. */}
|
||||
<label className="flex items-center justify-between gap-2 text-xs">
|
||||
Depth anchor
|
||||
<select
|
||||
{t("Depth anchor")}<select
|
||||
className="rounded border bg-background px-1 py-0.5 text-xs"
|
||||
value={physicsTuning.depthMode}
|
||||
onChange={(e) =>
|
||||
@@ -771,13 +777,13 @@ function GraphSettingsControl({
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="off">Off</option>
|
||||
<option value="vertical">Vertical (up)</option>
|
||||
<option value="radial">Radial (outward)</option>
|
||||
<option value="off">{t("Off")}</option>
|
||||
<option value="vertical">{t("Vertical (up)")}</option>
|
||||
<option value="radial">{t("Radial (outward)")}</option>
|
||||
</select>
|
||||
</label>
|
||||
<SettingSlider
|
||||
label="Depth strength"
|
||||
label={t("Depth strength")}
|
||||
disabled={physicsTuning.depthMode === "off"}
|
||||
min={0}
|
||||
max={100}
|
||||
@@ -791,7 +797,7 @@ function GraphSettingsControl({
|
||||
}))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Depth spacing"
|
||||
label={t("Depth spacing")}
|
||||
disabled={physicsTuning.depthMode === "off"}
|
||||
min={0}
|
||||
max={100}
|
||||
@@ -805,7 +811,7 @@ function GraphSettingsControl({
|
||||
}))}
|
||||
/>
|
||||
<SettingSlider
|
||||
label="Base ring radius"
|
||||
label={t("Base ring radius")}
|
||||
disabled={physicsTuning.depthMode !== "radial"}
|
||||
min={0}
|
||||
max={100}
|
||||
@@ -863,13 +869,14 @@ export function GraphChromeRow({
|
||||
* 2026-09-29). */
|
||||
onOpenChains: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<>
|
||||
{!isEmpty && (
|
||||
<div className="graph-chrome-fade-in w-56 min-w-0 shrink rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
|
||||
<Hint
|
||||
// ⌘F focuses node search (surface-scoped registry action).
|
||||
label="Search nodes"
|
||||
label={t("Search nodes")}
|
||||
action="find"
|
||||
side="bottom"
|
||||
>
|
||||
@@ -879,15 +886,15 @@ export function GraphChromeRow({
|
||||
ref={searchInputRef}
|
||||
value={query}
|
||||
onChange={(e) => onQuery(e.target.value)}
|
||||
placeholder="Search nodes…"
|
||||
aria-label="Search nodes"
|
||||
placeholder={t("Search nodes…")}
|
||||
aria-label={t("Search nodes")}
|
||||
spellCheck={false}
|
||||
className="h-7 w-full rounded-lg border bg-background pl-8 text-xs outline-none placeholder:text-muted-foreground focus:border-ring"
|
||||
/>
|
||||
</div>
|
||||
</Hint>
|
||||
{noMatch && (
|
||||
<div className="px-1.5 pt-1 text-[11px] text-muted-foreground">No matching nodes.</div>
|
||||
<div className="px-1.5 pt-1 text-[11px] text-muted-foreground">{t("No matching nodes.")}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -895,7 +902,7 @@ export function GraphChromeRow({
|
||||
container (36px band), between the search and Import. */}
|
||||
{!isEmpty && (
|
||||
<div className="graph-chrome-fade-in shrink-0 rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
|
||||
<Hint label="Every reasoning chain" side="bottom">
|
||||
<Hint label={t("Every reasoning chain")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenChains}
|
||||
@@ -903,8 +910,7 @@ export function GraphChromeRow({
|
||||
className="flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent"
|
||||
>
|
||||
<ListTreeIcon className="size-3" />
|
||||
Chains
|
||||
</button>
|
||||
{t("Chains")}</button>
|
||||
</Hint>
|
||||
</div>
|
||||
)}
|
||||
@@ -926,7 +932,7 @@ export function GraphChromeRow({
|
||||
// The one button whose action isn't obvious from its label:
|
||||
// the missing fact is where imports go (owner, subtlety
|
||||
// round 2026-09-25).
|
||||
label="Import notes into the graph"
|
||||
label={t("Import notes into the graph")}
|
||||
side="bottom"
|
||||
>
|
||||
<button
|
||||
@@ -937,7 +943,7 @@ export function GraphChromeRow({
|
||||
className="flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
<UploadIcon className="size-3" />
|
||||
{importing ? "Importing…" : "Import notes…"}
|
||||
{importing ? t("Importing…") : t("Import notes…")}
|
||||
</button>
|
||||
</Hint>
|
||||
</div>
|
||||
@@ -971,6 +977,7 @@ export function GraphView({
|
||||
onPracticeSelectionChange?: (nodes: { id: string; name: string; statement: string }[]) => void;
|
||||
onChainSelectClose?: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const cardRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -1495,10 +1502,9 @@ export function GraphView({
|
||||
<div className="flex h-full w-full items-center justify-center px-4">
|
||||
<div className="flex flex-col items-center gap-3 text-center text-muted-foreground">
|
||||
<WaypointsIcon className="size-10 opacity-40" strokeWidth={1.25} />
|
||||
<div className="text-lg font-medium text-foreground">Knowledge graph</div>
|
||||
<div className="text-lg font-medium text-foreground">{t("Knowledge graph")}</div>
|
||||
<p className="max-w-sm text-sm">
|
||||
Start a session or import notes to build your graph.
|
||||
</p>
|
||||
{t("Start a session or import notes to build your graph.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
@@ -1538,8 +1544,7 @@ export function GraphView({
|
||||
}}
|
||||
className="flex items-center rounded-lg px-2.5 py-1.5 text-left text-muted-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
{t("Delete")}</button>
|
||||
</MenuShell>
|
||||
)}
|
||||
|
||||
@@ -1627,9 +1632,9 @@ export function GraphView({
|
||||
className="flex items-center gap-2 rounded-full border bg-card/85 px-3 py-1.5 text-xs text-muted-foreground shadow-lg backdrop-blur"
|
||||
>
|
||||
<Loader2Icon className="size-3.5 shrink-0 animate-spin" />
|
||||
<span className="capitalize">{run.phase}</span>
|
||||
<span className="capitalize">{t(run.phase)}</span>
|
||||
<span className="max-w-48 truncate text-foreground">{run.title}</span>
|
||||
<span className="tabular-nums">{Math.max(0, Math.round((Date.now() - run.startedAt) / 1000))}s</span>
|
||||
<span className="tabular-nums">{t("{v0}s", { v0: Math.max(0, Math.round((Date.now() - run.startedAt) / 1000)) })}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -1649,7 +1654,7 @@ export function GraphView({
|
||||
<div className="mt-1 text-xs leading-relaxed text-muted-foreground">{selected.node.statement}</div>
|
||||
{selected.sourceIds.length > 0 ? (
|
||||
<div className="mt-3 flex flex-col gap-1">
|
||||
<div className="text-xs text-muted-foreground">Sessions</div>
|
||||
<div className="text-xs text-muted-foreground">{t("Sessions")}</div>
|
||||
{selected.sourceIds.map((sourceId) => {
|
||||
// An imported-notes file: a STATIC entry — the path,
|
||||
// plain text, never a link (no session to open).
|
||||
@@ -1678,7 +1683,7 @@ export function GraphView({
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 text-xs text-muted-foreground">No sessions recorded.</div>
|
||||
<div className="mt-3 text-xs text-muted-foreground">{t("No sessions recorded.")}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
+7
-5
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -30,6 +32,7 @@ export function Home({
|
||||
* changing the setting applies on the next visit home. */
|
||||
rendering?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const [topic, setTopic] = useState("");
|
||||
/* The topic MIRROR ("nothing gets lost" round, 2026-10-01 — same
|
||||
@@ -236,8 +239,7 @@ export function Home({
|
||||
onClick={() => setSetupOpen(true)}
|
||||
className="rounded-sm border border-border bg-card px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 hover:bg-accent cursor-pointer"
|
||||
>
|
||||
Set up your models
|
||||
</button>
|
||||
{t("Set up your models")}</button>
|
||||
)
|
||||
)}
|
||||
/>
|
||||
@@ -270,7 +272,7 @@ export function Home({
|
||||
void start();
|
||||
}
|
||||
}}
|
||||
placeholder={mode === "practice" ? "What do you want to practice?" : "What do you want to learn?"}
|
||||
placeholder={mode === "practice" ? t("What do you want to practice?") : t("What do you want to learn?")}
|
||||
autoFocus
|
||||
rows={1}
|
||||
className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
@@ -279,7 +281,7 @@ export function Home({
|
||||
affordance (owner, subtlety round 2026-09-25). */}
|
||||
<button
|
||||
type="submit"
|
||||
aria-label="Start session"
|
||||
aria-label={t("Start session")}
|
||||
disabled={(!topic.trim() && !dictation.active) || busy}
|
||||
className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-primary text-primary-foreground transition-colors hover:opacity-90 disabled:opacity-40"
|
||||
>
|
||||
@@ -309,7 +311,7 @@ export function Home({
|
||||
}
|
||||
>
|
||||
{m === "practice" ? <DumbbellIcon aria-hidden="true" className="size-3" /> : null}
|
||||
{m === "teach" ? "Teach" : "Practice"}
|
||||
{m === "teach" ? t("Teach") : t("Practice")}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
import { resolveLanguage, resolveSttLanguage, translator, type GeneralSettings, type Language, type SttLanguage, type Translator } from "@/src/core";
|
||||
import { notifySettingsSaved, useSettingsSaved } from "./settings-signal";
|
||||
import { MenuShell } from "./menu-shell";
|
||||
|
||||
type LanguageField = "language" | "sttLanguage";
|
||||
type I18nValue = {
|
||||
language: Language;
|
||||
sttLanguage: SttLanguage;
|
||||
general: GeneralSettings;
|
||||
dictating: boolean;
|
||||
setDictating: (active: boolean) => void;
|
||||
t: Translator;
|
||||
saveGeneral: (patch: Partial<GeneralSettings>) => Promise<void>;
|
||||
saveLanguage: <Field extends LanguageField>(field: Field, value: GeneralSettings[Field]) => Promise<void>;
|
||||
};
|
||||
const I18nContext = createContext<I18nValue>({ language: "en", sttLanguage: "en", general: {}, dictating: false, setDictating: () => {}, t: translator("en"), saveGeneral: async () => {}, saveLanguage: async () => {} });
|
||||
export function useI18n(): I18nValue { return useContext(I18nContext); }
|
||||
|
||||
/** Initial settings and locale come from the server, so hydration preserves the first frame. */
|
||||
export function I18nProvider({ children, initialGeneral = {}, system = "en" }: { children: ReactNode; initialGeneral?: GeneralSettings; system?: Language }) {
|
||||
const [general, setGeneral] = useState(initialGeneral);
|
||||
const [dictating, setDictating] = useState(false);
|
||||
const [detected, setDetected] = useState<Language>(system);
|
||||
const pending = useRef<Promise<void>>(Promise.resolve());
|
||||
const sequence = useRef(0);
|
||||
const latest = useRef(general);
|
||||
latest.current = general;
|
||||
const language = resolveLanguage(general.language, detected);
|
||||
const sttLanguage = resolveSttLanguage(general.sttLanguage, detected);
|
||||
const t = useMemo(() => translator(language), [language]);
|
||||
useEffect(() => {
|
||||
const detect = () => setDetected(resolveLanguage(undefined, navigator.languages));
|
||||
detect();
|
||||
window.addEventListener("languagechange", detect);
|
||||
return () => window.removeEventListener("languagechange", detect);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
document.documentElement.lang = language;
|
||||
document.title = "Learning Harness";
|
||||
const description = document.querySelector('meta[name="description"]');
|
||||
if (description) description.setAttribute("content", t("A teacher agent with a memory — sessions, quizzes, and a knowledge graph of what you know."));
|
||||
window.lh?.setLanguage?.(language);
|
||||
}, [language, t]);
|
||||
useSettingsSaved((section) => {
|
||||
if (section !== "general") return;
|
||||
const request = ++sequence.current;
|
||||
void fetch("/api/settings").then((r) => { if (!r.ok) throw new Error("settings"); return r.json(); })
|
||||
.then((body: { settings?: { general?: GeneralSettings } }) => { if (request === sequence.current) setGeneral(body.settings?.general ?? {}); }).catch(() => {});
|
||||
});
|
||||
// Serialize writes and re-read before replacing the section: simultaneous selectors cannot lose each other's changes.
|
||||
const saveGeneral = useCallback((patch: Partial<GeneralSettings>) => {
|
||||
const write = pending.current.catch(() => {}).then(async () => {
|
||||
const current = await fetch("/api/settings");
|
||||
if (!current.ok) throw new Error("Could not load language settings");
|
||||
const body = await current.json() as { settings?: { general?: GeneralSettings } };
|
||||
const next = { ...(body.settings?.general ?? latest.current) };
|
||||
for (const field of ["language", "sttLanguage", "autoUpdate"] as const) {
|
||||
if (!Object.hasOwn(patch, field)) continue;
|
||||
if (patch[field] === undefined) delete next[field];
|
||||
else Object.assign(next, { [field]: patch[field] });
|
||||
}
|
||||
const res = await fetch("/api/settings/general", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(next) });
|
||||
if (!res.ok) throw new Error("Could not save language settings");
|
||||
sequence.current++;
|
||||
setGeneral(next);
|
||||
notifySettingsSaved("general");
|
||||
});
|
||||
pending.current = write;
|
||||
return write;
|
||||
}, []);
|
||||
const saveLanguage = useCallback(<Field extends LanguageField,>(field: Field, value: GeneralSettings[Field]) => saveGeneral({ [field]: value }), [saveGeneral]);
|
||||
const value = useMemo(() => ({ language, sttLanguage, general, dictating, setDictating, t, saveGeneral, saveLanguage }), [language, sttLanguage, general, dictating, t, saveGeneral, saveLanguage]);
|
||||
return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
|
||||
}
|
||||
|
||||
export function LanguageSelect({ field, disabled = false, compact = false }: { field: "language" | "sttLanguage"; disabled?: boolean; compact?: boolean }) {
|
||||
const { general, t, saveLanguage, sttLanguage, dictating } = useI18n();
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const trigger = useRef<HTMLButtonElement>(null);
|
||||
const menuId = useId();
|
||||
const locked = disabled || saving || (field === "sttLanguage" && dictating);
|
||||
const menuOpen = open && !locked;
|
||||
const compactStt = compact && field === "sttLanguage";
|
||||
const saved = general[field] ?? "auto";
|
||||
const selected = compactStt && saved === "auto" ? sttLanguage : saved;
|
||||
const label = t(field === "language" ? "Interface language" : "Speech recognition language");
|
||||
const testid = `language-select-${field}${compact ? "-compact" : ""}`;
|
||||
const options = [
|
||||
...(!compactStt ? [{ value: "auto", label: t("System default") } as const] : []),
|
||||
{ value: "en", label: "English" },
|
||||
{ value: "ru", label: "Русский" },
|
||||
...(field === "sttLanguage" ? [{ value: "multi", label: t("Multilingual") } as const] : []),
|
||||
] as const;
|
||||
useEffect(() => { if (locked) setOpen(false); }, [locked]);
|
||||
useEffect(() => {
|
||||
if (!menuOpen) return;
|
||||
const outside = (event: PointerEvent) => {
|
||||
const target = event.target as Node;
|
||||
if (!trigger.current?.contains(target) && !document.getElementById(menuId)?.contains(target)) setOpen(false);
|
||||
};
|
||||
const escape = (event: KeyboardEvent) => {
|
||||
if (event.key !== "Escape") return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setOpen(false);
|
||||
trigger.current?.focus();
|
||||
};
|
||||
document.addEventListener("pointerdown", outside);
|
||||
// Claim Escape before the settings dialog or dictation's outer layer.
|
||||
document.addEventListener("keydown", escape, true);
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", outside);
|
||||
document.removeEventListener("keydown", escape, true);
|
||||
};
|
||||
}, [menuOpen, menuId]);
|
||||
const pick = (value: "auto" | SttLanguage) => {
|
||||
if (locked) return;
|
||||
setOpen(false);
|
||||
trigger.current?.focus();
|
||||
if (value === saved) return;
|
||||
setSaving(true); setError(null);
|
||||
void saveLanguage(field, value === "auto" ? undefined : value).catch((e: unknown) => setError(e instanceof Error ? e.message : "Could not save language settings")).finally(() => setSaving(false));
|
||||
};
|
||||
return <span className={compact ? "flex shrink-0 items-center gap-1" : "flex flex-col items-end gap-1"}>
|
||||
<button ref={trigger} type="button" aria-label={label} title={label} aria-haspopup="menu" aria-expanded={menuOpen} aria-controls={menuOpen ? menuId : undefined} disabled={locked} data-testid={testid}
|
||||
className={`flex h-7 max-w-full items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50 ${compact ? "w-24" : "w-36"}`}
|
||||
onClick={() => setOpen(!menuOpen)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
|
||||
event.preventDefault(); event.stopPropagation(); setOpen(true);
|
||||
}}>
|
||||
<span className="min-w-0 flex-1 truncate text-left">{compact && selected === "multi" ? t("Multi") : options.find((option) => option.value === selected)?.label}</span>
|
||||
<span aria-hidden className="text-muted-foreground">▾</span>
|
||||
</button>
|
||||
{menuOpen && <MenuShell anchorRef={trigger} testid={`${testid}-menu`} preferredSide={compact ? "up" : "down"} menuClass="flex w-44 flex-col gap-0.5 rounded-xl border border-border bg-card p-2 text-xs shadow-xl">
|
||||
<div id={menuId} role="menu" aria-label={label} className="flex flex-col gap-0.5">
|
||||
{options.map((option) => <button key={option.value} type="button" role="menuitemradio" aria-checked={selected === option.value} onClick={() => pick(option.value)}
|
||||
className={`flex items-center justify-between rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted ${selected === option.value ? "bg-muted/60 text-card-foreground" : "text-card-foreground"}`}>
|
||||
<span>{option.label}</span>{selected === option.value && <span aria-hidden>✓</span>}
|
||||
</button>)}
|
||||
</div>
|
||||
</MenuShell>}
|
||||
{error && <span role="alert" className="max-w-56 text-xs text-destructive">{t(error)}</span>}
|
||||
</span>;
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
/**
|
||||
* Keyboard shortcuts (shortcut wave A, 2026-09-17) — the single document-level
|
||||
@@ -151,13 +153,14 @@ export function KeyboardShortcuts() {
|
||||
* Until the settings milestone ships an editor, this is how shortcuts
|
||||
* stay discoverable. */
|
||||
function CheatSheet({ open, onClose }: { open: boolean; onClose: () => void }) {
|
||||
const { t } = useI18n();
|
||||
const backdropDismiss = useBackdropDismiss(onClose);
|
||||
if (!open) return null;
|
||||
const scopes = ["global", "chat", "graph"] as const;
|
||||
const scopeLabels: Record<(typeof scopes)[number], string> = {
|
||||
global: "Global",
|
||||
chat: "Chat",
|
||||
graph: "Graph view",
|
||||
global: t("Global"),
|
||||
chat: t("Chat"),
|
||||
graph: t("Graph view"),
|
||||
};
|
||||
return (
|
||||
<div
|
||||
@@ -170,8 +173,8 @@ function CheatSheet({ open, onClose }: { open: boolean; onClose: () => void }) {
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="mb-4 flex items-baseline justify-between">
|
||||
<span className="text-sm font-medium text-card-foreground">Keyboard shortcuts</span>
|
||||
<span className="text-xs text-muted-foreground">Esc to close</span>
|
||||
<span className="text-sm font-medium text-card-foreground">{t("Keyboard shortcuts")}</span>
|
||||
<span className="text-xs text-muted-foreground">{t("Esc to close")}</span>
|
||||
</div>
|
||||
{scopes.map((scope) => {
|
||||
const actions = KEYBOARD_ACTIONS.filter((a) => a.scope === scope);
|
||||
@@ -184,9 +187,9 @@ function CheatSheet({ open, onClose }: { open: boolean; onClose: () => void }) {
|
||||
<div className="flex flex-col gap-1">
|
||||
{actions.map((a) => (
|
||||
<div key={a.id} className="flex items-center justify-between gap-4 text-sm">
|
||||
<span className="text-muted-foreground">{a.label}</span>
|
||||
<span className="text-muted-foreground">{t(a.label)}</span>
|
||||
<kbd className="rounded-md border border-border bg-background px-1.5 py-0.5 font-mono text-xs text-card-foreground">
|
||||
{formatBinding(bindingForAction(a.id))}
|
||||
{t(formatBinding(bindingForAction(a.id)))}
|
||||
</kbd>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
/**
|
||||
* MARKDOWN BLOCKS, MELTED INTO THE MESSAGE (owner wave, 2026-09-19): the
|
||||
@@ -139,6 +141,7 @@ export function codeSource(children: ReactNode): string {
|
||||
* still streaming (the trailing open fence), a quiet skeleton instead of a
|
||||
* doomed parse. */
|
||||
function MermaidInline({ chart }: { chart: string }) {
|
||||
const { t } = useI18n();
|
||||
const [svg, setSvg] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [attempt, setAttempt] = useState(0);
|
||||
@@ -199,17 +202,17 @@ function MermaidInline({ chart }: { chart: string }) {
|
||||
dangerouslySetInnerHTML={{ __html: svg ?? "" }}
|
||||
/>
|
||||
<div className="absolute top-0 right-0 flex items-start gap-0.5">
|
||||
<CopyCorner getText={() => chart} label="Copy diagram source" />
|
||||
<CopyCorner getText={() => chart} label={t("Copy diagram source")} />
|
||||
{overlay && (
|
||||
<Hint
|
||||
// Full-screen overlay copy (tooltip wave) — "session view" was
|
||||
// internal direction-speak for the same thing.
|
||||
label="Open full-screen"
|
||||
label={t("Open full-screen")}
|
||||
side="bottom"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Expand diagram"
|
||||
aria-label={t("Expand diagram")}
|
||||
data-testid="md-mermaid-expand"
|
||||
className="flex size-6 items-center justify-center rounded-md text-muted-foreground/70 opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover/md:opacity-100"
|
||||
onClick={(e) => {
|
||||
@@ -234,6 +237,7 @@ function MermaidInline({ chart }: { chart: string }) {
|
||||
* mounts. The container/look is CSS-melted in globals.css
|
||||
* (data-streamdown="code-block"…). */
|
||||
export function MarkdownCode(props: ComponentProps<"code"> & ExtraProps) {
|
||||
const { t } = useI18n();
|
||||
const incomplete = useIsCodeFenceIncomplete();
|
||||
const { children, className, node, ...rest } = props;
|
||||
|
||||
@@ -257,7 +261,7 @@ export function MarkdownCode(props: ComponentProps<"code"> & ExtraProps) {
|
||||
const lineNumbers = !/\bnoLineNumbers\b/.test(meta);
|
||||
return (
|
||||
<div className="group/md relative" data-testid="md-code">
|
||||
<CopyCorner className="absolute top-1.5 right-2 z-10" getText={() => source} label="Copy code" />
|
||||
<CopyCorner className="absolute top-1.5 right-2 z-10" getText={() => source} label={t("Copy code")} />
|
||||
<CodeBlock
|
||||
code={source}
|
||||
language={language}
|
||||
@@ -374,6 +378,7 @@ export function MarkdownBlockquote(props: ComponentProps<"blockquote"> & ExtraPr
|
||||
* horizontal-scroller for wide ones, with the corner copy. The copy
|
||||
* serializes the REAL DOM table (the library's own extractor → Markdown). */
|
||||
export function MarkdownTable(props: ComponentProps<"table"> & ExtraProps) {
|
||||
const { t } = useI18n();
|
||||
const { children, node, ...rest } = props;
|
||||
const ref = useRef<HTMLTableElement>(null);
|
||||
return (
|
||||
@@ -385,7 +390,7 @@ export function MarkdownTable(props: ComponentProps<"table"> & ExtraProps) {
|
||||
// cells it hovers over; the scroll container stays under it (the
|
||||
// corner is fixed to the wrapper, not the scrolling table).
|
||||
className="absolute top-1 right-1 z-10"
|
||||
label="Copy table"
|
||||
label={t("Copy table")}
|
||||
getText={() => (ref.current ? tableDataToMarkdown(extractTableDataFromElement(ref.current)) : "")}
|
||||
/>
|
||||
<div className="overflow-x-auto">
|
||||
@@ -414,6 +419,7 @@ export function MarkdownTable(props: ComponentProps<"table"> & ExtraProps) {
|
||||
* in the MathML <annotation>; read from the DOM on click, no re-parse).
|
||||
* Every other span passes through untouched. */
|
||||
export function MathDisplay(props: ComponentProps<"span"> & ExtraProps) {
|
||||
const { t } = useI18n();
|
||||
const { children, className, node, ...rest } = props;
|
||||
const ref = useRef<HTMLSpanElement>(null);
|
||||
if (!className?.includes("katex-display")) {
|
||||
@@ -434,7 +440,7 @@ export function MathDisplay(props: ComponentProps<"span"> & ExtraProps) {
|
||||
<span className="group/md relative block z-0" data-testid="md-math">
|
||||
<CopyCorner
|
||||
className="absolute top-0 right-0 z-10"
|
||||
label="Copy equation source"
|
||||
label={t("Copy equation source")}
|
||||
getText={() => ref.current?.querySelector("annotation")?.textContent ?? ""}
|
||||
/>
|
||||
<span ref={ref} className={className} {...rest}>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -15,7 +16,9 @@ export const MermaidError = ({
|
||||
error,
|
||||
retry,
|
||||
className,
|
||||
}: MermaidErrorComponentProps & { className?: string }) => (
|
||||
}: MermaidErrorComponentProps & { className?: string }) => {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"my-4 rounded-xl border border-destructive/40 bg-destructive/5 p-4",
|
||||
@@ -24,21 +27,22 @@ export const MermaidError = ({
|
||||
data-streamdown="mermaid-error"
|
||||
>
|
||||
<p className="text-sm font-medium text-destructive">
|
||||
Diagram failed to render
|
||||
{t("Diagram failed to render")}
|
||||
</p>
|
||||
<p className="mt-1 font-mono text-xs break-words text-muted-foreground">
|
||||
{error}
|
||||
</p>
|
||||
<details className="mt-3">
|
||||
<summary className="cursor-pointer text-xs text-muted-foreground">
|
||||
Show diagram source
|
||||
{t("Show diagram source")}
|
||||
</summary>
|
||||
<pre className="mt-2 overflow-x-auto rounded-lg bg-muted p-3 font-mono text-xs text-foreground">
|
||||
{chart}
|
||||
</pre>
|
||||
</details>
|
||||
<Button className="mt-3" onClick={retry} size="sm" variant="outline">
|
||||
Retry
|
||||
{t("Retry")}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+15
-12
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
/**
|
||||
* THE MINIMAL HOME (owner, 2026-10-06 — the no-graph home, take two):
|
||||
@@ -24,6 +26,7 @@ import { ChainTableOverlay } from "@/components/chain-table.tsx";
|
||||
import { GraphCostControl } from "@/components/graph-view.tsx";
|
||||
import { NotesImportErrors, useNotesImport } from "@/components/notes-import.tsx";
|
||||
import { Hint } from "@/components/ui/hint";
|
||||
import { countLabel } from "@/src/core";
|
||||
import type { ChatSummary, GraphCostSummary, GraphSnapshot } from "@/src/core";
|
||||
|
||||
/** The quiet centered summary — a pure body (props in, markup out) so
|
||||
@@ -42,6 +45,7 @@ export function KnowledgeSummary({
|
||||
practiceSessions: number;
|
||||
importedNotes: number;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
const empty =
|
||||
propositions === 0 && chains === 0 && teachSessions === 0 && practiceSessions === 0 && importedNotes === 0;
|
||||
return (
|
||||
@@ -52,29 +56,28 @@ export function KnowledgeSummary({
|
||||
list) rides after the same parting. */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-ui text-sm text-muted-foreground">
|
||||
{propositions} {propositions === 1 ? "proposition" : "propositions"}
|
||||
{countLabel(language, propositions, "proposition", "propositions")}
|
||||
</p>
|
||||
<p className="font-ui text-sm text-muted-foreground">
|
||||
{chains} {chains === 1 ? "chain" : "chains"}
|
||||
{countLabel(language, chains, "chain", "chains")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-4" aria-hidden="true" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-ui text-sm text-muted-foreground">
|
||||
{teachSessions} {teachSessions === 1 ? "teaching session" : "teaching sessions"}
|
||||
{countLabel(language, teachSessions, "teaching session", "teaching sessions")}
|
||||
</p>
|
||||
<p className="font-ui text-sm text-muted-foreground">
|
||||
{practiceSessions} {practiceSessions === 1 ? "practice session" : "practice sessions"}
|
||||
{countLabel(language, practiceSessions, "practice session", "practice sessions")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-4" aria-hidden="true" />
|
||||
<p className="font-ui text-sm text-muted-foreground">
|
||||
{importedNotes} {importedNotes === 1 ? "imported note" : "imported notes"}
|
||||
{countLabel(language, importedNotes, "imported note", "imported notes")}
|
||||
</p>
|
||||
{empty && (
|
||||
<p className="pt-2 font-ui text-xs text-muted-foreground/70">
|
||||
Nothing here yet — import notes to begin building the graph.
|
||||
</p>
|
||||
{t("Nothing here yet — import notes to begin building the graph.")}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -93,6 +96,7 @@ export function MinimalHome({
|
||||
onPracticeSelectionChange?: (nodes: { id: string; name: string; statement: string }[]) => void;
|
||||
onChainSelectClose?: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [snapshot, setSnapshot] = useState<GraphSnapshot | null>(null);
|
||||
const [costs, setCosts] = useState<GraphCostSummary | null>(null);
|
||||
const [chats, setChats] = useState<ChatSummary[]>([]);
|
||||
@@ -167,7 +171,7 @@ export function MinimalHome({
|
||||
<div className="lh-no-drag lh-wco-floating absolute right-2 top-2 z-10 flex max-w-[calc(100%-5.5rem)] flex-col items-end gap-2">
|
||||
<div className="flex min-w-0 items-start gap-2">
|
||||
<div className="graph-chrome-fade-in shrink-0 rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
|
||||
<Hint label="Every reasoning chain" side="bottom">
|
||||
<Hint label={t("Every reasoning chain")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setChainsOpen(true)}
|
||||
@@ -175,12 +179,11 @@ export function MinimalHome({
|
||||
className="flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent"
|
||||
>
|
||||
<ListTreeIcon className="size-3" />
|
||||
Chains
|
||||
</button>
|
||||
{t("Chains")}</button>
|
||||
</Hint>
|
||||
</div>
|
||||
<div className="shrink-0 rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
|
||||
<Hint label="Import notes into the graph" side="bottom">
|
||||
<Hint label={t("Import notes into the graph")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
disabled={importing}
|
||||
@@ -189,7 +192,7 @@ export function MinimalHome({
|
||||
className="flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
<UploadIcon className="size-3" />
|
||||
{importing ? "Importing…" : "Import notes…"}
|
||||
{importing ? t("Importing…") : t("Import notes…")}
|
||||
</button>
|
||||
</Hint>
|
||||
</div>
|
||||
|
||||
+17
-11
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { ChatSettings, ModelCatalogEntry, ModelCatalogResponse, ModelsSettings, UserSettings } from "@/src/core";
|
||||
@@ -81,7 +83,8 @@ export function catalogLimits(catalog: Pick<ModelCatalogResponse, "models">): Ma
|
||||
* changing the new-session default. Unpicked reads "—" (the
|
||||
* no-factory-fallback language: the UI never presents a default model).
|
||||
*/
|
||||
export function ModelControl({ chatId }: { chatId?: string }) {
|
||||
export function ModelControl({ chatId, onModelChange }: { chatId?: string; onModelChange?: (model: string | undefined) => void }) {
|
||||
const { t } = useI18n();
|
||||
const { catalog, refresh } = useModelCatalog();
|
||||
const [models, setModels] = useState<ModelsSettings | undefined>();
|
||||
const [session, setSession] = useState<ChatSettings | undefined>();
|
||||
@@ -136,6 +139,9 @@ export function ModelControl({ chatId }: { chatId?: string }) {
|
||||
: strong;
|
||||
const effectiveId = override?.model?.id;
|
||||
const effectiveProvider = override?.model?.provider;
|
||||
useEffect(() => {
|
||||
onModelChange?.(effectiveProvider && effectiveId ? `${effectiveProvider}:${effectiveId}` : undefined);
|
||||
}, [effectiveProvider, effectiveId, onModelChange]);
|
||||
const storedLevel = override?.thinkingLevel;
|
||||
const entry = catalog?.models.find(
|
||||
(m) => m.id === effectiveId && m.provider === effectiveProvider,
|
||||
@@ -315,7 +321,7 @@ export function ModelControl({ chatId }: { chatId?: string }) {
|
||||
// Trimmed (owner, subtlety round 2026-09-25): "Model selector"
|
||||
// — the long sentence was way too much. ⌘K opens this same
|
||||
// menu (registry, override-aware).
|
||||
label="Model selector"
|
||||
label={t("Model selector")}
|
||||
action="open-model-picker"
|
||||
side="bottom"
|
||||
>
|
||||
@@ -338,7 +344,7 @@ export function ModelControl({ chatId }: { chatId?: string }) {
|
||||
// "Thinking" + its real shortcut via the registry (owner interlude
|
||||
// 2026-09-25): ⇧⇥ cycles the level, so "Thinking (⇧⇥)" —
|
||||
// rebind-live like every Hint suffix.
|
||||
label="Thinking"
|
||||
label={t("Thinking")}
|
||||
action="cycle-thinking"
|
||||
side="bottom"
|
||||
>
|
||||
@@ -361,7 +367,7 @@ export function ModelControl({ chatId }: { chatId?: string }) {
|
||||
{/* Just the level — the button reads like the model button reads
|
||||
the model name (owner, stats-control round 1). */}
|
||||
<span className="text-card-foreground">
|
||||
{effectiveLevel === undefined ? "—" : (THINKING_LABEL[effectiveLevel] ?? effectiveLevel)}
|
||||
{effectiveLevel === undefined ? "—" : t(THINKING_LABEL[effectiveLevel] ?? effectiveLevel)}
|
||||
</span>
|
||||
<span aria-hidden className="text-xs text-muted-foreground">▾</span>
|
||||
</button>
|
||||
@@ -377,7 +383,7 @@ export function ModelControl({ chatId }: { chatId?: string }) {
|
||||
preferredSide="up"
|
||||
menuClass="flex w-[22rem] flex-col rounded-xl border bg-card p-2 text-xs shadow-xl"
|
||||
>
|
||||
{error && <div className="mb-1.5 text-destructive">{error}</div>}
|
||||
{error && <div className="mb-1.5 text-destructive">{t(error)}</div>}
|
||||
<ModelMenuList
|
||||
models={catalog?.models}
|
||||
effectiveId={effectiveId}
|
||||
@@ -385,10 +391,10 @@ export function ModelControl({ chatId }: { chatId?: string }) {
|
||||
onPick={pickModel}
|
||||
footer={
|
||||
catalog && catalog.models.length === 0
|
||||
? "No models — add a provider key in Keys"
|
||||
? t("No models — add a provider key in Keys")
|
||||
: chatId
|
||||
? "This session's model"
|
||||
: "Strong tier — the default for new sessions"
|
||||
? t("This session's model")
|
||||
: t("Strong tier — the default for new sessions")
|
||||
}
|
||||
/>
|
||||
</MenuShell>
|
||||
@@ -405,10 +411,10 @@ export function ModelControl({ chatId }: { chatId?: string }) {
|
||||
levels={catalog ? levels : []}
|
||||
effectiveLevel={effectiveLevel}
|
||||
onPick={(level) => apply(effectiveProvider ?? "", effectiveId ?? "", level as ThinkingLevel)}
|
||||
empty={catalog ? (effectiveId ? `${prettyModel(effectiveId)} has no thinking levels.` : "Pick a model first.") : "Loading…"}
|
||||
footer="Levels this model actually supports"
|
||||
empty={catalog ? (effectiveId ? t("{v0} has no thinking levels.", { v0: prettyModel(effectiveId) }) : t("Pick a model first.")) : t("Loading…")}
|
||||
footer={t("Levels this model actually supports")}
|
||||
/>
|
||||
{error && <div className="mt-1 text-destructive">{error}</div>}
|
||||
{error && <div className="mt-1 text-destructive">{t(error)}</div>}
|
||||
</MenuShell>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -110,6 +112,7 @@ export function DraftShell({
|
||||
* Passed as a node so the pick state stays in NewSession. */
|
||||
overlay?: ReactNode;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
// Voice dictation (STT wave, 2026-09-17): finals append at the end of the
|
||||
// draft text (via the parent's onChange — the truth lives there); the
|
||||
// strip lives in the stats bar's middle slot.
|
||||
@@ -172,11 +175,11 @@ export function DraftShell({
|
||||
<Conversation className="h-full min-w-0 flex-1" initial="instant">
|
||||
<ConversationContent className="min-h-full gap-0 p-0">
|
||||
<ConversationEmptyState
|
||||
title={mode === "practice" ? "New practice session" : "New session"}
|
||||
title={mode === "practice" ? t("New practice session") : t("New session")}
|
||||
description={
|
||||
mode === "practice"
|
||||
? "Pick nodes from your knowledge graph, describe what you want to practice, or bring your own problem."
|
||||
: "The teacher will open by probing what you already know."
|
||||
? t("Pick nodes from your knowledge graph, describe what you want to practice, or bring your own problem.")
|
||||
: t("The teacher will open by probing what you already know.")
|
||||
}
|
||||
/>
|
||||
</ConversationContent>
|
||||
@@ -205,7 +208,7 @@ export function DraftShell({
|
||||
// input (owner refinement round, 2026-09-24) — no lesson has
|
||||
// started yet, so the composer must not read like one is in
|
||||
// flight.
|
||||
placeholder={mode === "practice" ? "What do you want to practice?" : "What do you want to learn?"}
|
||||
placeholder={mode === "practice" ? t("What do you want to practice?") : t("What do you want to learn?")}
|
||||
/>
|
||||
</div>
|
||||
<StatsBar
|
||||
@@ -231,6 +234,7 @@ export function DraftShell({
|
||||
}
|
||||
|
||||
export function NewSession({ initialConfigured, mode = "teach" }: { initialConfigured: boolean; mode?: "teach" | "practice" }) {
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const [text, setText] = useState("");
|
||||
/* The draft MIRROR ("nothing gets lost" round, 2026-10-01): the shell's
|
||||
@@ -357,8 +361,7 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
|
||||
onClick={() => setSetupOpen(true)}
|
||||
className="rounded-sm border border-border bg-card px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 hover:bg-accent cursor-pointer"
|
||||
>
|
||||
Set up your models
|
||||
</button>
|
||||
{t("Set up your models")}</button>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
@@ -53,24 +54,26 @@ export async function postNotesImport(files: readonly File[]): Promise<NotesImpo
|
||||
|
||||
/** Only error text survives a request; selected Files stay request-local. */
|
||||
export function useNotesImport(callbacks: { onStart?: () => void; onFinish?: () => void } = {}) {
|
||||
const [errors, setErrors] = useState<string[]>([]);
|
||||
const { t } = useI18n();
|
||||
const [failures, setFailures] = useState<Array<{ file: string; message: string; detail?: string }>>([]);
|
||||
const errors = failures.map((failure) => `${failure.file}: ${t(failure.message)}${failure.detail ?? ""}`);
|
||||
const [importing, setImporting] = useState(false);
|
||||
const pending = useRef(false);
|
||||
const submit = async (files: File[]) => {
|
||||
if (pending.current || files.length === 0) return;
|
||||
pending.current = true;
|
||||
setImporting(true);
|
||||
setErrors([]);
|
||||
setFailures([]);
|
||||
try {
|
||||
callbacks.onStart?.();
|
||||
const results = await postNotesImport(files);
|
||||
setErrors(results
|
||||
setFailures(results
|
||||
.filter((result) => !result.ok)
|
||||
.sort((a, b) => a.requestIndex - b.requestIndex)
|
||||
.map((r) => `${r.filePath}: ${r.error}${r.code ? `\n${r.code}${r.provider ? ` — ${r.provider}` : ""}${r.missing?.length ? ` — ${r.missing.join(", ")}` : ""}${r.slots?.length ? ` — ${r.slots.join(", ")}` : ""}` : ""}`));
|
||||
.map((r) => ({ file: r.filePath, message: r.error ?? "", detail: r.code ? `\n${r.code}${r.provider ? ` — ${r.provider}` : ""}${r.missing?.length ? ` — ${r.missing.join(", ")}` : ""}${r.slots?.length ? ` — ${r.slots.join(", ")}` : ""}` : "" })));
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
setErrors(files.map((file) => `${file.name}: ${message}`));
|
||||
setFailures(files.map((file) => ({ file: file.name, message })));
|
||||
} finally {
|
||||
pending.current = false;
|
||||
setImporting(false);
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useI18n } from "@/components/i18n";
|
||||
import type { Phase3 } from "@/src/core";
|
||||
|
||||
/**
|
||||
@@ -39,6 +42,7 @@ const CHIP_LABEL: Record<Phase3, string> = {
|
||||
* at all, so it is part of the drag surface instead of a carved-out
|
||||
* target. */
|
||||
export function PhaseChip({ phase }: { phase: Phase3 }) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<span
|
||||
data-testid="phase-chip"
|
||||
@@ -46,7 +50,7 @@ export function PhaseChip({ phase }: { phase: Phase3 }) {
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none flex shrink-0 select-none items-center text-xs font-medium uppercase tracking-wide text-muted-foreground"
|
||||
>
|
||||
{CHIP_LABEL[phase]}
|
||||
{t(CHIP_LABEL[phase])}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -60,11 +64,12 @@ export function PhaseChip({ phase }: { phase: Phase3 }) {
|
||||
* after the start).
|
||||
*/
|
||||
export function PhaseDivider({ phase, nodeCount }: { phase: Phase3; nodeCount?: number }) {
|
||||
const { t } = useI18n();
|
||||
if (phase === "probe") return null;
|
||||
const label =
|
||||
phase === "plan" && nodeCount
|
||||
? `Plan · ${nodeCount} node${nodeCount === 1 ? "" : "s"}`
|
||||
: CHIP_LABEL[phase];
|
||||
? t("Plan · {v0} node{v1}", { v0: nodeCount, v1: nodeCount === 1 ? "" : "s" })
|
||||
: t(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 />
|
||||
|
||||
+21
-17
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
||||
import { MaximizeIcon, MinusIcon, PlusIcon, XIcon } from "lucide-react";
|
||||
@@ -509,6 +511,7 @@ export function PlanDiagram({
|
||||
* flank's width and the band's height rather than run width-first. */
|
||||
fill?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const layout = useMemo(() => blockLayout(nodes, edges), [nodes, edges]);
|
||||
// Pad only the full-extent render — the plan window's override viewBox is
|
||||
// a deliberate viewport crop, and the popup keeps its own fit margins.
|
||||
@@ -540,7 +543,7 @@ export function PlanDiagram({
|
||||
: {}),
|
||||
}}
|
||||
role="img"
|
||||
aria-label="Plan diagram"
|
||||
aria-label={t("Plan diagram")}
|
||||
>
|
||||
<defs>
|
||||
<marker
|
||||
@@ -676,15 +679,16 @@ export function PlanDiagram({
|
||||
* future DAG window).
|
||||
*/
|
||||
export function PlanBlock({ data, onOpen }: { data: PlanBlockData; onOpen: () => void }) {
|
||||
const { t } = useI18n();
|
||||
const markerId = useId().replace(/[^a-zA-Z0-9-]/g, "");
|
||||
const statusMap = useMemo(() => new Map(data.nodes.map((n) => [n.id, n.status] as const)), [data]);
|
||||
const statusOf = (id: string): PlanNodeStatus => statusMap.get(id) ?? "upcoming";
|
||||
return (
|
||||
<Hint label="Open the full plan" side="bottom">
|
||||
<Hint label={t("Open the full plan")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="plan-block-full"
|
||||
aria-label="Open the full plan"
|
||||
aria-label={t("Open the full plan")}
|
||||
onClick={onOpen}
|
||||
className="block w-full text-left"
|
||||
>
|
||||
@@ -749,6 +753,7 @@ const POPUP_PAD = GLOW_REACH;
|
||||
* through while the focus owns the session area.
|
||||
*/
|
||||
export function PlanPopup({ messages, onClose }: { messages: readonly PopupMessage[]; onClose: () => void }) {
|
||||
const { t } = useI18n();
|
||||
const tree = useMemo(() => latestTree(messages), [messages]);
|
||||
const statuses = useMemo(
|
||||
() => (tree ? derivePlanStatuses(tree, messages as Parameters<typeof derivePlanStatuses>[1]) : null),
|
||||
@@ -887,19 +892,19 @@ export function PlanPopup({ messages, onClose }: { messages: readonly PopupMessa
|
||||
className="absolute inset-0 z-40 flex flex-col bg-background/80 p-4 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="The full plan"
|
||||
aria-label={t("The full plan")}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}}
|
||||
>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="text-sm font-medium">The plan</span>
|
||||
<span className="text-xs text-muted-foreground">live — statuses derive from your check outcomes</span>
|
||||
<Hint label="Close" binding="escape" side="left">
|
||||
<span className="text-sm font-medium">{t("The plan")}</span>
|
||||
<span className="text-xs text-muted-foreground">{t("live — statuses derive from your check outcomes")}</span>
|
||||
<Hint label={t("Close")} binding="escape" side="left">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
aria-label={t("Close")}
|
||||
data-testid="plan-popup-close"
|
||||
className="ml-auto rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
@@ -947,22 +952,22 @@ export function PlanPopup({ messages, onClose }: { messages: readonly PopupMessa
|
||||
/>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-2">
|
||||
<span className="text-xs text-muted-foreground/60">Drag to pan · scroll to zoom</span>
|
||||
<span className="text-xs text-muted-foreground/60">{t("Drag to pan · scroll to zoom")}</span>
|
||||
<div className="flex gap-1">
|
||||
<Hint label="Zoom out" side="bottom">
|
||||
<Hint label={t("Zoom out")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Zoom out"
|
||||
aria-label={t("Zoom out")}
|
||||
onClick={() => stepZoom(1 / 1.25)}
|
||||
className="pointer-events-auto flex size-7 items-center justify-center rounded-md border border-border/70 bg-card/80 text-muted-foreground backdrop-blur transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<MinusIcon className="size-3.5" />
|
||||
</button>
|
||||
</Hint>
|
||||
<Hint label="Fit plan to screen" side="bottom">
|
||||
<Hint label={t("Fit plan to screen")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Fit plan to screen"
|
||||
aria-label={t("Fit plan to screen")}
|
||||
onClick={fitView}
|
||||
data-testid="plan-popup-fit"
|
||||
className="pointer-events-auto flex size-7 items-center justify-center rounded-md border border-border/70 bg-card/80 text-muted-foreground backdrop-blur transition-colors hover:bg-accent hover:text-foreground"
|
||||
@@ -970,10 +975,10 @@ export function PlanPopup({ messages, onClose }: { messages: readonly PopupMessa
|
||||
<MaximizeIcon className="size-3.5" />
|
||||
</button>
|
||||
</Hint>
|
||||
<Hint label="Zoom in" side="bottom">
|
||||
<Hint label={t("Zoom in")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Zoom in"
|
||||
aria-label={t("Zoom in")}
|
||||
onClick={() => stepZoom(1.25)}
|
||||
className="pointer-events-auto flex size-7 items-center justify-center rounded-md border border-border/70 bg-card/80 text-muted-foreground backdrop-blur transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
@@ -985,8 +990,7 @@ export function PlanPopup({ messages, onClose }: { messages: readonly PopupMessa
|
||||
</>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||||
No plan in this session yet.
|
||||
</div>
|
||||
{t("No plan in this session yet.")}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { MessageResponse } from "@/components/ai-elements/message";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -56,6 +58,7 @@ export interface PracticeThinkingData {
|
||||
}
|
||||
|
||||
export function ProblemCard({ part }: ArtifactPartProps) {
|
||||
const { t } = useI18n();
|
||||
// Always open, no chevron (owner round, 2026-10-05): the record IS the
|
||||
// statement — same container + eyebrow discipline as the answered card
|
||||
// and the dock (which mirrors this in Slice D). The commitment never
|
||||
@@ -64,7 +67,7 @@ export function ProblemCard({ part }: ArtifactPartProps) {
|
||||
const statement = typeof input.statement === "string" ? input.statement : "";
|
||||
return (
|
||||
<div data-testid="problem-card" className="lh-card-enter my-1 rounded-xl border bg-card p-4">
|
||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Problem</div>
|
||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Problem")}</div>
|
||||
<div className="lh-prose text-[15px]">
|
||||
<MessageResponse>{repairMathForDisplay(statement)}</MessageResponse>
|
||||
</div>
|
||||
@@ -94,6 +97,7 @@ const OUTCOME_CHIP: Record<string, string> = {
|
||||
};
|
||||
|
||||
export function ConcludeCard({ part }: ArtifactPartProps) {
|
||||
const { t } = useI18n();
|
||||
// The conclusion redesigned (owner round, 2026-10-05): the SOLUTION is
|
||||
// the hero — the modelSolution committed at pose time (part.reveal, the
|
||||
// view-seam join), shown verbatim, never re-authored. The verdict sits
|
||||
@@ -111,8 +115,7 @@ export function ConcludeCard({ part }: ArtifactPartProps) {
|
||||
if (outcome === "dismissed") {
|
||||
return (
|
||||
<div data-testid="conclude-card" className="my-1 px-1 text-sm text-muted-foreground/70">
|
||||
Problem dismissed.
|
||||
</div>
|
||||
{t("Problem dismissed.")}</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -122,10 +125,9 @@ export function ConcludeCard({ part }: ArtifactPartProps) {
|
||||
eyebrow + the outcome in the quiz cards' EXACT chip register —
|
||||
no more two same-weight headings stacked. */}
|
||||
<div className="mb-1 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Concluded
|
||||
{(OUTCOME_LABEL[outcome] ?? "") !== "" && outcome !== "dismissed" && (
|
||||
{t("Concluded")}{(OUTCOME_LABEL[outcome] ?? "") !== "" && outcome !== "dismissed" && (
|
||||
<span className={cn("rounded px-1.5 py-0.5", OUTCOME_CHIP[outcome] ?? OUTCOME_CHIP.movedOn)}>
|
||||
{OUTCOME_LABEL[outcome]}
|
||||
{t(OUTCOME_LABEL[outcome] ?? outcome)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -142,7 +144,7 @@ export function ConcludeCard({ part }: ArtifactPartProps) {
|
||||
<>
|
||||
<div className="my-3 border-t" />
|
||||
<div>
|
||||
<div className="mb-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">Model solution</div>
|
||||
<div className="mb-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Model solution")}</div>
|
||||
<div className="lh-prose text-[15px]">
|
||||
<MessageResponse>{repairMathForDisplay(reveal)}</MessageResponse>
|
||||
</div>
|
||||
@@ -177,6 +179,7 @@ function MetadataPopover({
|
||||
concludeInput: { outcome?: string; rung?: unknown; missClass?: unknown; retest?: unknown };
|
||||
problemInput: { mode?: unknown; target?: unknown };
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [open, setOpen] = useState(false);
|
||||
const triggerRef = useRef<HTMLButtonElement | null>(null);
|
||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -239,8 +242,7 @@ function MetadataPopover({
|
||||
aria-expanded={open}
|
||||
className="flex items-center gap-1 text-xs font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Metadata
|
||||
</button>
|
||||
{t("Metadata")}</button>
|
||||
{open &&
|
||||
anchor &&
|
||||
createPortal(
|
||||
@@ -256,12 +258,12 @@ function MetadataPopover({
|
||||
className="z-50 w-80 max-w-[calc(100vw-1rem)] rounded-xl border bg-card p-4 text-left shadow-lg"
|
||||
>
|
||||
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
|
||||
<dt className="text-muted-foreground">Mode</dt>
|
||||
<dd className="font-mono">{mode || "—"}</dd>
|
||||
<dt className="text-muted-foreground">Targets</dt>
|
||||
<dt className="text-muted-foreground">{t("Mode")}</dt>
|
||||
<dd className="font-mono">{t(mode || "—")}</dd>
|
||||
<dt className="text-muted-foreground">{t("Targets")}</dt>
|
||||
<dd className="font-mono">
|
||||
{targets.length === 0 ? (
|
||||
"untagged"
|
||||
t("untagged")
|
||||
) : (
|
||||
<span>
|
||||
{targets.map((t, i) => (
|
||||
@@ -273,14 +275,14 @@ function MetadataPopover({
|
||||
</span>
|
||||
)}
|
||||
</dd>
|
||||
<dt className="text-muted-foreground">Outcome</dt>
|
||||
<dd className="font-mono">{outcome || "—"}</dd>
|
||||
<dt className="text-muted-foreground">Hint rung</dt>
|
||||
<dd className="font-mono">{rung || "none"}</dd>
|
||||
<dt className="text-muted-foreground">Miss class</dt>
|
||||
<dd className="font-mono">{miss || "none"}</dd>
|
||||
<dt className="text-muted-foreground">Retest</dt>
|
||||
<dd className="font-mono">{retest === undefined ? "—" : retest ? "yes" : "no"}</dd>
|
||||
<dt className="text-muted-foreground">{t("Outcome")}</dt>
|
||||
<dd className="font-mono">{t(outcome || "—")}</dd>
|
||||
<dt className="text-muted-foreground">{t("Hint rung")}</dt>
|
||||
<dd className="font-mono">{t(rung || "none")}</dd>
|
||||
<dt className="text-muted-foreground">{t("Miss class")}</dt>
|
||||
<dd className="font-mono">{t(miss || "none")}</dd>
|
||||
<dt className="text-muted-foreground">{t("Retest")}</dt>
|
||||
<dd className="font-mono">{retest === undefined ? "—" : retest ? t("yes") : t("no")}</dd>
|
||||
</dl>
|
||||
</div>,
|
||||
document.body,
|
||||
@@ -290,9 +292,10 @@ function MetadataPopover({
|
||||
}
|
||||
|
||||
export function ThinkingCard({ data }: { data: PracticeThinkingData }) {
|
||||
const { t } = useI18n();
|
||||
// The unified row (owner rounds, 2026-10-05): one style, one label —
|
||||
// 50%-italic quote block on expand. Legacy records' commit flag is
|
||||
// deliberately unread (one lane now). A TRANSCRIPT row (owner round,
|
||||
// 2026-10-07): full-width band + rail, arriving expanded.
|
||||
return <ThinkingBlock testId="thinking-card" label="YOUR THINKING" text={data.text} defaultOpen />;
|
||||
return <ThinkingBlock testId="thinking-card" label={t("YOUR THINKING")} text={data.text} defaultOpen />;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { ChevronRightIcon } from "lucide-react";
|
||||
@@ -50,6 +52,7 @@ export interface PracticeDockProps {
|
||||
}
|
||||
|
||||
export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmit, onEscape, compactionRunning = false }: PracticeDockProps) {
|
||||
const { t } = useI18n();
|
||||
const [thinking, setThinking] = useState("");
|
||||
// Ref MIRRORS the field ("nothing gets lost", the question-dock
|
||||
// discipline): a submit resuming after `await finishDictation()` reads
|
||||
@@ -93,7 +96,7 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
|
||||
className="flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<ChevronRightIcon className="size-4 shrink-0 rotate-90" />
|
||||
<span className="font-medium">Problem</span>
|
||||
<span className="font-medium">{t("Problem")}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{input.statement}</span>
|
||||
</button>
|
||||
);
|
||||
@@ -107,7 +110,7 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
|
||||
markdown + LaTeX rendered, capped by the measured column
|
||||
(--dock-max-h; the old fixed 40vh cut long problems short). */}
|
||||
<div className="max-h-[var(--dock-max-h,40vh)] overflow-y-auto px-4 pt-3 pb-2">
|
||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Problem</div>
|
||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Problem")}</div>
|
||||
<div className="lh-prose text-[15px]">
|
||||
<MessageResponse>{typeof input.statement === "string" ? repairMathForDisplay(input.statement) : input.statement}</MessageResponse>
|
||||
</div>
|
||||
@@ -120,8 +123,7 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
|
||||
className="m-1.5 rounded-[10px] border border-border/70 bg-background/60 transition-colors focus-within:border-primary/50"
|
||||
>
|
||||
<div className="px-2.5 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
YOUR THINKING
|
||||
</div>
|
||||
{t("YOUR THINKING")}</div>
|
||||
<textarea
|
||||
value={thinking}
|
||||
onChange={(e) => {
|
||||
@@ -144,7 +146,7 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
placeholder="Work here, think out loud."
|
||||
placeholder={t("Work here, think out loud.")}
|
||||
rows={4}
|
||||
className={cn(
|
||||
"field-sizing-content lh-input max-h-64 min-h-16 w-full resize-none bg-transparent px-2.5 pb-2 outline-none placeholder:text-muted-foreground",
|
||||
@@ -156,7 +158,7 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
|
||||
field 10 − p-1 (4) = button 6. */}
|
||||
<div className="flex items-center justify-between gap-2 p-1">
|
||||
<span aria-hidden className="pl-1.5 text-xs text-muted-foreground">
|
||||
{compactionRunning ? "compacting session…" : "↵ submits · ⇧↵ newline"}
|
||||
{compactionRunning ? t("compacting session…") : t("↵ submits · ⇧↵ newline")}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
@@ -165,8 +167,7 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
|
||||
onClick={() => submit()}
|
||||
className="ml-auto h-9 rounded-[6px] px-3.5 text-sm font-medium"
|
||||
>
|
||||
Submit thinking
|
||||
</Button>
|
||||
{t("Submit thinking")}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { ArrowDownIcon, ChevronRightIcon, PlayIcon } from "lucide-react";
|
||||
@@ -105,6 +107,7 @@ export function QuestionDock({
|
||||
dictationClaim = true,
|
||||
compactionRunning = false,
|
||||
}: QuestionDockProps) {
|
||||
const { t } = useI18n();
|
||||
// The probe-phase names (owner, 2026-10-09) canonicalize onto their
|
||||
// teach twins for every dock concern — parse dispatch, labels, kinds:
|
||||
// the probe quiz ("probe") is quiz-shaped, the probe free-recall
|
||||
@@ -114,7 +117,7 @@ export function QuestionDock({
|
||||
// The chip's display name carries the tool's OWN name (owner
|
||||
// 2026-10-09): probe-phase questions label Probe/Recall in the
|
||||
// composer; teach tools keep the standing labels.
|
||||
const toolLabel = toolName === "probe" ? "Probe" : toolName === "recall" ? "Recall" : undefined;
|
||||
const toolLabel = toolName === "probe" ? t("Probe") : toolName === "recall" ? t("Recall") : undefined;
|
||||
// Parse, don't cast (src/core/tool-parts.ts): the model authored this
|
||||
// input, and only the schema the tool declared vouches for its shape.
|
||||
// The dock mounts on input-available parts (already validated at the
|
||||
@@ -126,8 +129,7 @@ export function QuestionDock({
|
||||
if (!parsed) {
|
||||
return (
|
||||
<div data-testid="malformed-question" className="rounded-xl border border-dashed bg-card/60 p-3 text-sm text-muted-foreground">
|
||||
This question arrived malformed — the transcript keeps the retry.
|
||||
</div>
|
||||
{t("This question arrived malformed — the transcript keeps the retry.")}</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
@@ -142,7 +144,7 @@ export function QuestionDock({
|
||||
label={
|
||||
(canonical === "quiz" || canonical === "explain") &&
|
||||
normalizeQuizType((parsed as { type?: unknown }).type) === "predict"
|
||||
? "Prediction"
|
||||
? t("Prediction")
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
@@ -201,6 +203,7 @@ export function QuestionDockBar({
|
||||
* label Probe/Recall — the phase boundary visible in the composer. */
|
||||
toolLabel?: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
if (variant === "reveal") {
|
||||
return (
|
||||
<button
|
||||
@@ -213,11 +216,11 @@ export function QuestionDockBar({
|
||||
<PlayIcon className="size-3.5" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block text-sm font-medium">Check your understanding</span>
|
||||
<span className="block text-sm font-medium">{t("Check your understanding")}</span>
|
||||
<span className="block truncate text-xs text-muted-foreground">{teaserText(question)}</span>
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-1 text-xs font-medium text-primary">
|
||||
Open <ChevronRightIcon className="size-3.5" />
|
||||
{t("Open")}{" "}<ChevronRightIcon className="size-3.5" />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
@@ -232,11 +235,11 @@ export function QuestionDockBar({
|
||||
<span className="shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{label ??
|
||||
toolLabel ??
|
||||
(toolName === "quiz" ? "Check" : toolName === "explain" ? "Explain" : "Question")}
|
||||
(toolName === "quiz" ? t("Check") : toolName === "explain" ? t("Explain") : t("Question"))}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 truncate text-muted-foreground">{teaserText(question)}</span>
|
||||
<span className="flex shrink-0 items-center gap-1 text-xs font-medium">
|
||||
Answer <ArrowDownIcon className="size-3.5" />
|
||||
{t("Answer")}{" "}<ArrowDownIcon className="size-3.5" />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
@@ -254,6 +257,7 @@ function QuestionDockForm({
|
||||
dictationClaim = true,
|
||||
compactionRunning = false,
|
||||
}: Omit<QuestionDockProps, "expanded" | "onExpand" | "reveal">) {
|
||||
const { t } = useI18n();
|
||||
const kind = toolQuestionKind(toolName);
|
||||
|
||||
// Canonical QuestionData, built once per question. Quiz options are
|
||||
@@ -547,17 +551,17 @@ function QuestionDockForm({
|
||||
<div data-session-find-root="" className="max-h-[var(--dock-max-h,55dvh)] overflow-y-auto px-4 pt-3">
|
||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{toolName === "probe"
|
||||
? "Probe"
|
||||
? t("Probe")
|
||||
: toolName === "recall"
|
||||
? "Recall"
|
||||
? t("Recall")
|
||||
: kind === "quiz"
|
||||
? qd.questionType === "predict"
|
||||
? "Prediction"
|
||||
: "Check"
|
||||
? t("Prediction")
|
||||
: t("Check")
|
||||
: kind === "explain"
|
||||
? "Explain"
|
||||
: "Question"}
|
||||
{qd.mode === "multi-select" && " · select all that apply"}
|
||||
? t("Explain")
|
||||
: t("Question")}
|
||||
{qd.mode === "multi-select" && t(" · select all that apply")}
|
||||
</div>
|
||||
<div className="mb-3 font-medium">
|
||||
<MessageResponse>{qd.question}</MessageResponse>
|
||||
@@ -644,7 +648,7 @@ function QuestionDockForm({
|
||||
>
|
||||
{sel.dontKnow && <span className="size-1.5 rounded-full bg-current" />}
|
||||
</span>
|
||||
<span>I don't know</span>
|
||||
<span>{t("I don't know")}</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -710,7 +714,7 @@ function QuestionDockForm({
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
placeholder="Type your own answer…"
|
||||
placeholder={t("Type your own answer…")}
|
||||
className="lh-input w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
@@ -742,8 +746,7 @@ function QuestionDockForm({
|
||||
sel.dontKnow ? "text-muted-foreground/50" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
Confidence
|
||||
</span>
|
||||
{t("Confidence")}</span>
|
||||
<div
|
||||
className={cn("relative h-4 min-w-0 flex-1", sel.dontKnow && "opacity-40")}
|
||||
data-testid="confidence-track"
|
||||
@@ -771,9 +774,9 @@ function QuestionDockForm({
|
||||
step={1}
|
||||
value={CONFIDENCE_STOPS[confIdx]}
|
||||
disabled={sel.dontKnow}
|
||||
aria-label="Confidence — the probability your selected answer is correct"
|
||||
aria-valuetext={`${CONFIDENCE_STOPS[confIdx]} percent`}
|
||||
title="The probability your selected answer is correct — 50% is a coin flip. Adjust with ←/→."
|
||||
aria-label={t("Confidence — the probability your selected answer is correct")}
|
||||
aria-valuetext={t("{v0} percent", { v0: CONFIDENCE_STOPS[confIdx] })}
|
||||
title={t("The probability your selected answer is correct — 50% is a coin flip. Adjust with ←/→.")}
|
||||
data-testid="confidence-slider"
|
||||
onChange={(e) => {
|
||||
// Snap to the nearest stop; the rendered VALUE is the stop's own
|
||||
@@ -828,7 +831,7 @@ function QuestionDockForm({
|
||||
className="rounded-[10px] border border-border/70 bg-background/60 transition-colors focus-within:border-primary/50"
|
||||
>
|
||||
<div className="px-2.5 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{qd.mode === "text" ? "Your answer" : "YOUR THINKING"}
|
||||
{qd.mode === "text" ? t("Your answer") : t("YOUR THINKING")}
|
||||
</div>
|
||||
{qd.mode === "text" ? (
|
||||
<textarea
|
||||
@@ -854,7 +857,7 @@ function QuestionDockForm({
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
placeholder="Type your answer…"
|
||||
placeholder={t("Type your answer…")}
|
||||
rows={1}
|
||||
className="field-sizing-content lh-input max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
@@ -884,7 +887,7 @@ function QuestionDockForm({
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
placeholder="Why this answer? Whatever comes to mind."
|
||||
placeholder={t("Why this answer? Whatever comes to mind.")}
|
||||
rows={1}
|
||||
className={cn(
|
||||
"field-sizing-content lh-input max-h-48 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground/70",
|
||||
@@ -896,15 +899,14 @@ function QuestionDockForm({
|
||||
)}
|
||||
<div className="flex items-center justify-between gap-2 p-1">
|
||||
<span aria-hidden className="pl-1.5 text-xs text-muted-foreground">
|
||||
{compactionRunning ? "compacting session…" : "↵ submits · ⇧↵ newline"}
|
||||
{compactionRunning ? t("compacting session…") : t("↵ submits · ⇧↵ newline")}
|
||||
</span>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!canSubmit || compactionRunning}
|
||||
className="ml-auto h-9 rounded-[6px] px-3.5 text-sm font-medium"
|
||||
>
|
||||
Submit answer
|
||||
</Button>
|
||||
{t("Submit answer")}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { joinDictation, useDictationTarget } from "@/components/dictation";
|
||||
@@ -37,6 +39,7 @@ export function ReadingThinkingField({
|
||||
/** Primary dictation claim — true while the check is behind its reveal. */
|
||||
claim: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
useDictationTarget(
|
||||
useCallback(
|
||||
(t: string) => {
|
||||
@@ -52,8 +55,7 @@ export function ReadingThinkingField({
|
||||
className="pointer-events-auto mb-2 rounded-2xl border bg-card/60 px-3 py-2 transition-colors focus-within:border-primary/50"
|
||||
>
|
||||
<div className="pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Thinking while reading
|
||||
</div>
|
||||
{t("Thinking while reading")}</div>
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
@@ -94,7 +96,7 @@ export function ReadingThinkingField({
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
placeholder="Whatever comes to mind as you read."
|
||||
placeholder={t("Whatever comes to mind as you read.")}
|
||||
rows={1}
|
||||
className="field-sizing-content lh-input max-h-40 w-full resize-none bg-transparent py-0.5 outline-none placeholder:text-muted-foreground/70"
|
||||
/>
|
||||
|
||||
+50
-19
@@ -17,6 +17,7 @@ import type { AgentEvent } from "@earendil-works/pi-agent-core";
|
||||
import type { ToolResultMessage } from "@earendil-works/pi-ai";
|
||||
import {
|
||||
needsContinuation,
|
||||
measuredContextTokens,
|
||||
newAnswerResult,
|
||||
newNextMessage,
|
||||
newProblemDismissedMarker,
|
||||
@@ -163,6 +164,8 @@ function sameDetails(a: unknown, b: unknown): boolean {
|
||||
export interface SessionState {
|
||||
messages: LhViewMessage[];
|
||||
nativeMessages: LhMessage[];
|
||||
/** Completed conversation usage; null after compaction or before first usage. */
|
||||
contextTokens: number | null;
|
||||
status: SessionStatus;
|
||||
error: { message: string } | null;
|
||||
/** Steers sent but not yet drained (composer steering, 2026-10-03):
|
||||
@@ -220,10 +223,14 @@ export class SessionModel {
|
||||
// The live turn's execution layer (view model mid-turn states):
|
||||
private executions = new Map<string, LiveExecution>();
|
||||
private streamingIds = new Set<string>();
|
||||
private incompleteUsageIds = new Set<string>();
|
||||
/** The in-flight assistant message's client id (see applyWireEvent). */
|
||||
private streamingMessageId: string | null = null;
|
||||
private statusValue: SessionStatus = "ready";
|
||||
/** Request/loop failures are transient; provider failures derive from messages. */
|
||||
private errorValue: { message: string } | null = null;
|
||||
/** A completed failure from THIS consume, not the previous attempt's record. */
|
||||
private liveFailureId: string | null = null;
|
||||
// The single live consume (POST response or reattach stream): a newer
|
||||
// consume cancels the older — one reader at a time.
|
||||
private consumeAbort: AbortController | null = null;
|
||||
@@ -254,11 +261,22 @@ export class SessionModel {
|
||||
this.statusValue === "submitted" || this.statusValue === "streaming"
|
||||
? { executions: this.executions, inFlight: true, streamingIds: this.streamingIds }
|
||||
: undefined;
|
||||
const messages = [...this.base, ...this.tail];
|
||||
const latest = messages.at(-1);
|
||||
// One rule for live and restored failures: only the final completed
|
||||
// assistant can own the banner. While trying again, hide the old
|
||||
// failure from the first Thinking frame, but show a new failure at end.
|
||||
const providerError =
|
||||
latest?.role === "assistant" && latest.stopReason === "error" &&
|
||||
!this.incompleteUsageIds.has(latest.id) && (!live || latest.id === this.liveFailureId)
|
||||
? { message: latest.errorMessage ?? "An error occurred." }
|
||||
: null;
|
||||
return {
|
||||
messages: projectView([...this.base, ...this.tail], live),
|
||||
nativeMessages: [...this.base, ...this.tail],
|
||||
messages: projectView(messages, live),
|
||||
nativeMessages: messages,
|
||||
contextTokens: measuredContextTokens(messages, this.incompleteUsageIds),
|
||||
status: this.statusValue,
|
||||
error: this.errorValue,
|
||||
error: this.errorValue ?? providerError,
|
||||
steerQueue: this.steerQueueValue,
|
||||
};
|
||||
}
|
||||
@@ -274,6 +292,7 @@ export class SessionModel {
|
||||
}
|
||||
|
||||
private setStatus(status: SessionStatus): void {
|
||||
if (status === "submitted") this.liveFailureId = null;
|
||||
this.statusValue = status;
|
||||
this.readyRef = status === "ready";
|
||||
this.onChange?.();
|
||||
@@ -364,6 +383,15 @@ export class SessionModel {
|
||||
// the wire) still wins.
|
||||
const id = message.id ?? this.streamingMessageId ?? localId();
|
||||
const withId = { ...message, id } as LhMessage;
|
||||
if (agent.type === "message_end") {
|
||||
this.incompleteUsageIds.delete(id);
|
||||
if (message.role === "assistant" && message.stopReason === "error") {
|
||||
this.liveFailureId = id;
|
||||
// A newer provider failure replaces an earlier connection/loop
|
||||
// error, just as the live message_end did before restoration.
|
||||
this.errorValue = null;
|
||||
}
|
||||
} else this.incompleteUsageIds.add(id);
|
||||
if (agent.type === "message_start") {
|
||||
this.streamingMessageId = id;
|
||||
this.streamingIds.add(id);
|
||||
@@ -378,15 +406,6 @@ export class SessionModel {
|
||||
}
|
||||
if (agent.type === "message_end") {
|
||||
this.streamingMessageId = null; // slot done — next start mints fresh
|
||||
// (fallthrough: returns true below — the message landed)
|
||||
const stop = (message as { stopReason?: string }).stopReason;
|
||||
if (stop === "error") {
|
||||
// Provider error, verbatim (owner ruling) — the record
|
||||
// persists the same message; no masking anywhere.
|
||||
this.setError(
|
||||
String((message as { errorMessage?: string }).errorMessage ?? "An error occurred."),
|
||||
);
|
||||
}
|
||||
}
|
||||
return true; // a message event is view work, even empty content
|
||||
}
|
||||
@@ -426,17 +445,18 @@ export class SessionModel {
|
||||
|
||||
/** Consume one SSE body to its [DONE] terminal. The turn-settled
|
||||
* terminal (stream-route only) fires the settle hook and ends. */
|
||||
async consumeStream(res: Response): Promise<void> {
|
||||
async consumeStream(res: Response, controller = this.consumeAbort): Promise<void> {
|
||||
if (!res.body) throw new Error("The turn stream body is empty.");
|
||||
const reader = res.body.getReader();
|
||||
let sawEvent = false;
|
||||
try {
|
||||
for await (const event of sseEvents(reader)) {
|
||||
if (this.consumeAbort !== controller) return;
|
||||
if (event.type === "turn-settled") {
|
||||
// The raced-settle terminal: no turn to attach to — the
|
||||
// record is current; the settle hook refetches.
|
||||
await reader.cancel().catch(() => {});
|
||||
this.onReattachSettled?.();
|
||||
if (this.consumeAbort === controller) this.onReattachSettled?.();
|
||||
return;
|
||||
}
|
||||
const acted = this.applyWireEvent(event);
|
||||
@@ -446,9 +466,13 @@ export class SessionModel {
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
this.streamingIds = new Set();
|
||||
this.executions = new Map();
|
||||
if (this.statusValue !== "error") this.setStatus("ready");
|
||||
// A cancelled consume may finish after its replacement has entered
|
||||
// Thinking. Only the current owner can settle shared state.
|
||||
if (this.consumeAbort === controller) {
|
||||
this.streamingIds = new Set();
|
||||
this.executions = new Map();
|
||||
if (this.statusValue !== "error") this.setStatus("ready");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -487,6 +511,7 @@ export class SessionModel {
|
||||
// every path that actually replays onto a stale tail).
|
||||
if (!refetchRecordFirst) {
|
||||
this.mutate(() => {
|
||||
this.incompleteUsageIds.clear();
|
||||
this.tail = [];
|
||||
this.streamingMessageId = null;
|
||||
});
|
||||
@@ -497,11 +522,14 @@ export class SessionModel {
|
||||
const recordRes = await this.fetch(`/api/chats/${encodeURIComponent(this.chatId)}`, {
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (this.consumeAbort !== controller) return;
|
||||
if (recordRes.ok) {
|
||||
const record = (await recordRes.json()) as { messages?: LhMessage[] };
|
||||
if (this.consumeAbort !== controller) return;
|
||||
if (Array.isArray(record.messages)) {
|
||||
this.mutate(() => {
|
||||
this.base = record.messages!;
|
||||
this.incompleteUsageIds.clear();
|
||||
this.tail = [];
|
||||
});
|
||||
}
|
||||
@@ -509,6 +537,7 @@ export class SessionModel {
|
||||
// The record did not land — restore the clean-slate guard
|
||||
// before the replay (no atomic swap is coming).
|
||||
this.mutate(() => {
|
||||
this.incompleteUsageIds.clear();
|
||||
this.tail = [];
|
||||
this.streamingMessageId = null;
|
||||
});
|
||||
@@ -517,10 +546,11 @@ export class SessionModel {
|
||||
const res = await this.fetch(`/api/chats/${encodeURIComponent(this.chatId)}/stream`, {
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (this.consumeAbort !== controller) return;
|
||||
if (!res.ok) throw new Error((await res.text()) || "Failed to attach to the running turn.");
|
||||
await this.consumeStream(res);
|
||||
await this.consumeStream(res, controller);
|
||||
} catch (err) {
|
||||
if ((err as Error).name === "AbortError") return; // a newer consume won
|
||||
if (this.consumeAbort !== controller || (err as Error).name === "AbortError") return; // a newer consume won
|
||||
this.setError((err as Error).message);
|
||||
this.setStatus("error");
|
||||
}
|
||||
@@ -714,6 +744,7 @@ export class SessionModel {
|
||||
setMessages(record: LhMessage[]): void {
|
||||
this.mutate(() => {
|
||||
this.base = record;
|
||||
this.incompleteUsageIds.clear();
|
||||
this.tail = [];
|
||||
this.streamingMessageId = null; // the tail (and its slot) is gone
|
||||
});
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
|
||||
import { ChevronDownIcon, ChevronUpIcon, SearchIcon, XIcon } from "lucide-react";
|
||||
@@ -66,6 +68,7 @@ export function SessionFind({ scopeRef, scrollContextRef }: {
|
||||
scopeRef: RefObject<HTMLDivElement | null>;
|
||||
scrollContextRef: RefObject<SessionScrollContext | null>;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const [result, setResult] = useState({ index: -1, count: 0 });
|
||||
@@ -163,7 +166,7 @@ export function SessionFind({ scopeRef, scrollContextRef }: {
|
||||
return (
|
||||
<div
|
||||
role="search"
|
||||
aria-label="Session Find"
|
||||
aria-label={t("Session Find")}
|
||||
data-testid="session-find"
|
||||
className="lh-no-drag flex h-10 shrink-0 items-center gap-2 border-b border-border px-6 font-ui text-sm"
|
||||
onKeyDown={(event) => {
|
||||
@@ -182,8 +185,8 @@ export function SessionFind({ scopeRef, scrollContextRef }: {
|
||||
<SearchIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<input
|
||||
ref={inputRef}
|
||||
aria-label="Find in session"
|
||||
placeholder="Find in session…"
|
||||
aria-label={t("Find in session")}
|
||||
placeholder={t("Find in session…")}
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
spellCheck={false}
|
||||
@@ -192,15 +195,15 @@ export function SessionFind({ scopeRef, scrollContextRef }: {
|
||||
<output aria-live="polite" data-testid="session-find-count" className="shrink-0 text-xs tabular-nums text-muted-foreground">
|
||||
{query ? `${result.index + 1}/${result.count}` : ""}
|
||||
</output>
|
||||
<button type="button" aria-label="Previous match" title="Previous match (Shift+Enter)" className={buttonClass}
|
||||
<button type="button" aria-label={t("Previous match")} title={t("Previous match (Shift+Enter)")} className={buttonClass}
|
||||
disabled={!result.count} onMouseDown={(event) => event.preventDefault()} onClick={() => step(-1)}>
|
||||
<ChevronUpIcon className="size-4" aria-hidden />
|
||||
</button>
|
||||
<button type="button" aria-label="Next match" title="Next match (Enter)" className={buttonClass}
|
||||
<button type="button" aria-label={t("Next match")} title={t("Next match (Enter)")} className={buttonClass}
|
||||
disabled={!result.count} onMouseDown={(event) => event.preventDefault()} onClick={() => step(1)}>
|
||||
<ChevronDownIcon className="size-4" aria-hidden />
|
||||
</button>
|
||||
<button type="button" aria-label="Close Find" title="Close Find (Esc)" className={buttonClass} onClick={close}>
|
||||
<button type="button" aria-label={t("Close Find")} title={t("Close Find (Esc)")} className={buttonClass} onClick={close}>
|
||||
<XIcon className="size-4" aria-hidden />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { MaximizeIcon, MinusIcon, PlusIcon, XIcon } from "lucide-react";
|
||||
@@ -83,6 +85,7 @@ export function MermaidOverlay({
|
||||
inverted?: boolean;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
// ── chart render (own instance, own ids); figure mode uses the raw svg ──
|
||||
const [svg, setSvg] = useState<string | null>(rawSvg ?? null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -218,16 +221,16 @@ export function MermaidOverlay({
|
||||
className="absolute inset-0 z-40 flex flex-col bg-background/80 p-4 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Diagram focus"
|
||||
aria-label={t("Diagram focus")}
|
||||
>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="text-sm font-medium">Diagram</span>
|
||||
<span className="text-xs text-muted-foreground">from this lesson</span>
|
||||
<Hint label="Close" binding="escape" side="left">
|
||||
<span className="text-sm font-medium">{t("Diagram")}</span>
|
||||
<span className="text-xs text-muted-foreground">{t("from this lesson")}</span>
|
||||
<Hint label={t("Close")} binding="escape" side="left">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
aria-label={t("Close")}
|
||||
data-testid="mermaid-overlay-close"
|
||||
className="ml-auto rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
@@ -287,32 +290,32 @@ export function MermaidOverlay({
|
||||
/>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-2">
|
||||
<span className="text-xs text-muted-foreground/60">Drag to pan · scroll to zoom</span>
|
||||
<span className="text-xs text-muted-foreground/60">{t("Drag to pan · scroll to zoom")}</span>
|
||||
<div className="flex gap-1">
|
||||
<Hint label="Zoom out" side="bottom">
|
||||
<Hint label={t("Zoom out")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Zoom out"
|
||||
aria-label={t("Zoom out")}
|
||||
onClick={() => stepZoom(1 / 1.25)}
|
||||
className="pointer-events-auto flex size-7 items-center justify-center rounded-md border border-border/70 bg-card/80 text-muted-foreground backdrop-blur transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<MinusIcon className="size-3.5" />
|
||||
</button>
|
||||
</Hint>
|
||||
<Hint label="Fit diagram to view" side="bottom">
|
||||
<Hint label={t("Fit diagram to view")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Fit diagram to view"
|
||||
aria-label={t("Fit diagram to view")}
|
||||
onClick={fitView}
|
||||
className="pointer-events-auto flex size-7 items-center justify-center rounded-md border border-border/70 bg-card/80 text-muted-foreground backdrop-blur transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<MaximizeIcon className="size-3.5" />
|
||||
</button>
|
||||
</Hint>
|
||||
<Hint label="Zoom in" side="bottom">
|
||||
<Hint label={t("Zoom in")} side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Zoom in"
|
||||
aria-label={t("Zoom in")}
|
||||
onClick={() => stepZoom(1.25)}
|
||||
className="pointer-events-auto flex size-7 items-center justify-center rounded-md border border-border/70 bg-card/80 text-muted-foreground backdrop-blur transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
@@ -325,8 +328,7 @@ export function MermaidOverlay({
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<span className="inline-block size-4 animate-spin rounded-full border border-current border-b-2" />
|
||||
Rendering diagram…
|
||||
</div>
|
||||
{t("Rendering diagram…")}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -124,6 +124,7 @@ export function useChatSession({ chatId, initialMessages, initiallyInFlight }: U
|
||||
return {
|
||||
messages: state.messages,
|
||||
nativeMessages: state.nativeMessages,
|
||||
contextTokens: state.contextTokens,
|
||||
status: state.status,
|
||||
error: state.error,
|
||||
steerQueue: state.steerQueue,
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
/**
|
||||
* The Agent section (settings-app wave): the THREE MODEL SLOTS, the tool
|
||||
* toggles + the search-engine preference, and the prompt override
|
||||
@@ -70,9 +72,12 @@ import {
|
||||
import type { ThinkingLevel } from "@earendil-works/pi-agent-core";
|
||||
import { prettyModel } from "@/components/usage-format";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ZapIcon } from "lucide-react";
|
||||
import { Hint } from "@/components/ui/hint";
|
||||
import { SettingsGroup, SettingsRow, Toggle, CommitInput } from "./controls.tsx";
|
||||
import { ModelMenuList, ThinkingMenuList } from "./model-menu";
|
||||
import { ChatGPTBackgroundAccess } from "./chatgpt-connection";
|
||||
import { NativeSubscriptionBackgroundAccess } from "./subscription-connections";
|
||||
|
||||
/** One slot's display identity — the tier's roster as the row hint rides
|
||||
* with the resolved default (owner: the hint ALWAYS names the default). */
|
||||
@@ -149,13 +154,22 @@ export function composeSlotModel(
|
||||
delete next[slot];
|
||||
return next;
|
||||
}
|
||||
const model = provider && id ? { provider, id } : prev?.model;
|
||||
next[slot] = {
|
||||
...(provider && id ? { model: { provider, id } } : prev?.model ? { model: prev.model } : {}),
|
||||
...(model ? { model } : {}),
|
||||
...(thinking ? { thinkingLevel: thinking as ThinkingLevel } : {}),
|
||||
...(model?.provider === "chatgpt" && prev?.fastMode !== undefined ? { fastMode: prev.fastMode } : {}),
|
||||
};
|
||||
return next;
|
||||
}
|
||||
|
||||
/** Speed belongs to the tier, independently of its reasoning budget. */
|
||||
export function composeSlotFast(models: ModelsSettings | undefined, slot: ModelSlotName, enabled: boolean): ModelsSettings {
|
||||
const current = models?.[slot];
|
||||
if (current?.model?.provider !== "chatgpt") return { ...models };
|
||||
return { ...models, [slot]: { ...current, fastMode: enabled } };
|
||||
}
|
||||
|
||||
/** Compose: the search-engine preference. null = the explicit pin is
|
||||
* REMOVED (auto-activation takes over — the schema's resting state).
|
||||
* Pure — exported for tests. */
|
||||
@@ -249,20 +263,22 @@ function MenuTrigger({
|
||||
/** The no-key search state grays the whole row; the trigger follows. */
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={ariaLabel}
|
||||
aria-expanded={open}
|
||||
disabled={disabled}
|
||||
data-testid={testid}
|
||||
onClick={() => {
|
||||
if (!disabled) onClick();
|
||||
}}
|
||||
className={`flex h-7 items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors ${
|
||||
className={`flex h-7 max-w-full items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors ${
|
||||
disabled ? "cursor-not-allowed" : "hover:border-muted-foreground/50"
|
||||
} ${widthClass}`}
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate">{value || emptyLabel}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{t(value || emptyLabel)}</span>
|
||||
<span aria-hidden className="text-muted-foreground">
|
||||
▾
|
||||
</span>
|
||||
@@ -298,11 +314,21 @@ export function AgentSection({
|
||||
/** Writes the composed WHOLE agent section (replace-PUT discipline). */
|
||||
onSectionChange: (next: AgentSettings) => void;
|
||||
/** Writes the composed models section (slots — replace-PUT discipline). */
|
||||
onModelsChange: (next: ModelsSettings) => void;
|
||||
onModelsChange: (next: ModelsSettings) => void | Promise<void>;
|
||||
/** Writes the whole compaction section (replace-PUT discipline). */
|
||||
onCompactionChange: (next: CompactionSettings) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [catalog, setCatalog] = useState<ModelCatalogEntry[] | null>(null);
|
||||
const [savingModels, setSavingModels] = useState(false);
|
||||
const [modelsError, setModelsError] = useState<string | null>(null);
|
||||
const updateModels = async (next: ModelsSettings) => {
|
||||
if (savingModels) return;
|
||||
setSavingModels(true); setModelsError(null);
|
||||
try { await onModelsChange(next); }
|
||||
catch { setModelsError("Could not save model settings"); }
|
||||
finally { setSavingModels(false); }
|
||||
};
|
||||
/** The three tiers' resolved pins — GET /api/models `slots`. The rows'
|
||||
* Default hints and thinking lists resolve from it. */
|
||||
const [slots, setSlots] = useState<ModelsBody["slots"] | null>(null);
|
||||
@@ -491,7 +517,7 @@ export function AgentSection({
|
||||
>
|
||||
<span>{label}</span>
|
||||
<span className="text-muted-foreground">
|
||||
{live === null ? (active && <span aria-hidden>✓</span>) : live ? <span aria-hidden>✓ key</span> : <span aria-hidden>· no key</span>}
|
||||
{live === null ? (active && <span aria-hidden>✓</span>) : live ? <span aria-hidden>{t("✓ key")}</span> : <span aria-hidden>{t("· no key")}</span>}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
@@ -526,7 +552,7 @@ export function AgentSection({
|
||||
<Toggle
|
||||
checked={info.enabled}
|
||||
disabled={!fileExists}
|
||||
label={`prompt ${info.path}`}
|
||||
label={t("prompt {v0}", { v0: info.path })}
|
||||
onChange={(on) => onSectionChange(composePromptSwitch(agent, info.path, on))}
|
||||
/>
|
||||
</span>
|
||||
@@ -539,26 +565,26 @@ export function AgentSection({
|
||||
}}
|
||||
className="text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
{open ? "Hide text" : "Show text"}
|
||||
{open ? t("Hide text") : t("Show text")}
|
||||
</button>
|
||||
{open && (
|
||||
<div className="mt-1 flex flex-col gap-2">
|
||||
<div>
|
||||
<p className="mb-1 text-xs uppercase tracking-widest text-muted-foreground/70">Source</p>
|
||||
<p className="mb-1 text-xs uppercase tracking-widest text-muted-foreground/70">{t("Source")}</p>
|
||||
<textarea
|
||||
readOnly
|
||||
value={info.sourceText}
|
||||
aria-label="The original instructions"
|
||||
aria-label={t("The original instructions")}
|
||||
className="h-24 w-full resize-y rounded-sm border border-border bg-muted p-2 font-ui text-xs text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-xs uppercase tracking-widest text-muted-foreground/70">Override</p>
|
||||
<p className="mb-1 text-xs uppercase tracking-widest text-muted-foreground/70">{t("Override")}</p>
|
||||
<textarea
|
||||
value={segmentDraft[info.path] ?? info.overrideText ?? ""}
|
||||
onChange={(e) => setSegmentDraft({ ...segmentDraft, [info.path]: e.target.value })}
|
||||
aria-label="Your version of the instructions"
|
||||
placeholder="Add your own instructions…"
|
||||
aria-label={t("Your version of the instructions")}
|
||||
placeholder={t("Add your own instructions…")}
|
||||
className="h-24 w-full resize-y rounded-sm border border-border bg-background p-2 font-ui text-xs text-foreground outline-none"
|
||||
/>
|
||||
</div>
|
||||
@@ -573,16 +599,14 @@ export function AgentSection({
|
||||
: "cursor-not-allowed text-xs text-muted-foreground/40 underline-offset-2"
|
||||
}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
{t("Save")}</button>
|
||||
{fileExists && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void deleteSegment(info.path)}
|
||||
className="text-xs text-muted-foreground/70 underline-offset-2 hover:text-red-500 hover:underline"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
{t("Delete")}</button>
|
||||
)}
|
||||
{/* The quiet inline confirmation — next to the
|
||||
action, not the old path-echoing line at the
|
||||
@@ -592,7 +616,7 @@ export function AgentSection({
|
||||
status reads unambiguously. */}
|
||||
{segmentStatus && (
|
||||
<p className="text-xs text-muted-foreground/70" data-testid="segment-status">
|
||||
{segmentStatus}
|
||||
{t(segmentStatus)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -613,7 +637,8 @@ export function AgentSection({
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsGroup label="Models" testid="group-models">
|
||||
<SettingsGroup label={t("Models")} testid="group-models">
|
||||
{modelsError && <p role="alert" className="text-xs text-destructive">{t(modelsError)}</p>}
|
||||
{MODEL_SLOTS.map((slot) => {
|
||||
const override = models?.[slot];
|
||||
const modelId = override?.model?.id ?? "";
|
||||
@@ -641,22 +666,24 @@ export function AgentSection({
|
||||
label={SLOT_META[slot].label}
|
||||
hint={SLOT_META[slot].roster}
|
||||
testid={`slot-row-${slot}`}
|
||||
className="flex-wrap gap-y-2"
|
||||
>
|
||||
{/* The anchor for the outside-click contract is the
|
||||
span holding BOTH triggers of the open menu. */}
|
||||
<span
|
||||
ref={thisMenuOpen ? menuAnchorRef : undefined}
|
||||
className="relative flex items-center gap-2"
|
||||
className="relative ml-auto flex max-w-full flex-wrap items-center justify-end gap-2"
|
||||
>
|
||||
{slot !== "strong" && <ChatGPTBackgroundAccess provider={coord?.provider} />}
|
||||
{slot !== "strong" && <><ChatGPTBackgroundAccess provider={coord?.provider} /><NativeSubscriptionBackgroundAccess provider={coord?.provider} /></>}
|
||||
<MenuTrigger
|
||||
value={modelId ? prettyModel(modelId) : ""}
|
||||
emptyLabel="—"
|
||||
ariaLabel={`${SLOT_META[slot].label} model`}
|
||||
ariaLabel={t("{v0} model", { v0: t(SLOT_META[slot].label) })}
|
||||
testid={`slot-model-${slot}`}
|
||||
open={thisMenuOpen === "model"}
|
||||
onClick={() => setOpenMenu(thisMenuOpen === "model" ? null : { target: slot, kind: "model" })}
|
||||
widthClass="min-w-20"
|
||||
disabled={savingModels}
|
||||
/>
|
||||
<MenuTrigger
|
||||
// Legacy display (chunk 2 item 4): no stored level + a known
|
||||
@@ -664,12 +691,24 @@ export function AgentSection({
|
||||
// what the engine build runs). Display-only until a pick writes.
|
||||
value={thinking || (chosen ? defaultOrderLevel(levels) : "")}
|
||||
emptyLabel="—"
|
||||
ariaLabel={`${SLOT_META[slot].label} thinking`}
|
||||
ariaLabel={t("{v0} thinking", { v0: t(SLOT_META[slot].label) })}
|
||||
testid={`slot-thinking-${slot}`}
|
||||
open={thisMenuOpen === "thinking"}
|
||||
onClick={() => setOpenMenu(thisMenuOpen === "thinking" ? null : { target: slot, kind: "thinking" })}
|
||||
widthClass="w-20"
|
||||
disabled={savingModels}
|
||||
/>
|
||||
<Hint label={t(provider === "chatgpt" ? "Fast mode uses more ChatGPT allowance." : "Fast mode is available only for ChatGPT models.")}>
|
||||
<span className="inline-flex">
|
||||
<button type="button" data-testid={`slot-fast-${slot}`} aria-label={t("{v0} fast mode", { v0: t(SLOT_META[slot].label) })}
|
||||
aria-pressed={provider === "chatgpt" && override?.fastMode === true} disabled={provider !== "chatgpt" || !chosen || savingModels}
|
||||
onClick={() => { setOpenMenu(null); void updateModels(composeSlotFast(models, slot, !override?.fastMode)); }}
|
||||
className={cn("flex h-7 items-center gap-1 rounded-sm border border-border px-1.5 font-ui text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40",
|
||||
provider === "chatgpt" && override?.fastMode ? "bg-muted text-foreground" : "bg-background text-muted-foreground hover:border-muted-foreground/50")}>
|
||||
<ZapIcon className="size-3.5" aria-hidden /><span>{t("Fast")}</span>
|
||||
</button>
|
||||
</span>
|
||||
</Hint>
|
||||
{thisMenuOpen === "model" && (
|
||||
<MenuShell
|
||||
preferredSide="down"
|
||||
@@ -686,13 +725,13 @@ export function AgentSection({
|
||||
// fresh pick writes a level — the stored one rides as-is
|
||||
// (the write clamps server-side), else the ordering's level.
|
||||
const next = populateLevel(thinking || undefined, entry.supportedLevels);
|
||||
onModelsChange(composeSlotModel(models, slot, entry.provider, entry.id, next));
|
||||
void updateModels(composeSlotModel(models, slot, entry.provider, entry.id, next));
|
||||
setOpenMenu(null);
|
||||
}}
|
||||
footer={
|
||||
catalog && catalog.length === 0
|
||||
? "No models — add a provider key in Keys"
|
||||
: "Runs every agent of this tier"
|
||||
? t("No models — add a provider key in Keys")
|
||||
: t("Runs every agent of this tier")
|
||||
}
|
||||
/>
|
||||
</MenuShell>
|
||||
@@ -710,7 +749,7 @@ export function AgentSection({
|
||||
// the same one the trigger shows.
|
||||
effectiveLevel={thinking || (chosen ? defaultOrderLevel(levels) : undefined)}
|
||||
onPick={(level) => {
|
||||
onModelsChange(composeSlotModel(models, slot, provider, modelId, level));
|
||||
void updateModels(composeSlotModel(models, slot, provider, modelId, level));
|
||||
setOpenMenu(null);
|
||||
}}
|
||||
/>
|
||||
@@ -722,7 +761,7 @@ export function AgentSection({
|
||||
})}
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup label="Tools" testid="group-tools">
|
||||
<SettingsGroup label={t("Tools")} testid="group-tools">
|
||||
{/* The prober's graph tools (wave 7, owner ruling 2026-09-23):
|
||||
FIRST row of the group — its subject is the map, its
|
||||
mechanism is agent capability, so it lives in Tools but
|
||||
@@ -734,15 +773,15 @@ export function AgentSection({
|
||||
const graphOn = graph?.enabled ?? true;
|
||||
return (
|
||||
<SettingsRow
|
||||
label="Graph tools"
|
||||
hint={graphOn ? "Lets the tutor consult your knowledge map between sessions" : "Graph is disabled"}
|
||||
label={t("Graph tools")}
|
||||
hint={graphOn ? t("Lets the tutor consult your knowledge map between sessions") : t("Graph is disabled")}
|
||||
testid="graph-tools-row"
|
||||
dimmed={!graphOn}
|
||||
>
|
||||
<Toggle
|
||||
checked={agent?.graphTools?.enabled ?? true}
|
||||
disabled={!graphOn}
|
||||
label="graph tools"
|
||||
label={t("graph tools")}
|
||||
onChange={(on) => onSectionChange(composeGraphTools(agent, on))}
|
||||
/>
|
||||
</SettingsRow>
|
||||
@@ -756,14 +795,15 @@ export function AgentSection({
|
||||
const free = agent?.tools?.explain === true;
|
||||
return (
|
||||
<SettingsRow
|
||||
label="Quizzing"
|
||||
hint="How both tutors check your understanding"
|
||||
label={t("Quizzing")}
|
||||
hint={t("How both tutors check your understanding")}
|
||||
testid="quiz-mechanics-row"
|
||||
className="flex-wrap gap-y-2 [&>span]:flex-[1_1_12rem]"
|
||||
>
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label="Quizzing mechanics"
|
||||
className="flex rounded-lg border border-border/60 bg-muted/30 p-0.5"
|
||||
aria-label={t("Quizzing mechanics")}
|
||||
className="flex max-w-full shrink-0 rounded-lg border border-border/60 bg-muted/30 p-0.5"
|
||||
>
|
||||
{(["choice", "free"] as const).map((m) => {
|
||||
const active = m === "free" ? free : !free;
|
||||
@@ -776,11 +816,11 @@ export function AgentSection({
|
||||
data-testid={`quiz-mechanics-${m}`}
|
||||
onClick={() => onSectionChange(composeQuizMechanics(agent, m))}
|
||||
className={cn(
|
||||
"h-8 rounded-md px-3 text-sm font-medium transition-colors",
|
||||
"min-h-8 min-w-0 rounded-md px-3 py-1 text-sm leading-snug font-medium break-words transition-colors",
|
||||
active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{m === "choice" ? "Multiple choice" : "Free recall"}
|
||||
{m === "choice" ? t("Multiple choice") : t("Free recall")}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -791,12 +831,12 @@ export function AgentSection({
|
||||
{TOGGLE_TOOLS.map((id) => (
|
||||
<SettingsRow
|
||||
key={id}
|
||||
label={`Tool · ${id}`}
|
||||
label={t("Tool · {v0}", { v0: id })}
|
||||
testid={`tool-row-${id}`}
|
||||
>
|
||||
<Toggle
|
||||
checked={agent?.tools?.[id] ?? true}
|
||||
label={`tool ${id}`}
|
||||
label={t("tool {v0}", { v0: id })}
|
||||
onChange={(on) => onSectionChange(composeTool(agent, id, on))}
|
||||
/>
|
||||
</SettingsRow>
|
||||
@@ -807,7 +847,7 @@ export function AgentSection({
|
||||
const open = openMenu?.target === "search";
|
||||
return (
|
||||
<SettingsRow
|
||||
label="Search engine"
|
||||
label={t("Search engine")}
|
||||
hint={search?.reason ?? undefined}
|
||||
testid="search-engine-row"
|
||||
dimmed={!anyKey}
|
||||
@@ -815,8 +855,8 @@ export function AgentSection({
|
||||
<span ref={open ? menuAnchorRef : undefined} className="relative flex items-center gap-2">
|
||||
<MenuTrigger
|
||||
value={engine === "tavily" ? "Tavily" : engine === "brave" ? "Brave" : ""}
|
||||
emptyLabel="Automatic"
|
||||
ariaLabel="Search engine"
|
||||
emptyLabel={t("Automatic")}
|
||||
ariaLabel={t("Search engine")}
|
||||
testid="search-engine-trigger"
|
||||
open={open}
|
||||
onClick={() => setOpenMenu(open ? null : { target: "search", kind: "engine" })}
|
||||
@@ -830,7 +870,7 @@ export function AgentSection({
|
||||
testid="search-engine-menu"
|
||||
menuClass="flex w-44 flex-col gap-0.5 rounded-xl border border-border bg-card p-2 text-xs shadow-xl"
|
||||
>
|
||||
{engineOption("auto", "Automatic", engine === null, null, () => {
|
||||
{engineOption("auto", t("Automatic"), engine === null, null, () => {
|
||||
onSectionChange(composeSearchEngine(agent, null));
|
||||
setOpenMenu(null);
|
||||
})}
|
||||
@@ -848,17 +888,17 @@ export function AgentSection({
|
||||
})()}
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup label="Context" testid="group-context">
|
||||
<SettingsGroup label={t("Context")} testid="group-context">
|
||||
<SettingsRow
|
||||
label="Compaction threshold"
|
||||
hint={`${resolvedCompaction.thresholdTokens} tok`}
|
||||
label={t("Compaction threshold")}
|
||||
hint={t("{v0} tok", { v0: resolvedCompaction.thresholdTokens })}
|
||||
testid="compaction-row-threshold"
|
||||
>
|
||||
<CommitInput
|
||||
type="number"
|
||||
value={String(compaction?.thresholdTokens ?? "")}
|
||||
placeholder={String(resolvedCompaction.thresholdTokens)}
|
||||
ariaLabel="compaction threshold"
|
||||
ariaLabel={t("compaction threshold")}
|
||||
testid="input-compaction-threshold"
|
||||
onCommit={(v) => {
|
||||
// Empty = factory default (the budget row's discipline):
|
||||
@@ -881,9 +921,9 @@ export function AgentSection({
|
||||
</SettingsRow>
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup label="System prompts" testid="group-prompts">
|
||||
<SettingsGroup label={t("System prompts")} testid="group-prompts">
|
||||
{prompts === null ? (
|
||||
<p className="text-xs text-muted-foreground/70">Loading prompt segments…</p>
|
||||
<p className="text-xs text-muted-foreground/70">{t("Loading prompt segments…")}</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* The owner's ruled order (2026-09-26): Teacher first,
|
||||
@@ -893,10 +933,10 @@ export function AgentSection({
|
||||
{sectionedSegments(prompts).map((section) => (
|
||||
<div key={section.id} data-testid={`prompt-section-${section.id}`}>
|
||||
<p className="mb-1 text-xs uppercase tracking-widest text-muted-foreground/70">
|
||||
{section.label}
|
||||
{t(section.label)}
|
||||
</p>
|
||||
{section.hint && (
|
||||
<p className="mb-1 text-xs text-muted-foreground/60">{section.hint}</p>
|
||||
<p className="mb-1 text-xs text-muted-foreground/60">{t(section.hint)}</p>
|
||||
)}
|
||||
<div className="flex flex-col gap-2">
|
||||
{section.segments.map((info) => segmentRow(info))}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
/**
|
||||
* The Appearance + Graph sections (thin settings wave).
|
||||
*
|
||||
@@ -97,6 +99,7 @@ export function AppearanceSection({
|
||||
/** PUT the whole appearance section; the page re-applies on success. */
|
||||
onSectionChange: (next: AppearanceSettings) => void;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
const { appearance: resolved } = useAppearance();
|
||||
const md = appearance?.mdRendering;
|
||||
|
||||
@@ -186,27 +189,27 @@ export function AppearanceSection({
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsRow label="Mode" hint="Coming soon" testid="row-mode" dimmed>
|
||||
<SettingsRow label={t("Mode")} hint={t("Coming soon")} testid="row-mode" dimmed>
|
||||
<ThinSelect value="dark" ariaLabel="mode" onChange={() => {}} testid="select-mode" disabled>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="dark">{t("Dark")}</option>
|
||||
</ThinSelect>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
label="Background"
|
||||
hint={`Empty = ${resolved.background ?? "#141414"}`}
|
||||
label={t("Background")}
|
||||
hint={t("Empty = {v0}", { v0: resolved.background ?? "#141414" })}
|
||||
testid="row-background"
|
||||
>
|
||||
<CommitInput
|
||||
value={appearance?.background ?? ""}
|
||||
placeholder="#141414"
|
||||
ariaLabel="background hex"
|
||||
ariaLabel={t("background hex")}
|
||||
testid="input-background"
|
||||
onCommit={(v) => onSectionChange({ ...appearance, background: v === "" ? null : v })}
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
label="Reading font"
|
||||
hint={`Empty = ${DEFAULT_READING_FONT}`}
|
||||
label={t("Reading font")}
|
||||
hint={t("Empty = {v0}", { v0: language === "ru" ? "Noto Sans" : DEFAULT_READING_FONT })}
|
||||
testid="row-font"
|
||||
>
|
||||
<span ref={fontMenuOpen ? menuAnchorRef : undefined} className="relative flex items-center gap-2">
|
||||
@@ -222,13 +225,13 @@ export function AppearanceSection({
|
||||
const triggerButton = (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Reading font"
|
||||
aria-label={t("Reading font")}
|
||||
aria-expanded={fontMenuOpen}
|
||||
data-testid="font-trigger"
|
||||
onClick={openFontMenu}
|
||||
className="flex h-7 min-w-20 items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50"
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate">{appearance?.fontFamily || DEFAULT_READING_FONT}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{appearance?.fontFamily || (language === "ru" ? "Noto Sans" : DEFAULT_READING_FONT)}</span>
|
||||
<span aria-hidden className="text-muted-foreground">
|
||||
▾
|
||||
</span>
|
||||
@@ -237,7 +240,7 @@ export function AppearanceSection({
|
||||
return fontMenuOpen ? (
|
||||
triggerButton
|
||||
) : (
|
||||
<Hint label="Choose from your installed fonts" side="left">
|
||||
<Hint label={t("Choose from your installed fonts")} side="left">
|
||||
{triggerButton}
|
||||
</Hint>
|
||||
);
|
||||
@@ -258,21 +261,21 @@ export function AppearanceSection({
|
||||
? undefined
|
||||
: localFonts === null
|
||||
? enumEmpty
|
||||
? "Common families — installed fonts could not be read"
|
||||
: "Common families — your installed list needs the desktop app"
|
||||
: "Your installed fonts"
|
||||
? t("Common families — installed fonts could not be read")
|
||||
: t("Common families — your installed list needs the desktop app")
|
||||
: t("Your installed fonts")
|
||||
}
|
||||
/>
|
||||
</MenuShell>
|
||||
)}
|
||||
</span>
|
||||
</SettingsRow>
|
||||
<SettingsRow label="Reading font size" hint={`${resolved.proseFontSize}px`} testid="row-prose-size">
|
||||
<SettingsRow label={t("Reading font size")} hint={`${resolved.proseFontSize}px`} testid="row-prose-size">
|
||||
<CommitInput
|
||||
type="number"
|
||||
value={String(appearance?.proseFontSize ?? "")}
|
||||
placeholder="16"
|
||||
ariaLabel="prose font size"
|
||||
ariaLabel={t("prose font size")}
|
||||
testid="input-prose-size"
|
||||
onCommit={(v) => {
|
||||
// Empty = factory default (owner, fix wave): omit the key so the record
|
||||
@@ -288,19 +291,19 @@ export function AppearanceSection({
|
||||
}}
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow label="Session names in serif" testid="row-session-serif">
|
||||
<SettingsRow label={t("Session names in serif")} testid="row-session-serif">
|
||||
<Toggle
|
||||
checked={appearance?.sessionNameSerif ?? true}
|
||||
label="session names serif"
|
||||
label={t("session names serif")}
|
||||
onChange={(on) => onSectionChange({ ...appearance, sessionNameSerif: on })}
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow label="Heading weight" hint={`${resolved.mdRendering.headingWeight}`} testid="row-heading-weight">
|
||||
<SettingsRow label={t("Heading weight")} hint={`${resolved.mdRendering.headingWeight}`} testid="row-heading-weight">
|
||||
<CommitInput
|
||||
type="number"
|
||||
value={String(md?.headingWeight ?? "")}
|
||||
placeholder="900"
|
||||
ariaLabel="heading weight"
|
||||
ariaLabel={t("heading weight")}
|
||||
testid="input-heading-weight"
|
||||
onCommit={(v) => {
|
||||
// Empty = factory default (owner, fix wave): Number("") is 0, so
|
||||
@@ -321,20 +324,20 @@ export function AppearanceSection({
|
||||
{/* The emphasis inks default to the REGULAR TEXT COLOR now
|
||||
(appearance wave, 2026-09-26) — the empty-state labels say
|
||||
so; explicit hex overrides ride unchanged. */}
|
||||
<SettingsRow label="Bold color" hint="Empty = same as text" testid="row-bold-color">
|
||||
<SettingsRow label={t("Bold color")} hint={t("Empty = same as text")} testid="row-bold-color">
|
||||
<CommitInput
|
||||
value={md?.boldColor ?? ""}
|
||||
placeholder="same as text"
|
||||
ariaLabel="bold color"
|
||||
placeholder={t("same as text")}
|
||||
ariaLabel={t("bold color")}
|
||||
testid="input-bold-color"
|
||||
onCommit={(v) => onSectionChange({ ...appearance, mdRendering: { ...md, boldColor: v === "" ? null : v } })}
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow label="Italic color" hint="Empty = same as text" testid="row-italic-color">
|
||||
<SettingsRow label={t("Italic color")} hint={t("Empty = same as text")} testid="row-italic-color">
|
||||
<CommitInput
|
||||
value={md?.italicColor ?? ""}
|
||||
placeholder="same as text"
|
||||
ariaLabel="italic color"
|
||||
placeholder={t("same as text")}
|
||||
ariaLabel={t("italic color")}
|
||||
testid="input-italic-color"
|
||||
onCommit={(v) => onSectionChange({ ...appearance, mdRendering: { ...md, italicColor: v === "" ? null : v } })}
|
||||
/>
|
||||
@@ -350,6 +353,7 @@ export function GraphSection({
|
||||
graph: GraphSettings | undefined;
|
||||
onSectionChange: (next: GraphSettings) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
// Wave 7 collapse (owner ruling 2026-09-23): the section is the MASTER
|
||||
// SWITCH — the embedding/clustering/labeling rungs are gone; clustering
|
||||
// is the free birth-session partition derived on read, labels ARE session
|
||||
@@ -370,10 +374,10 @@ export function GraphSection({
|
||||
switch below arrived: off ≠ no graph, off = the graph stops
|
||||
growing. The testid keeps the old name's shape (row-enabled) so
|
||||
this stays one rename, not a test re-pin. */}
|
||||
<SettingsRow label="Extraction" hint="Off = the graph stops growing" testid="graph-row-enabled">
|
||||
<SettingsRow label={t("Extraction")} hint={t("Off = the graph stops growing")} testid="graph-row-enabled">
|
||||
<Toggle
|
||||
checked={graph?.enabled ?? true}
|
||||
label="extraction enabled"
|
||||
label={t("extraction enabled")}
|
||||
onChange={(on) =>
|
||||
// Compose, never replace-whole (the section PUT is, but the
|
||||
// row must not drop its sibling field — fixed with the budget
|
||||
@@ -386,23 +390,23 @@ export function GraphSection({
|
||||
round): display-only. Off = the home shows the chains view
|
||||
instead of the canvas. The ledgers, the pipeline, everything
|
||||
data keeps working — that is the extraction switch above. */}
|
||||
<SettingsRow label="Graph rendering" hint="Off = home shows the chains view" testid="graph-row-rendering">
|
||||
<SettingsRow label={t("Graph rendering")} hint={t("Off = home shows the chains view")} testid="graph-row-rendering">
|
||||
<Toggle
|
||||
checked={graph?.rendering ?? true}
|
||||
label="graph rendering enabled"
|
||||
label={t("graph rendering enabled")}
|
||||
onChange={(on) => onSectionChange({ ...graph, rendering: on })}
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
label="Extraction chunk budget"
|
||||
hint={`${resolved.extractionChunkTokens} tok`}
|
||||
label={t("Extraction chunk budget")}
|
||||
hint={t("{v0} tok", { v0: resolved.extractionChunkTokens })}
|
||||
testid="graph-row-chunk-tokens"
|
||||
>
|
||||
<CommitInput
|
||||
type="number"
|
||||
value={String(graph?.extractionChunkTokens ?? "")}
|
||||
placeholder={String(resolved.extractionChunkTokens)}
|
||||
ariaLabel="extraction chunk budget"
|
||||
ariaLabel={t("extraction chunk budget")}
|
||||
testid="input-chunk-tokens"
|
||||
onCommit={(v) => {
|
||||
// Empty = factory default (the fix-wave discipline): absence is
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { createContext, useContext, useEffect, useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import type { ChatGPTStatus } from "@/src/core";
|
||||
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
|
||||
import { ConnectionDialog, ConnectionFooter, ConnectionRow } from "./connection-controls";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Toggle } from "./controls";
|
||||
|
||||
export const CHATGPT_NOTICE = "LearnHarness stores your ChatGPT account details and encrypted credentials locally on this device. When this connection is used, relevant conversation context, learning material, and tool results are sent directly to OpenAI. ChatGPT plan limits apply; any additional credits are authorized and managed in ChatGPT, not LearnHarness.";
|
||||
export const CHATGPT_NOTICE = "LearnHarness stores your ChatGPT account details and credentials in an unencrypted local file on this device. When this connection is used, relevant conversation context, learning material, and tool results are sent directly to OpenAI. ChatGPT plan limits apply; any additional credits are authorized and managed in ChatGPT, not LearnHarness.";
|
||||
export const CHATGPT_BACKGROUND_HINT = "Background work counts toward your ChatGPT plan usage.";
|
||||
const BACKGROUND_LABEL = "Allow background use for all ChatGPT accounts";
|
||||
const REVOCATION_WARNING = "Account disconnected locally. Remote revocation could not be confirmed.";
|
||||
@@ -22,7 +23,7 @@ function isStatus(value: unknown): value is ChatGPTStatus {
|
||||
const s = value as ChatGPTStatus;
|
||||
return typeof s.available === "boolean" && typeof s.pending === "boolean" && typeof s.allowBackgroundUse === "boolean" && (s.activeId === null || typeof s.activeId === "string") &&
|
||||
(s.error === null || typeof s.error === "string") && (s.catalogError == null || typeof s.catalogError === "string") && Array.isArray(s.accounts) &&
|
||||
s.accounts.every((a) => a && typeof a.id === "string" && typeof a.email === "string" && typeof a.registration === "string" && typeof a.connected === "boolean" && (a.planEnabled === undefined || typeof a.planEnabled === "boolean"));
|
||||
s.accounts.every((a) => a && typeof a.id === "string" && typeof a.email === "string" && typeof a.registration === "string" && typeof a.connected === "boolean" && (a.planEnabled === undefined || typeof a.planEnabled === "boolean") && (a.canSignInAgain === undefined || typeof a.canSignInAgain === "boolean"));
|
||||
}
|
||||
function replyError(value: unknown): string {
|
||||
return value && typeof value === "object" && "error" in value && typeof value.error === "string" ? value.error : CONTROL_ERROR;
|
||||
@@ -42,6 +43,7 @@ const Context = createContext({
|
||||
/** UI lifetime spans setup's keys → models transition. Only existing safe controls
|
||||
* are used; account IDs remain control values, never displayed account labels. */
|
||||
export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
|
||||
const { t } = useI18n();
|
||||
const [status, setStatus] = useState<ChatGPTStatus>(empty);
|
||||
const [dialog, setDialog] = useState<Dialog | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
@@ -138,11 +140,11 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
|
||||
const managedPresent = !!managed && status.accounts.some((a) => a.id === managed.id);
|
||||
const visibleError = error || (status.error !== dismissedError ? status.error : null) || status.catalogError || null;
|
||||
const warning = visibleError === REVOCATION_WARNING ? visibleError : null;
|
||||
function openConnect() {
|
||||
function openConnect(accountId = "") {
|
||||
if (operation.current) return;
|
||||
setBackground(statusRef.current.allowBackgroundUse);
|
||||
setBackgroundDirty(false);
|
||||
setRegistration("");
|
||||
setRegistration(accountId);
|
||||
setError(null);
|
||||
setDismissedError(status.error);
|
||||
showDialog({ kind: "connect" });
|
||||
@@ -255,126 +257,101 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
|
||||
};
|
||||
return <Context.Provider value={context}>
|
||||
{children}
|
||||
{dialog && <AccountDialog key={dialog.kind} onClose={close} busy={busy && operation.current !== "login"}>
|
||||
{dialog && <AccountDialog key={`${dialog.kind}:${dialog.kind === "manage" && !!dialog.confirm}`} onClose={close} busy={busy && operation.current !== "login"}>
|
||||
<h2 className="text-sm font-semibold text-foreground">ChatGPT</h2>
|
||||
{dialog.kind === "warning" ? <>
|
||||
<p role="alert" className="rounded-sm border border-border px-3 py-2 text-xs text-foreground" data-testid="chatgpt-revocation-warning">{REVOCATION_WARNING}</p>
|
||||
<div className="mt-4 flex justify-end"><Button variant="outline" size="sm" onClick={() => { context.dismissWarning(); showDialog(null); }}>Dismiss</Button></div>
|
||||
<p role="alert" className="rounded-sm border border-border px-3 py-2 text-xs text-foreground" data-testid="chatgpt-revocation-warning">{t(REVOCATION_WARNING)}</p>
|
||||
<div className="mt-4 flex justify-end"><Button variant="outline" size="sm" onClick={() => { context.dismissWarning(); showDialog(null); }}>{t("Dismiss")}</Button></div>
|
||||
</> : dialog.kind === "manage" && dialog.confirm ? <div data-testid="chatgpt-disconnect-confirmation">
|
||||
<h2 className="text-sm font-semibold text-red-400">{CHATGPT_DISCONNECT_COPY.title}</h2>
|
||||
<p className="mt-3 text-xs text-foreground">{managed?.email || "ChatGPT account"}</p>
|
||||
<p className="mt-3 text-xs text-muted-foreground">{CHATGPT_DISCONNECT_COPY.body}</p>
|
||||
{context.error && <p role="alert" className="mt-3 text-xs text-red-400">{context.error}</p>}
|
||||
<p className="mt-3 text-sm font-semibold text-red-400">{t(CHATGPT_DISCONNECT_COPY.title)}</p>
|
||||
<p className="mt-3 text-xs text-foreground">{managed?.email || t("ChatGPT account")}</p>
|
||||
<p className="mt-3 text-xs text-muted-foreground">{t(CHATGPT_DISCONNECT_COPY.body)}</p>
|
||||
{context.error && <p role="alert" className="mt-3 text-xs text-red-400">{t(context.error)}</p>}
|
||||
<div className="mt-4 flex items-center justify-end gap-2">
|
||||
<Button variant="ghost" size="sm" disabled={busy} onClick={close}>Cancel</Button>
|
||||
<Button variant="destructive" size="sm" data-testid="chatgpt-confirm-disconnect" disabled={busy || !managedPresent} onClick={() => bridge && managed && void control("disconnect", () => bridge.disconnect(managed.id), managed.id)}>Disconnect account</Button>
|
||||
<Button variant="ghost" size="sm" disabled={busy} onClick={close}>{t("Cancel")}</Button>
|
||||
<Button variant="destructive" size="sm" data-testid="chatgpt-confirm-disconnect" disabled={busy || !managedPresent} onClick={() => bridge && managed && void control("disconnect", () => bridge.disconnect(managed.id), managed.id)}>{t("Disconnect account")}</Button>
|
||||
</div>
|
||||
</div> : <>
|
||||
{dialog.kind === "connect" ? <>
|
||||
<h2 className="text-sm font-semibold text-foreground">Continue with ChatGPT</h2>
|
||||
{status.accounts.length > 0 && <div className="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<select aria-label="Saved ChatGPT account" value={registration} onChange={(event) => setRegistration(event.target.value)} disabled={busy || status.pending} className="min-w-0 rounded-sm border border-border bg-background px-2 py-1.5 text-foreground">
|
||||
<option value="">Add another account or workspace</option>
|
||||
{status.accounts.map((a) => <option key={a.id} value={a.id}>{a.email || "ChatGPT account"}</option>)}
|
||||
<select aria-label={t("Saved ChatGPT account")} value={registration} onChange={(event) => setRegistration(event.target.value)} disabled={busy || status.pending} className="min-w-0 rounded-sm border border-border bg-background px-2 py-1.5 text-foreground">
|
||||
<option value="">{t("Add another account or workspace")}</option>
|
||||
{status.accounts.map((a) => <option key={a.id} value={a.id}>{a.email || t("ChatGPT account")}</option>)}
|
||||
</select>
|
||||
{registration && <Button variant="ghost" size="xs" disabled={busy} onClick={() => context.manage(registration)}>Manage…</Button>}
|
||||
{registration && <Button variant="ghost" size="xs" disabled={busy} onClick={() => context.manage(registration)}>{t("Manage…")}</Button>}
|
||||
</div>}
|
||||
<p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="chatgpt-privacy-notice">{CHATGPT_NOTICE}</p>
|
||||
</> : managed && <>
|
||||
<div data-testid="chatgpt-managed-identity" className="flex items-center gap-2 text-xs text-foreground">
|
||||
{status.accounts.length > 1 && managedPresent && !busy ? <select aria-label="Manage ChatGPT account" value={managed.id} onChange={(event) => context.manage(event.target.value)} className="min-w-0 rounded-sm border border-border bg-background px-2 py-1.5">
|
||||
{status.accounts.map((a) => <option key={a.id} value={a.id}>{a.email || "ChatGPT account"}</option>)}
|
||||
</select> : <span>{managed.email || "ChatGPT account"}</span>}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center" data-testid="chatgpt-account-actions">
|
||||
<Button variant="ghost" size="xs" className="cursor-pointer text-red-400 hover:bg-red-500/10 hover:text-red-300" data-testid="chatgpt-disconnect" disabled={busy || status.pending || !managedPresent} onClick={() => dialog.kind === "manage" && showDialog({ ...dialog, confirm: true })}>Disconnect account</Button>
|
||||
</div>
|
||||
</>}
|
||||
<p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="chatgpt-privacy-notice">{t(CHATGPT_NOTICE)}</p>
|
||||
</> : null}
|
||||
<div className={`mt-4 flex items-center gap-3 text-xs text-foreground ${busy && operation.current === "change" && status.available && !status.pending ? "[&>button:disabled]:cursor-auto" : ""}`} data-testid="chatgpt-global-background">
|
||||
<Toggle label={BACKGROUND_LABEL} checked={dialog.kind === "connect" ? background : status.allowBackgroundUse} disabled={busy || status.pending || !status.available} onChange={(enabled) => {
|
||||
<Toggle label={t(BACKGROUND_LABEL)} checked={dialog.kind === "connect" ? background : status.allowBackgroundUse} disabled={busy || status.pending || !status.available} onChange={(enabled) => {
|
||||
if (dialog.kind === "connect") { setBackground(enabled); setBackgroundDirty(true); }
|
||||
else if (bridge) void control("change", () => bridge.consent(enabled));
|
||||
}} />
|
||||
<span>{BACKGROUND_LABEL}<span className="mt-1 block leading-relaxed text-muted-foreground">{CHATGPT_BACKGROUND_HINT}</span></span>
|
||||
<span>{t(BACKGROUND_LABEL)}<span className="mt-1 block leading-relaxed text-muted-foreground">{t(CHATGPT_BACKGROUND_HINT)}</span></span>
|
||||
</div>
|
||||
{dialog.kind === "manage" && <p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="chatgpt-privacy-notice">{CHATGPT_NOTICE}</p>}
|
||||
<div className="mt-3 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
|
||||
<a href="https://openai.com/policies/privacy-policy/" target="_blank" rel="noreferrer" className="underline underline-offset-2">OpenAI privacy</a>
|
||||
<a href="https://chatgpt.com/settings/usage" target="_blank" rel="noreferrer" className="underline underline-offset-2">Manage usage</a>
|
||||
<a href="https://openai.com/policies/privacy-policy/" target="_blank" rel="noreferrer" className="underline underline-offset-2">{t("OpenAI privacy")}</a>
|
||||
<a href="https://chatgpt.com/settings/usage" target="_blank" rel="noreferrer" className="underline underline-offset-2">{t("Manage usage")}</a>
|
||||
</div>
|
||||
{!status.available && <p className="mt-3 text-xs text-muted-foreground">ChatGPT sign-in is available only in the desktop app with secure OS credential storage. API-key connections remain available here.</p>}
|
||||
{status.pending && <p role="status" className="mt-3 text-xs text-muted-foreground">Waiting for browser sign-in…</p>}
|
||||
{context.error && <p role="alert" className="mt-3 text-xs text-red-400">{context.error}</p>}
|
||||
<div className="mt-4 flex items-center justify-end gap-2" data-testid="chatgpt-account-footer">
|
||||
{dialog.kind === "manage" && <Button variant="outline" size="sm" data-testid="chatgpt-add-accounts" className="cursor-pointer disabled:cursor-not-allowed" onClick={openConnect} disabled={busy || status.pending || !status.available}>Add accounts</Button>}
|
||||
<Button variant="ghost" size="sm" onClick={close} disabled={busy && operation.current !== "login"}>{dialog.kind === "connect" ? "Cancel" : "Close"}</Button>
|
||||
{!status.available && <p className="mt-3 text-xs text-muted-foreground">{t("ChatGPT sign-in is available only in the desktop app. API-key connections remain available here.")}</p>}
|
||||
{status.pending && <p role="status" className="mt-3 text-xs text-muted-foreground">{t("Waiting for browser sign-in…")}</p>}
|
||||
{context.error && <p role="alert" className="mt-3 text-xs text-red-400">{t(context.error)}</p>}
|
||||
{dialog.kind === "manage" && managed && <div className="mt-4 flex flex-wrap items-center justify-between gap-3" data-testid="chatgpt-account-strip">
|
||||
<div data-testid="chatgpt-managed-identity" className="flex min-w-0 items-center gap-2 text-xs text-foreground">
|
||||
{status.accounts.length > 1 && managedPresent && !busy ? <select aria-label={t("Manage ChatGPT account")} value={managed.id} onChange={(event) => context.manage(event.target.value)} className="min-w-0 rounded-sm border border-border bg-background px-2 py-1.5">
|
||||
{status.accounts.map((a) => <option key={a.id} value={a.id}>{a.email || t("ChatGPT account")}</option>)}
|
||||
</select> : <span className="break-all">{managed.email || t("ChatGPT account")}</span>}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" data-testid="chatgpt-add-accounts" className="cursor-pointer text-muted-foreground disabled:cursor-not-allowed" onClick={() => openConnect()} disabled={busy || status.pending || !status.available}>{t("Add accounts")}</Button>
|
||||
</div>}
|
||||
<ConnectionFooter testid="chatgpt-account-footer" leading={dialog.kind === "manage" && <div data-testid="chatgpt-account-actions">
|
||||
<Button variant="ghost" size="sm" className="cursor-pointer text-red-400 hover:bg-red-500/10 hover:text-red-300" data-testid="chatgpt-disconnect" disabled={busy || status.pending || !managedPresent} onClick={() => showDialog({ ...dialog, confirm: true })}>{t("Disconnect")}</Button>
|
||||
</div>}>
|
||||
{dialog.kind === "manage" && managedPresent && managed && !managed.connected && managed.canSignInAgain === true && status.available && <Button variant="outline" size="sm" disabled={busy || status.pending || !status.available} onClick={() => openConnect(managed.id)}>{t("Sign in again")}</Button>}
|
||||
<Button variant={dialog.kind === "manage" ? "outline" : "ghost"} size="sm" onClick={close} disabled={busy && operation.current !== "login"}>{dialog.kind === "connect" ? t("Cancel") : t("Close")}</Button>
|
||||
{dialog.kind === "connect" && <ContinueButton onClick={() => void login()} disabled={!status.available || busy || status.pending} testid="chatgpt-proceed" />}
|
||||
</div>
|
||||
</ConnectionFooter>
|
||||
</>}
|
||||
</AccountDialog>}
|
||||
</Context.Provider>;
|
||||
}
|
||||
|
||||
function ContinueButton({ onClick, disabled, testid = "chatgpt-login" }: { onClick: () => void; disabled: boolean; testid?: string }) {
|
||||
const { t } = useI18n();
|
||||
return <Button type="button" variant="outline" size="sm" data-testid={testid} onClick={onClick} disabled={disabled} className="cursor-pointer disabled:cursor-not-allowed">
|
||||
{/* Official unmodified mark; existing secondary button hover/focus treatment. */}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src="/siwc/chatgpt-logo-white.svg" width="16" height="16" alt="" aria-hidden="true" />
|
||||
Continue with ChatGPT
|
||||
</Button>;
|
||||
{t("Continue with ChatGPT")}</Button>;
|
||||
}
|
||||
|
||||
function AccountDialog({ children, onClose, busy }: { children: React.ReactNode; onClose: () => void; busy: boolean }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const closeRef = useRef(onClose);
|
||||
closeRef.current = onClose;
|
||||
const backdropDismiss = useBackdropDismiss(onClose);
|
||||
useEffect(() => {
|
||||
const previous = document.activeElement as HTMLElement | null;
|
||||
const focusable = () => [...(ref.current?.querySelectorAll<HTMLElement>('button:not([disabled]), a[href], input:not([disabled]), select:not([disabled])') ?? [])];
|
||||
focusable()[0]?.focus();
|
||||
const key = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault(); event.stopImmediatePropagation(); closeRef.current();
|
||||
} else if (event.key === "Tab") {
|
||||
const items = focusable(), first = items[0], last = items.at(-1);
|
||||
if (!first) { event.preventDefault(); return; }
|
||||
if (event.shiftKey && (document.activeElement === first || !ref.current?.contains(document.activeElement))) { event.preventDefault(); last?.focus(); }
|
||||
else if (!event.shiftKey && (document.activeElement === last || !ref.current?.contains(document.activeElement))) { event.preventDefault(); first.focus(); }
|
||||
}
|
||||
};
|
||||
// Capture claims the nested dialog's Escape before outer Settings/setup.
|
||||
document.addEventListener("keydown", key, true);
|
||||
return () => { document.removeEventListener("keydown", key, true); if (previous?.isConnected) previous.focus(); };
|
||||
}, []);
|
||||
return createPortal(<div className="fixed inset-0 z-[60] flex items-center justify-center bg-background/80" data-testid="chatgpt-dialog-backdrop" {...backdropDismiss}>
|
||||
<div ref={ref} role="dialog" aria-modal="true" aria-label="ChatGPT account" aria-busy={busy} data-testid="chatgpt-account-dialog" onClick={(event) => event.stopPropagation()} className="settings-dialog-pop mx-4 max-h-[85vh] w-full max-w-lg overflow-y-auto rounded-md border border-border bg-card p-5 shadow-xl">{children}</div>
|
||||
</div>, document.body);
|
||||
const { t } = useI18n();
|
||||
return <ConnectionDialog label={t("ChatGPT account")} testid="chatgpt-account-dialog" backdropTestid="chatgpt-dialog-backdrop" onClose={onClose} busy={busy}>{children}</ConnectionDialog>;
|
||||
}
|
||||
|
||||
/** Compact settings row, or setup's secondary action only. */
|
||||
export function ChatGPTConnection({ setup = false }: { setup?: boolean }) {
|
||||
/** Shared compact settings/setup row; account selection precedes the quiet action. */
|
||||
export function ChatGPTConnection(_props: { setup?: boolean } = {}) {
|
||||
const { t } = useI18n();
|
||||
const ui = useContext(Context);
|
||||
const active = ui.status.accounts.find((a) => a.id === ui.status.activeId && a.connected);
|
||||
const accounts = ui.status.accounts.filter((a) => a.connected);
|
||||
return <div className="flex flex-col gap-2" data-testid="chatgpt-connection">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{!setup && active && <span className="font-ui text-xs text-foreground">ChatGPT</span>}
|
||||
{active && !setup ? <>
|
||||
<select aria-label="ChatGPT account" value={active.id} disabled={ui.busy || ui.status.pending} onChange={(event) => ui.select(event.target.value)} className="min-w-0 rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground">
|
||||
{accounts.map((a) => <option key={a.id} value={a.id}>{a.email || "ChatGPT account"}</option>)}
|
||||
</select>
|
||||
<Button type="button" size="xs" variant="ghost" disabled={ui.busy} onClick={() => ui.manage(active.id)}>Manage…</Button>
|
||||
</> : <ContinueButton onClick={ui.connect} disabled={!ui.status.available || ui.busy || ui.status.pending} />}
|
||||
</div>
|
||||
<ConnectionRow label="ChatGPT" actionTestid={active ? undefined : "chatgpt-login"} action={active ? t("Manage…") : t("Connect")} disabled={!ui.status.available || ui.busy || ui.status.pending} onAction={() => active ? ui.manage(active.id) : ui.connect()}>
|
||||
{active && <select aria-label={t("ChatGPT account")} value={active.id} disabled={ui.busy || ui.status.pending} onChange={(event) => ui.select(event.target.value)} className="min-w-0 rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground">
|
||||
{accounts.map((a) => <option key={a.id} value={a.id}>{a.email || t("ChatGPT account")}</option>)}
|
||||
</select>}
|
||||
</ConnectionRow>
|
||||
{ui.inlineError && <p role="alert" className="text-xs text-red-400">{ui.inlineError}</p>}
|
||||
{ui.warning && <div role="alert" data-testid="chatgpt-revocation-warning" className="rounded-sm border border-border px-3 py-2 text-xs text-muted-foreground">{ui.warning}<button type="button" className="ml-2 cursor-pointer underline underline-offset-2" onClick={ui.dismissWarning}>Dismiss</button></div>}
|
||||
{ui.warning && <div role="alert" data-testid="chatgpt-revocation-warning" className="rounded-sm border border-border px-3 py-2 text-xs text-muted-foreground">{ui.warning}<button type="button" className="ml-2 cursor-pointer underline underline-offset-2" onClick={ui.dismissWarning}>{t("Dismiss")}</button></div>}
|
||||
</div>;
|
||||
}
|
||||
|
||||
/** Contextual consent discovery belongs beside background model choices only. */
|
||||
export function ChatGPTBackgroundAccess({ provider }: { provider: string | undefined }) {
|
||||
const { t } = useI18n();
|
||||
const ui = useContext(Context);
|
||||
const account: Account | undefined = ui.status.accounts.find((a) => a.id === ui.status.activeId && a.connected);
|
||||
if (provider !== "chatgpt" || !account || ui.status.allowBackgroundUse) return null;
|
||||
return <Button type="button" size="xs" variant="ghost" className="cursor-pointer" disabled={ui.busy} onClick={() => ui.manage(account.id)}>Enable background use</Button>;
|
||||
return <Button type="button" size="xs" variant="ghost" className="cursor-pointer" disabled={ui.busy} onClick={() => ui.manage(account.id)}>{t("Enable background use")}</Button>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { useI18n } from "@/components/i18n";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function ConnectionRow({ label, action, disabled, onAction, children, testid, actionTestid }: { label: string; action: string; disabled: boolean; onAction: () => void; children?: React.ReactNode; testid?: string; actionTestid?: string }) {
|
||||
const { t } = useI18n();
|
||||
return <div className="flex flex-wrap items-center gap-3" data-testid={testid}>
|
||||
<span className="font-ui text-xs text-foreground">{label}</span>
|
||||
{children}
|
||||
<Button type="button" size="xs" variant={action === t("Connect") ? "outline" : "ghost"} className={`cursor-pointer disabled:cursor-not-allowed ${action === t("Connect") ? "" : "text-muted-foreground hover:text-foreground"}`} data-testid={actionTestid} disabled={disabled} onClick={onAction}>{action}</Button>
|
||||
</div>;
|
||||
}
|
||||
|
||||
export function ConnectionFooter({ leading, children, testid }: { leading?: React.ReactNode; children: React.ReactNode; testid?: string }) {
|
||||
return <div className="mt-4 flex flex-wrap items-center justify-between gap-3" data-testid={testid}>
|
||||
{leading}
|
||||
<div className="ml-auto flex flex-wrap items-center justify-end gap-2">{children}</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
export function ConnectionDialog({ children, onClose, busy, label, testid, backdropTestid }: { children: React.ReactNode; onClose: () => void; busy: boolean; label: string; testid: string; backdropTestid: string }) {
|
||||
const ref = useRef<HTMLDivElement>(null), closeRef = useRef(onClose);
|
||||
closeRef.current = onClose;
|
||||
const backdropDismiss = useBackdropDismiss(() => { if (!busy) onClose(); });
|
||||
useEffect(() => {
|
||||
const previous = document.activeElement as HTMLElement | null;
|
||||
const focusable = () => [...(ref.current?.querySelectorAll<HTMLElement>('button:not([disabled]), a[href], input:not([disabled]), select:not([disabled])') ?? [])];
|
||||
focusable()[0]?.focus();
|
||||
const key = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") { event.preventDefault(); event.stopImmediatePropagation(); closeRef.current(); }
|
||||
else if (event.key === "Tab") {
|
||||
const items = focusable(), first = items[0], last = items.at(-1);
|
||||
if (!first) { event.preventDefault(); return; }
|
||||
if (event.shiftKey && (document.activeElement === first || !ref.current?.contains(document.activeElement))) { event.preventDefault(); last?.focus(); }
|
||||
else if (!event.shiftKey && (document.activeElement === last || !ref.current?.contains(document.activeElement))) { event.preventDefault(); first.focus(); }
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", key, true);
|
||||
return () => { document.removeEventListener("keydown", key, true); if (previous?.isConnected) previous.focus(); };
|
||||
}, []);
|
||||
return createPortal(<div className="fixed inset-0 z-[60] flex items-center justify-center bg-background/80" data-testid={backdropTestid} {...backdropDismiss}>
|
||||
<div ref={ref} role="dialog" aria-modal="true" aria-label={label} aria-busy={busy} data-testid={testid} onClick={(event) => event.stopPropagation()} className="settings-dialog-pop mx-4 max-h-[85vh] w-full max-w-lg overflow-y-auto rounded-md border border-border bg-card p-5 shadow-xl">{children}</div>
|
||||
</div>, document.body);
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useI18n } from "@/components/i18n";
|
||||
/**
|
||||
* Thin settings primitives (settings-app wave): the control kit the
|
||||
* settings dialog needs. Sections → groups → rows; everything SSRs clean
|
||||
@@ -25,10 +27,11 @@ export function SettingsSection({
|
||||
children: React.ReactNode;
|
||||
testid?: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<section data-testid={testid} className="px-6 py-5">
|
||||
<h2 className="text-sm uppercase tracking-widest text-foreground">{title}</h2>
|
||||
{hint && <p className="mt-1 text-xs text-muted-foreground">{hint}</p>}
|
||||
<h2 className="text-sm uppercase tracking-widest text-foreground">{t(title)}</h2>
|
||||
{hint && <p className="mt-1 text-xs text-muted-foreground">{t(hint)}</p>}
|
||||
<div className="mt-4 flex flex-col gap-3">{children}</div>
|
||||
</section>
|
||||
);
|
||||
@@ -45,9 +48,10 @@ export function SettingsGroup({
|
||||
children: React.ReactNode;
|
||||
testid?: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div data-testid={testid} className="mt-5 border-t border-border/60 pt-4 first:mt-0 first:border-t-0 first:pt-0">
|
||||
<p className="mb-2 text-xs uppercase tracking-widest text-muted-foreground">{label}</p>
|
||||
<p className="mb-2 text-xs uppercase tracking-widest text-muted-foreground">{t(label)}</p>
|
||||
<div className="flex flex-col gap-2">{children}</div>
|
||||
</div>
|
||||
);
|
||||
@@ -61,6 +65,7 @@ export function SettingsRow({
|
||||
children,
|
||||
testid,
|
||||
dimmed,
|
||||
className,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
@@ -69,12 +74,14 @@ export function SettingsRow({
|
||||
/** Dependency graying, graph-view style: the whole row dims when the
|
||||
* control is inert (parent off, no file yet, …). */
|
||||
dimmed?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div data-testid={testid} className={cn("flex items-center justify-between gap-4 py-1", dimmed && "opacity-40")}>
|
||||
<div data-testid={testid} className={cn("flex items-center justify-between gap-4 py-1", dimmed && "opacity-40", className)}>
|
||||
<span className="min-w-0">
|
||||
<span className="block font-prose text-(length:--lh-prose-size)">{label}</span>
|
||||
{hint && <span className="block text-xs text-muted-foreground/70">{hint}</span>}
|
||||
<span className="block font-prose text-(length:--lh-prose-size)">{t(label)}</span>
|
||||
{hint && <span className="block text-xs text-muted-foreground/70">{t(hint)}</span>}
|
||||
</span>
|
||||
{children}
|
||||
</div>
|
||||
@@ -102,13 +109,14 @@ export function Toggle({
|
||||
/** Optional native tooltip on the switch. */
|
||||
title?: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
aria-label={label}
|
||||
{...(title ? { title } : {})}
|
||||
aria-label={t(label)}
|
||||
{...(title ? { title: t(title) } : {})}
|
||||
disabled={disabled}
|
||||
data-testid={`toggle-${label.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`}
|
||||
onClick={() => onChange(!checked)}
|
||||
@@ -231,4 +239,4 @@ export function CommitInput({
|
||||
className="h-7 w-40 rounded-sm border border-border bg-background px-2 font-ui text-xs text-foreground outline-none placeholder:text-muted-foreground/60"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
/**
|
||||
* The Keyboard section (thin settings wave): view / rebind / reset over
|
||||
* core/keyboard.ts's registry. The overrides persist in localStorage
|
||||
@@ -48,6 +50,7 @@ export function nextOverrides(
|
||||
}
|
||||
|
||||
export function KeyboardSection() {
|
||||
const { t } = useI18n();
|
||||
const [overrides, setOverrides] = useState<Partial<Record<KeyAction, string>>>({});
|
||||
const [rebinding, setRebinding] = useState<KeyAction | null>(null);
|
||||
const [nonce, setNonce] = useState(0);
|
||||
@@ -101,20 +104,20 @@ export function KeyboardSection() {
|
||||
if (!actions.length) return null;
|
||||
return (
|
||||
<div key={scope} data-testid={`kbd-scope-${scope}`}>
|
||||
<p className="mb-1 text-xs uppercase tracking-widest text-muted-foreground/70">{label}</p>
|
||||
<p className="mb-1 text-xs uppercase tracking-widest text-muted-foreground/70">{t(label)}</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{actions.map((def) => {
|
||||
const effective = overrides[def.id] ?? def.binding;
|
||||
return (
|
||||
<SettingsRow
|
||||
key={def.id}
|
||||
label={def.label}
|
||||
hint={def.displayOnly ? "Fixed — part of this screen" : undefined}
|
||||
label={t(def.label)}
|
||||
hint={def.displayOnly ? t("Fixed — part of this screen") : undefined}
|
||||
testid={`kbd-row-${def.id}`}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<kbd className="rounded-sm border border-border bg-muted px-1.5 py-0.5 font-ui text-xs">
|
||||
{rebinding === def.id ? "Press keys…" : formatBinding(effective)}
|
||||
{rebinding === def.id ? t("Press keys…") : t(formatBinding(effective))}
|
||||
</kbd>
|
||||
{def.displayOnly ? null : rebinding === def.id ? (
|
||||
<button
|
||||
@@ -122,8 +125,7 @@ export function KeyboardSection() {
|
||||
onClick={() => setRebinding(null)}
|
||||
className="text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{t("Cancel")}</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
@@ -132,8 +134,7 @@ export function KeyboardSection() {
|
||||
data-testid={`kbd-rebind-${def.id}`}
|
||||
className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Rebind
|
||||
</button>
|
||||
{t("Rebind")}</button>
|
||||
{overridden(def.id) && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -141,8 +142,7 @@ export function KeyboardSection() {
|
||||
data-testid={`kbd-reset-${def.id}`}
|
||||
className="text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
{t("Reset")}</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -155,15 +155,14 @@ export function KeyboardSection() {
|
||||
);
|
||||
})}
|
||||
<div className="mt-1 flex items-center justify-between">
|
||||
<span className="text-xs text-muted-foreground/70">Stored on this device (lh:keymap) — overrides only.</span>
|
||||
<span className="text-xs text-muted-foreground/70">{t("Stored on this device (lh:keymap) — overrides only.")}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetAll}
|
||||
data-testid="kbd-reset-all"
|
||||
className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Reset all to defaults
|
||||
</button>
|
||||
{t("Reset all to defaults")}</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
"use client";
|
||||
import { translator, type Translator } from "@/src/core";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
/**
|
||||
* The Keys section (wave-5 polish, 2026-09-21 — owner design): a MINIMAL
|
||||
* key-value table. Provider left, masked key right, no description hints
|
||||
@@ -26,7 +29,7 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { AUTH_KEYS, type AuthKeyStatus } from "@/src/core";
|
||||
import { SettingsGroup } from "./controls.tsx";
|
||||
import { ChatGPTConnection } from "./chatgpt-connection.tsx";
|
||||
import { SubscriptionConnections } from "./subscription-connections.tsx";
|
||||
import { ProviderMenuList } from "./model-menu.tsx";
|
||||
import { MenuShell } from "@/components/menu-shell";
|
||||
import { notifySettingsSaved } from "@/components/settings-signal";
|
||||
@@ -98,11 +101,11 @@ export function classifyKeys(
|
||||
|
||||
/** The minimal status line, e.g. "…ab12 · 64 chars" (" · env" marks an
|
||||
* environment-owned value — the row itself is read-only then). Pure. */
|
||||
export function keyStatusLine(status: AuthKeyStatus): string {
|
||||
if (!status.present || !status.masked) return "not set";
|
||||
export function keyStatusLine(status: AuthKeyStatus, t: Translator = translator("en")): string {
|
||||
if (!status.present || !status.masked) return t("not set");
|
||||
const tail = status.masked.replace(/ \((\d+) chars\)$/, "");
|
||||
const chars = status.masked.match(/\((\d+) chars\)$/)?.[1] ?? "?";
|
||||
return `${tail} · ${chars}${status.source === "env" ? " · env" : ""}`;
|
||||
return `${tail} · ${chars}${status.source === "env" ? t(" · env") : ""}`;
|
||||
}
|
||||
|
||||
/** One table row: label left, tiny docs link + status right. Writable
|
||||
@@ -132,6 +135,7 @@ function KeyTableRow({
|
||||
onCancel: () => void;
|
||||
testid: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const envOwned = status.source === "env";
|
||||
const [value, setValue] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -163,8 +167,8 @@ function KeyTableRow({
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") void save();
|
||||
}}
|
||||
placeholder="Paste key…"
|
||||
aria-label={`${label} key`}
|
||||
placeholder={t("Paste key…")}
|
||||
aria-label={t("{v0} key", { v0: label })}
|
||||
data-testid={`${testid}-input`}
|
||||
disabled={busy}
|
||||
autoFocus
|
||||
@@ -177,8 +181,7 @@ function KeyTableRow({
|
||||
data-testid={`${testid}-save`}
|
||||
className="shrink-0 text-xs text-foreground underline-offset-2 hover:underline disabled:text-muted-foreground/40 disabled:no-underline"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
{t("Save")}</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
@@ -186,8 +189,7 @@ function KeyTableRow({
|
||||
data-testid={`${testid}-cancel`}
|
||||
className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{t("Cancel")}</button>
|
||||
{status.present && status.source === "file" && onDelete && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -196,13 +198,12 @@ function KeyTableRow({
|
||||
data-testid={`${testid}-delete`}
|
||||
className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-red-500 hover:underline"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
{t("Delete")}</button>
|
||||
)}
|
||||
</div>
|
||||
{error && (
|
||||
<p role="alert" data-testid={`${testid}-error`} className="px-1 text-xs text-red-500">
|
||||
{error}
|
||||
{t(error)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -230,17 +231,16 @@ function KeyTableRow({
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="text-[10px] text-muted-foreground/60 underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
key ↗
|
||||
</a>
|
||||
{t("key ↗")}</a>
|
||||
)}
|
||||
<span data-testid={`${testid}-status`} className="font-mono text-[11px] text-muted-foreground">
|
||||
{keyStatusLine(status)}
|
||||
{keyStatusLine(status, t)}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
{error && (
|
||||
<p role="alert" data-testid={`${testid}-error`} className="pl-6 text-xs text-red-500">
|
||||
{error}
|
||||
{t(error)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -256,6 +256,7 @@ function AddProviderRow({
|
||||
addable: ProviderKeyInfo[];
|
||||
onPick: (p: ProviderKeyInfo) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [open, setOpen] = useState(false);
|
||||
const anchorRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -290,7 +291,7 @@ function AddProviderRow({
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="flex w-full items-center justify-between gap-3 rounded-sm px-1 py-1.5 text-left font-ui text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
|
||||
>
|
||||
<span>+ Add provider key</span>
|
||||
<span>{t("+ Add provider key")}</span>
|
||||
{addable.length > 0 && <span className="font-mono text-[11px]">{addable.length}</span>}
|
||||
</button>
|
||||
{open && (
|
||||
@@ -324,6 +325,7 @@ export function KeysSection({
|
||||
}: {
|
||||
initialRow?: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [statuses, setStatuses] = useState<AuthKeyStatus[] | null>(null);
|
||||
const [providers, setProviders] = useState<ProviderKeyInfo[] | undefined>(undefined);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -397,7 +399,7 @@ export function KeysSection({
|
||||
}
|
||||
|
||||
if (loading || statuses === null) {
|
||||
return <p className="px-6 py-5 text-xs text-muted-foreground/70">Loading keys…</p>;
|
||||
return <p className="px-6 py-5 text-xs text-muted-foreground/70">{t("Loading keys…")}</p>;
|
||||
}
|
||||
|
||||
const { providerRows, toolRows, unknownRows, addable } = classifyKeys(statuses, providers);
|
||||
@@ -413,7 +415,7 @@ export function KeysSection({
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsGroup label="Model API keys" testid="group-provider-keys">
|
||||
<SettingsGroup label={t("Model API keys")} testid="group-provider-keys">
|
||||
{providerRows.map((status) => (
|
||||
<KeyTableRow
|
||||
key={status.id}
|
||||
@@ -455,8 +457,8 @@ export function KeysSection({
|
||||
</div>}
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup label="Subscriptions" testid="group-subscriptions">
|
||||
<div data-testid="group-chatgpt"><ChatGPTConnection /></div>
|
||||
<SettingsGroup label={t("Subscriptions")} testid="group-subscriptions">
|
||||
<SubscriptionConnections />
|
||||
</SettingsGroup>
|
||||
|
||||
{(["Dictation", "Search"] as const).map((label) => <SettingsGroup key={label} label={label} testid={label === "Dictation" ? "group-dictation" : "group-search"}>
|
||||
@@ -497,6 +499,7 @@ function AddProviderEditor({
|
||||
onCancel: () => void;
|
||||
error: string | null;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [value, setValue] = useState("");
|
||||
return (
|
||||
<>
|
||||
@@ -507,8 +510,8 @@ function AddProviderEditor({
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && value.trim()) onSave(value);
|
||||
}}
|
||||
placeholder="Paste key…"
|
||||
aria-label={`${provider.label} key`}
|
||||
placeholder={t("Paste key…")}
|
||||
aria-label={t("{v0} key", { v0: provider.label })}
|
||||
data-testid={`key-${provider.id}-input`}
|
||||
autoFocus
|
||||
className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
|
||||
@@ -520,19 +523,17 @@ function AddProviderEditor({
|
||||
data-testid={`key-${provider.id}-save`}
|
||||
className="shrink-0 text-xs text-foreground underline-offset-2 hover:underline disabled:text-muted-foreground/40 disabled:no-underline"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
{t("Save")}</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
data-testid={`key-${provider.id}-cancel`}
|
||||
className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{t("Cancel")}</button>
|
||||
{error && (
|
||||
<p role="alert" className="w-full pl-0 text-xs text-red-500" data-testid={`key-${provider.id}-error`}>
|
||||
{error}
|
||||
{t(error)}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
/**
|
||||
* The model menu (extracted 2026-09-20 from model-picker.tsx, owner ask:
|
||||
* the agent settings' role selects use the EXACT same dropdown as the
|
||||
@@ -21,7 +23,7 @@
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { ModelCatalogEntry } from "@/src/core";
|
||||
import { fuzzyScore } from "@/src/core";
|
||||
import { fuzzyScore, subscriptionLabel } from "@/src/core";
|
||||
import { formatTokens } from "@/components/usage-format";
|
||||
|
||||
function priceLabel(cost: ModelCatalogEntry["cost"]): string {
|
||||
@@ -53,6 +55,7 @@ export function ModelMenuList({
|
||||
/** Quiet footer note under the list (context-specific). */
|
||||
footer?: string;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
const [query, setQuery] = useState("");
|
||||
const [menuIdx, setMenuIdx] = useState<number | null>(null);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
@@ -104,12 +107,12 @@ export function ModelMenuList({
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="Search models…"
|
||||
placeholder={t("Search models…")}
|
||||
className="lh-input mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
|
||||
/>
|
||||
{!models && <div className="px-2 py-3 text-center text-muted-foreground">Loading models…</div>}
|
||||
{!models && <div className="px-2 py-3 text-center text-muted-foreground">{t("Loading models…")}</div>}
|
||||
{models && results.length === 0 && (
|
||||
<div className="px-2 py-3 text-center text-muted-foreground">No models match.</div>
|
||||
<div className="px-2 py-3 text-center text-muted-foreground">{t("No models match.")}</div>
|
||||
)}
|
||||
<ul ref={listRef} data-testid="model-list" className="flex max-h-72 flex-col overflow-y-auto px-1">
|
||||
{results.map((m, i) => (
|
||||
@@ -125,13 +128,13 @@ export function ModelMenuList({
|
||||
>
|
||||
<span className="flex items-center justify-between gap-2">
|
||||
<span className="truncate text-card-foreground">{m.name}</span>
|
||||
<span className="shrink-0 tabular-nums text-muted-foreground" title="USD per 1M tokens in/out">
|
||||
{m.provider === "chatgpt" ? "ChatGPT plan" : priceLabel(m.cost)}
|
||||
<span className="shrink-0 tabular-nums text-muted-foreground" title={subscriptionLabel(`${m.provider}:${m.id}`) ? t("Subscription connection") : t("USD per 1M tokens in/out")}>
|
||||
{subscriptionLabel(`${m.provider}:${m.id}`) ?? priceLabel(m.cost)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex items-center justify-between gap-2 text-muted-foreground">
|
||||
<span className="truncate">{m.provider} · {m.id}</span>
|
||||
<span className="shrink-0 tabular-nums">{formatTokens(m.contextWindow)}</span>
|
||||
<span className="truncate">{subscriptionLabel(`${m.provider}:${m.id}`) ? t("{v0} (subscription)", { v0: subscriptionLabel(`${m.provider}:${m.id}`) }) : m.provider} · {m.id}</span>
|
||||
<span className="shrink-0 tabular-nums">{formatTokens(m.contextWindow, language)}</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -160,22 +163,23 @@ export function ThinkingMenuList({
|
||||
empty?: string;
|
||||
footer?: string;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<>
|
||||
{levels.length === 0 ? (
|
||||
<div className="px-2 py-3 text-center text-muted-foreground">{empty ?? "No thinking levels."}</div>
|
||||
<div className="px-2 py-3 text-center text-muted-foreground">{empty ?? t("No thinking levels.")}</div>
|
||||
) : (
|
||||
levels.map((level) => (
|
||||
<button
|
||||
key={level}
|
||||
key={t(level)}
|
||||
type="button"
|
||||
data-testid={`thinking-option-${level}`}
|
||||
data-testid={`thinking-option-${t(level)}`}
|
||||
onClick={() => onPick(level)}
|
||||
className={`flex items-center justify-between rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted ${
|
||||
level === effectiveLevel ? "bg-muted/60 text-card-foreground" : "text-card-foreground"
|
||||
}`}
|
||||
>
|
||||
<span>{level}</span>
|
||||
<span>{t(level)}</span>
|
||||
{level === effectiveLevel && <span aria-hidden>✓</span>}
|
||||
</button>
|
||||
))
|
||||
@@ -199,6 +203,7 @@ export function ProviderMenuList({
|
||||
providers: { id: string; envVar: string; label: string }[];
|
||||
onPick: (provider: { id: string; envVar: string; label: string }) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [query, setQuery] = useState("");
|
||||
const [menuIdx, setMenuIdx] = useState<number | null>(null);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
@@ -248,11 +253,11 @@ export function ProviderMenuList({
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="Search providers…"
|
||||
placeholder={t("Search providers…")}
|
||||
className="lh-input mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
|
||||
/>
|
||||
{results.length === 0 && (
|
||||
<div className="px-2 py-3 text-center text-muted-foreground">No providers match.</div>
|
||||
<div className="px-2 py-3 text-center text-muted-foreground">{t("No providers match.")}</div>
|
||||
)}
|
||||
<ul ref={listRef} data-testid="provider-list" className="flex max-h-72 flex-col overflow-y-auto px-1">
|
||||
{results.map((p, i) => (
|
||||
@@ -283,7 +288,7 @@ export function ProviderMenuList({
|
||||
* with the default first and a searched list drops it honestly — Enter
|
||||
* can never pick a row that isn't on screen. Pure — exported for
|
||||
* tests. */
|
||||
export function fontMenuResults(query: string, families: string[]): Array<string | null> {
|
||||
export function fontMenuResults(query: string, families: string[], defaultFamily = "Source Sans 3"): Array<string | null> {
|
||||
const scored = families
|
||||
.map((f) => ({ f, s: fuzzyScore(query, f) }))
|
||||
.filter((r) => r.s !== null)
|
||||
@@ -291,7 +296,7 @@ export function fontMenuResults(query: string, families: string[]): Array<string
|
||||
.map((r) => r.f);
|
||||
// The default row's searchable identity: the factory family + the
|
||||
// word "default" (the suffix it renders with).
|
||||
const defaultScore = fuzzyScore(query, "Source Sans 3", "default");
|
||||
const defaultScore = fuzzyScore(query, defaultFamily, "default");
|
||||
if (query.trim() === "" || defaultScore !== null) return [null, ...scored];
|
||||
return scored;
|
||||
}
|
||||
@@ -300,10 +305,10 @@ export function fontMenuResults(query: string, families: string[]): Array<string
|
||||
* query that matches NO family becomes the "Use '<query>'" custom pick —
|
||||
* a matching family is the better pick, so the action row only exists
|
||||
* when there is nothing else to pick. Exported for tests. */
|
||||
export function customFamilyFor(query: string, families: string[]): string | null {
|
||||
export function customFamilyFor(query: string, families: string[], defaultFamily = "Source Sans 3"): string | null {
|
||||
const trimmed = query.trim();
|
||||
if (trimmed === "") return null;
|
||||
return fontMenuResults(query, families).length === 0 ? trimmed : null;
|
||||
return fontMenuResults(query, families, defaultFamily).length === 0 ? trimmed : null;
|
||||
}
|
||||
|
||||
/** The reading-font dropdown body — ONE search field (owner ask
|
||||
@@ -329,6 +334,7 @@ export function FontMenuList({
|
||||
/** Quiet footer note under the list. */
|
||||
footer?: string;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
const [query, setQuery] = useState("");
|
||||
const [menuIdx, setMenuIdx] = useState<number | null>(null);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
@@ -343,10 +349,11 @@ export function FontMenuList({
|
||||
listRef.current?.querySelector(`[data-idx="${menuIdx}"]`)?.scrollIntoView({ block: "nearest" });
|
||||
}, [menuIdx]);
|
||||
|
||||
const results = fontMenuResults(query, families ?? []);
|
||||
const defaultFamily = language === "ru" ? "Noto Sans" : "Source Sans 3";
|
||||
const results = fontMenuResults(query, families ?? [], defaultFamily);
|
||||
// The custom-family action row: only when a typed query matches
|
||||
// nothing (a matching family is the better pick). Enter picks it.
|
||||
const customFamily = customFamilyFor(query, families ?? []);
|
||||
const customFamily = customFamilyFor(query, families ?? [], defaultFamily);
|
||||
const walkable: Array<string | null> = customFamily !== null ? ["__custom__"] : results;
|
||||
|
||||
return (
|
||||
@@ -378,10 +385,10 @@ export function FontMenuList({
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="Search fonts…"
|
||||
placeholder={t("Search fonts…")}
|
||||
className="lh-input mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
|
||||
/>
|
||||
{!families && <div className="px-2 py-3 text-center text-muted-foreground">Loading fonts…</div>}
|
||||
{!families && <div className="px-2 py-3 text-center text-muted-foreground">{t("Loading fonts…")}</div>}
|
||||
<ul ref={listRef} data-testid="font-list" className="flex max-h-72 flex-col overflow-y-auto px-1">
|
||||
{families &&
|
||||
results.map((family, i) => {
|
||||
@@ -398,7 +405,7 @@ export function FontMenuList({
|
||||
i === menuIdx ? "bg-accent/40 ring-1 ring-inset ring-border" : ""
|
||||
}${effective && i !== menuIdx ? " bg-muted/60" : ""}`}
|
||||
>
|
||||
<span className="truncate text-card-foreground">{family ?? "Source Sans 3"}</span>
|
||||
<span className="truncate text-card-foreground">{family ?? (language === "ru" ? "Noto Sans" : "Source Sans 3")}</span>
|
||||
<span className="shrink-0 text-muted-foreground">{isDefault ? "default" : effective && <span aria-hidden>✓</span>}</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -415,8 +422,8 @@ export function FontMenuList({
|
||||
menuIdx === 0 ? "bg-accent/40 ring-1 ring-inset ring-border" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="truncate text-card-foreground">Use “{customFamily}”</span>
|
||||
<span className="shrink-0 text-muted-foreground">custom</span>
|
||||
<span className="truncate text-card-foreground">{t("Use “")}{customFamily}”</span>
|
||||
<span className="shrink-0 text-muted-foreground">{t("custom")}</span>
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
|
||||
@@ -39,6 +39,7 @@ import {
|
||||
type GraphSettings,
|
||||
type UserSettings,
|
||||
} from "@/src/core";
|
||||
import { LanguageSelect, useI18n } from "@/components/i18n";
|
||||
import { useAppearance } from "./appearance.tsx";
|
||||
import { SettingsSection, SettingsRow, Toggle } from "./controls.tsx";
|
||||
import { AgentSection } from "./agent-section.tsx";
|
||||
@@ -50,6 +51,7 @@ import { Hint } from "@/components/ui/hint";
|
||||
import { AppearanceSection, GraphSection } from "./appearance-section.tsx";
|
||||
import { KeyboardSection } from "./keyboard-section.tsx";
|
||||
import { ChatGPTUIProvider } from "./chatgpt-connection.tsx";
|
||||
import { NativeSubscriptionUIProvider } from "./subscription-connections.tsx";
|
||||
|
||||
/** Owner (2026-09-20): hints earn their place — mechanics-explaining
|
||||
* prose is out; only the keyboard note stays (storage location is a
|
||||
@@ -92,12 +94,12 @@ export function SettingsDialogProvider({
|
||||
setShow(true);
|
||||
}, []);
|
||||
return (
|
||||
<ChatGPTUIProvider><DialogContext.Provider value={{ open }}>
|
||||
<ChatGPTUIProvider><NativeSubscriptionUIProvider><DialogContext.Provider value={{ open }}>
|
||||
{children}
|
||||
{show && (
|
||||
<SettingsDialog onClose={() => setShow(false)} initialSection={landOn} initialRow={landOnRow} />
|
||||
)}
|
||||
</DialogContext.Provider></ChatGPTUIProvider>
|
||||
</DialogContext.Provider></NativeSubscriptionUIProvider></ChatGPTUIProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -143,6 +145,7 @@ export function SettingsDialogBody({
|
||||
* retargets follow it exactly like initialSection below. */
|
||||
initialRow?: string | null;
|
||||
}) {
|
||||
const { t, general, saveGeneral } = useI18n();
|
||||
const { onAppearanceChange } = useAppearance();
|
||||
const [record, setRecord] = useState<UserSettings | null | undefined>(
|
||||
undefined,
|
||||
@@ -231,6 +234,10 @@ export function SettingsDialogBody({
|
||||
body: object,
|
||||
) => {
|
||||
setError(null);
|
||||
if (section === "general") {
|
||||
try { await saveGeneral(body); } catch (error) { setError(error instanceof Error ? error.message : "Could not save language settings"); }
|
||||
return;
|
||||
}
|
||||
const res = await fetch(`/api/settings/${section}`, {
|
||||
method: "PUT",
|
||||
headers: { "content-type": "application/json" },
|
||||
@@ -259,30 +266,30 @@ export function SettingsDialogBody({
|
||||
if (section === "appearance")
|
||||
onAppearanceChange(body as AppearanceSettings);
|
||||
},
|
||||
[onAppearanceChange],
|
||||
[onAppearanceChange, saveGeneral, t],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Settings"
|
||||
aria-label={t("Settings")}
|
||||
data-testid="settings-dialog"
|
||||
className="settings-dialog-pop flex h-[620px] max-h-[85vh] w-[920px] max-w-[90vw] flex-col overflow-hidden rounded-md border border-border bg-card shadow-xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header — the app's quiet CMU title language. */}
|
||||
<header className="flex h-15 shrink-0 items-center gap-3 border-b border-border px-5">
|
||||
<h2 className="font-title text-2xl tracking-tight">Settings</h2>
|
||||
<h2 className="font-title text-2xl tracking-tight">{t("Settings")}</h2>
|
||||
<Hint
|
||||
// Esc closes the dialog (its own listener) — surface it.
|
||||
label="Close"
|
||||
label={t("Close")}
|
||||
binding="escape"
|
||||
side="left"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close settings"
|
||||
aria-label={t("Close settings")}
|
||||
data-testid="settings-close"
|
||||
className="ml-auto size-7 rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
onClick={onClose}
|
||||
@@ -304,7 +311,7 @@ export function SettingsDialogBody({
|
||||
{/* Left nav — text-only, the session-list mono language,
|
||||
active = bg-accent. */}
|
||||
<nav
|
||||
aria-label="Settings sections"
|
||||
aria-label={t("Settings sections")}
|
||||
data-testid="settings-nav"
|
||||
className="flex w-44 shrink-0 flex-col gap-1 border-r border-border p-2"
|
||||
>
|
||||
@@ -321,7 +328,7 @@ export function SettingsDialogBody({
|
||||
}`}
|
||||
onClick={() => setActive(s.id)}
|
||||
>
|
||||
{s.label}
|
||||
{t(s.label)}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
@@ -343,32 +350,32 @@ export function SettingsDialogBody({
|
||||
className="m-4 rounded-sm border border-red-500/40 px-3 py-2 text-xs text-red-500"
|
||||
data-testid="settings-error"
|
||||
>
|
||||
{error}
|
||||
{t(error)}
|
||||
</p>
|
||||
)}
|
||||
{record === undefined ? (
|
||||
<p className="px-6 py-5 text-xs text-muted-foreground/70">
|
||||
Loading settings…
|
||||
</p>
|
||||
{t("Loading settings…")}</p>
|
||||
) : record === null ? (
|
||||
<p className="px-6 py-5 text-xs text-muted-foreground/70">
|
||||
Settings could not be loaded — refresh to retry.
|
||||
</p>
|
||||
{t("Settings could not be loaded — refresh to retry.")}</p>
|
||||
) : (
|
||||
<div>
|
||||
{active === "general" && (
|
||||
<SettingsSection
|
||||
title="General"
|
||||
title={t("General")}
|
||||
testid="section-general"
|
||||
>
|
||||
<SettingsRow label={t("Interface language")} testid="row-language"><LanguageSelect field="language" /></SettingsRow>
|
||||
<SettingsRow label={t("Speech recognition language")} testid="row-stt-language"><LanguageSelect field="sttLanguage" /></SettingsRow>
|
||||
<SettingsRow
|
||||
label="Auto-update"
|
||||
label={t("Auto-update")}
|
||||
hint={AUTO_UPDATE_HINT}
|
||||
testid="row-auto-update"
|
||||
>
|
||||
<Toggle
|
||||
checked={record.general?.autoUpdate ?? true}
|
||||
label="auto update"
|
||||
checked={general.autoUpdate ?? true}
|
||||
label={t("auto update")}
|
||||
onChange={(on) =>
|
||||
void write("general", { autoUpdate: on })
|
||||
}
|
||||
@@ -377,13 +384,13 @@ export function SettingsDialogBody({
|
||||
</SettingsSection>
|
||||
)}
|
||||
{active === "keys" && (
|
||||
<SettingsSection title="Providers" testid="section-keys">
|
||||
<SettingsSection title={t("Providers")} testid="section-keys">
|
||||
<KeysSection initialRow={initialRow ?? undefined} />
|
||||
</SettingsSection>
|
||||
)}
|
||||
{active === "agent" && (
|
||||
<SettingsSection
|
||||
title="Agent"
|
||||
title={t("Agent")}
|
||||
testid="section-agent"
|
||||
>
|
||||
<AgentSection
|
||||
@@ -392,7 +399,7 @@ export function SettingsDialogBody({
|
||||
graph={record.graph}
|
||||
compaction={record.compaction}
|
||||
onModelsChange={(next: ModelsSettings) =>
|
||||
void write("models", next)
|
||||
write("models", next)
|
||||
}
|
||||
onSectionChange={(next: AgentSettings) =>
|
||||
void write("agent", next)
|
||||
@@ -405,7 +412,7 @@ export function SettingsDialogBody({
|
||||
)}
|
||||
{active === "appearance" && (
|
||||
<SettingsSection
|
||||
title="Appearance"
|
||||
title={t("Appearance")}
|
||||
testid="section-appearance"
|
||||
>
|
||||
<AppearanceSection
|
||||
@@ -418,7 +425,7 @@ export function SettingsDialogBody({
|
||||
)}
|
||||
{active === "graph" && (
|
||||
<SettingsSection
|
||||
title="Graph"
|
||||
title={t("Graph")}
|
||||
testid="section-graph"
|
||||
>
|
||||
<GraphSection
|
||||
@@ -431,8 +438,8 @@ export function SettingsDialogBody({
|
||||
)}
|
||||
{active === "keyboard" && (
|
||||
<SettingsSection
|
||||
title="Keyboard"
|
||||
hint="Stored on this device"
|
||||
title={t("Keyboard")}
|
||||
hint={t("Stored on this device")}
|
||||
testid="section-keyboard"
|
||||
>
|
||||
<KeyboardSection />
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
import { translator, type Translator } from "@/src/core";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
import { createContext, useContext, useEffect, useRef, useState } from "react";
|
||||
import { NATIVE_SUBSCRIPTIONS, type NativeSubscriptionProviderId, type NativeSubscriptionStatus } from "@/src/core";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { notifySettingsSaved } from "@/components/settings-signal";
|
||||
import { ConnectionDialog, ConnectionFooter, ConnectionRow } from "./connection-controls";
|
||||
import { ChatGPTConnection } from "./chatgpt-connection";
|
||||
import { Toggle } from "./controls";
|
||||
|
||||
export const COPILOT_POLICY_NOTICE = "Pi's native Copilot sign-in may enable additional models whose policy is not yet configured. Models explicitly disabled by policy are not enabled. Organization restrictions still apply.";
|
||||
export const SUBSCRIPTION_BACKGROUND_HINT = "Allow LearnHarness helper agents and automatic follow-ups to use this connection.";
|
||||
export function subscriptionNotice(label: string, t: Translator = translator("en")): string { return t("Your prompts, tool results, and relevant session context are sent to {v0} to run the work you select. Credentials are stored locally in an owner-only plaintext file. Provider terms, data-use policies, and plan limits apply. This connection never falls back to an API key.", { v0: label }); }
|
||||
export function subscriptionDisconnectCopy(label: string, t: Translator = translator("en")): string { return t("Disconnect {v0} from LearnHarness? This stops work using this connection and removes its saved credentials from this device. It does not cancel your subscription or revoke access at the provider. Saved model choices will remain unavailable until you reconnect or change them.", { v0: label }); }
|
||||
export function emptySubscriptionStatus(providerId: NativeSubscriptionProviderId): NativeSubscriptionStatus { return { providerId, available: false, connected: false, pending: false, allowBackgroundUse: true, connectionId: null, epoch: 0, authorityRevision: 0, revision: 0 }; }
|
||||
const Context = createContext({ statuses: [] as NativeSubscriptionStatus[], busy: false, open: (_providerId: NativeSubscriptionProviderId) => {} });
|
||||
const CONTROL_ERROR = "The connection could not be changed. Try again.";
|
||||
|
||||
export function NativeSubscriptionUIProvider({ children }: { children: React.ReactNode }) {
|
||||
const { t } = useI18n();
|
||||
const [statuses, setStatuses] = useState<NativeSubscriptionStatus[]>([]);
|
||||
const [dialog, setDialog] = useState<NativeSubscriptionProviderId | null>(null);
|
||||
const [view, setView] = useState<"notice" | "connection" | "manage">("notice");
|
||||
const [confirm, setConfirm] = useState(false), [background, setBackground] = useState(true), [backgroundDirty, setBackgroundDirty] = useState(false), [promptValue, setPromptValue] = useState("");
|
||||
const [operation, setOperation] = useState<"login" | "control" | null>(null), [error, setError] = useState<string | null>(null);
|
||||
const mounted = useRef(false), sequence = useRef(0), generation = useRef(0), statusesRef = useRef(statuses);
|
||||
const descriptor = NATIVE_SUBSCRIPTIONS.find((p) => p.providerId === dialog);
|
||||
const status = statuses.find((s) => s.providerId === dialog) ?? (dialog ? emptySubscriptionStatus(dialog) : undefined);
|
||||
const interaction = status?.interaction, prompt = interaction?.prompt;
|
||||
const management = view === "manage";
|
||||
const busy = operation === "control" || status?.committing === true;
|
||||
async function refresh() {
|
||||
const request = ++sequence.current;
|
||||
try {
|
||||
const values = await window.lh?.subscriptions?.status();
|
||||
if (!mounted.current || request !== sequence.current || !Array.isArray(values)) return;
|
||||
const accepted = NATIVE_SUBSCRIPTIONS.map(({ providerId }) => {
|
||||
const next = values.find((s) => s.providerId === providerId), old = statusesRef.current.find((s) => s.providerId === providerId);
|
||||
return next && (!old || next.revision >= old.revision) ? next : old ?? emptySubscriptionStatus(providerId);
|
||||
});
|
||||
statusesRef.current = accepted; setStatuses(accepted);
|
||||
} catch { if (mounted.current && request === sequence.current) setError("The desktop connection is unavailable. Retry when the app is ready."); }
|
||||
}
|
||||
useEffect(() => {
|
||||
mounted.current = true; void refresh();
|
||||
const off = window.lh?.subscriptions?.onChange(() => { void refresh(); notifySettingsSaved("keys"); });
|
||||
return () => { mounted.current = false; generation.current++; off?.(); };
|
||||
// The root-lifetime subscriber reads current state through refs.
|
||||
}, []);
|
||||
useEffect(() => { setPromptValue(""); }, [prompt?.id]);
|
||||
function open(providerId: NativeSubscriptionProviderId) {
|
||||
if (operation || statusesRef.current.some((s) => s.pending)) return;
|
||||
generation.current++; setError(null); setConfirm(false); setBackgroundDirty(false);
|
||||
const current = statusesRef.current.find((s) => s.providerId === providerId);
|
||||
setBackground(current?.allowBackgroundUse ?? true); setView(current?.connectionId ? "manage" : "notice"); setDialog(providerId);
|
||||
}
|
||||
async function control(action: () => Promise<void>, close = false) {
|
||||
if (busy) return;
|
||||
const owner = ++generation.current; setOperation("control"); setError(null);
|
||||
try { await action(); await refresh(); if (mounted.current && owner === generation.current && close) setDialog(null); }
|
||||
catch { if (mounted.current && owner === generation.current) setError(CONTROL_ERROR); }
|
||||
finally { if (mounted.current && owner === generation.current) setOperation(null); }
|
||||
}
|
||||
function close() {
|
||||
if (!dialog || busy) return;
|
||||
if (confirm) { setConfirm(false); setError(null); return; }
|
||||
const bridge = window.lh?.subscriptions;
|
||||
if ((status?.pending || operation === "login") && bridge) { void control(() => bridge.cancel(dialog), true); return; }
|
||||
generation.current++; setDialog(null); setError(null);
|
||||
}
|
||||
function beginSignIn() {
|
||||
if (operation || busy || !status) return;
|
||||
generation.current++; setError(null); setConfirm(false); setBackground(status.allowBackgroundUse); setBackgroundDirty(false); setView("notice");
|
||||
}
|
||||
async function login() {
|
||||
const bridge = window.lh?.subscriptions;
|
||||
if (!dialog || !bridge || operation || !status?.available) return;
|
||||
const owner = ++generation.current; setOperation("login"); setError(null);
|
||||
try { await bridge.login(dialog, backgroundDirty ? background : undefined); await refresh(); if (mounted.current && generation.current === owner) setDialog(null); }
|
||||
catch { if (mounted.current && generation.current === owner) setError("Sign-in did not complete. Try connecting again."); }
|
||||
finally { if (mounted.current && generation.current === owner) setOperation(null); }
|
||||
}
|
||||
const bridge = typeof window === "undefined" ? undefined : window.lh?.subscriptions;
|
||||
return <Context.Provider value={{ statuses, busy: !!operation, open }}>
|
||||
{children}
|
||||
{dialog && descriptor && status && <ConnectionDialog key={`${dialog}:${view}:${confirm}`} label={t("{v0} connection", { v0: descriptor.label })} testid="subscription-connection-dialog" backdropTestid="subscription-dialog-backdrop" busy={busy} onClose={close}>
|
||||
<h2 className="text-sm font-semibold text-foreground">{descriptor.label}</h2>
|
||||
{confirm ? <>
|
||||
<p className="mt-3 text-sm font-semibold text-red-400">{t("Disconnect")}{" "}{descriptor.label}?</p>
|
||||
<p className="mt-3 text-xs leading-relaxed text-muted-foreground">{subscriptionDisconnectCopy(descriptor.label, t)}</p>
|
||||
</> : view === "notice" ? <>
|
||||
<p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="subscription-privacy-notice">{subscriptionNotice(descriptor.label, t)}</p>
|
||||
{dialog === "github-copilot" && <p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="copilot-policy-notice">{t(COPILOT_POLICY_NOTICE)}</p>}
|
||||
</> : <>
|
||||
<div className="mt-4 flex items-center gap-3 text-xs text-foreground">
|
||||
<Toggle label={t("Allow background use")} checked={management ? status.allowBackgroundUse : background} disabled={busy || !!operation || status.pending || !status.available} onChange={(enabled) => { setBackground(enabled); if (management && bridge) void control(() => bridge.consent(dialog, enabled)); else setBackgroundDirty(true); }} />
|
||||
<span>{t("Allow background use")}<span className="mt-1 block leading-relaxed text-muted-foreground">{t(SUBSCRIPTION_BACKGROUND_HINT)}</span></span>
|
||||
</div>
|
||||
{!status.available && <p className="mt-3 text-xs text-muted-foreground">{t("Subscription sign-in requires the desktop app's private server connection. API-key connections remain available here.")}</p>}
|
||||
{view === "connection" && interaction && <div className="mt-3 space-y-3 text-xs" data-testid="subscription-login-interaction">
|
||||
{interaction.progress && <p role="status" className="text-muted-foreground">{t(interaction.progress)}</p>}
|
||||
{interaction.userCode && <p>{t("Device code:")}{" "}<code className="select-text font-mono">{interaction.userCode}</code></p>}
|
||||
{interaction.browser && <Button variant="outline" size="sm" disabled={busy} onClick={() => bridge && void bridge.open(dialog, interaction.attemptId, interaction.browser!.id).catch(() => setError("The browser could not be opened. Try again."))}>{t("Open browser")}</Button>}
|
||||
{prompt && <form className="space-y-2" onSubmit={(event) => { event.preventDefault(); if (bridge) void bridge.respond(dialog, interaction.attemptId, prompt.id, promptValue).catch(() => setError(CONTROL_ERROR)); }}>
|
||||
<label className="block" htmlFor="subscription-auth-prompt">{t(prompt.message)}</label>
|
||||
{prompt.type === "select" ? <select id="subscription-auth-prompt" value={promptValue} onChange={(event) => setPromptValue(event.target.value)} className="w-full rounded-sm border border-border bg-background px-2 py-1.5"><option value="" disabled>{t("Select…")}</option>{prompt.options?.map((option) => <option key={option.id} value={option.id}>{t(option.label)}</option>)}</select> : <input id="subscription-auth-prompt" type={prompt.type === "secret" ? "password" : "text"} autoComplete="off" value={promptValue} placeholder={prompt.placeholder ? t(prompt.placeholder) : undefined} onChange={(event) => setPromptValue(event.target.value)} className="w-full rounded-sm border border-border bg-background px-2 py-1.5" />}
|
||||
<Button type="submit" variant="outline" size="sm" disabled={busy || (prompt.type === "select" && !promptValue)}>{t("Continue")}</Button>
|
||||
</form>}
|
||||
</div>}
|
||||
</>}
|
||||
{(error || status.error) && <p role="alert" className="mt-3 text-xs text-red-400">{t(error || status.error || "")}</p>}
|
||||
<ConnectionFooter testid="subscription-connection-footer" leading={!confirm && management && status.connectionId && !status.pending && <Button variant="ghost" size="sm" className="cursor-pointer text-red-400 hover:bg-red-500/10 hover:text-red-300" disabled={busy || !!operation} onClick={() => setConfirm(true)}>{t("Disconnect")}</Button>}>
|
||||
{!confirm && management && status.connectionId && status.available && !status.connected && !!status.error && !status.pending && <>
|
||||
{status.error && <Button variant="outline" size="sm" disabled={busy || !!operation} onClick={() => bridge && void control(() => bridge.retry(dialog))}>{t("Retry")}</Button>}
|
||||
<Button variant="outline" size="sm" disabled={!status.available || busy || !!operation} onClick={beginSignIn}>{t("Sign in again")}</Button>
|
||||
</>}
|
||||
<Button variant={!confirm && management ? "outline" : "ghost"} size="sm" disabled={busy} onClick={close}>{confirm || !management ? t("Cancel") : t("Close")}</Button>
|
||||
{confirm ? <Button variant="destructive" size="sm" disabled={busy} onClick={() => bridge && void control(() => bridge.disconnect(dialog), true)}>{t("Disconnect")}</Button> : view === "notice" ? <Button variant="outline" size="sm" disabled={!status.available || !!operation} onClick={() => setView("connection")}>{t("Continue")}</Button> : view === "connection" && <Button variant="outline" size="sm" disabled={!status.available || !!operation || status.pending} onClick={() => void login()}>{t("Connect")}</Button>}
|
||||
</ConnectionFooter>
|
||||
</ConnectionDialog>}
|
||||
</Context.Provider>;
|
||||
}
|
||||
|
||||
export function NativeSubscriptionConnection({ providerId }: { providerId: NativeSubscriptionProviderId }) {
|
||||
const { t } = useI18n();
|
||||
const ui = useContext(Context), descriptor = NATIVE_SUBSCRIPTIONS.find((p) => p.providerId === providerId)!;
|
||||
const status = ui.statuses.find((s) => s.providerId === providerId) ?? emptySubscriptionStatus(providerId);
|
||||
return <div className="flex flex-col gap-2" data-testid={`${providerId}-connection`}>
|
||||
<ConnectionRow label={descriptor.label} action={status.connectionId ? t("Manage…") : t("Connect")} disabled={ui.busy || !status.available || ui.statuses.some((s) => s.pending)} onAction={() => ui.open(providerId)} />
|
||||
{status.error && <p role="alert" className="text-xs text-red-400">{t(status.error)}</p>}
|
||||
</div>;
|
||||
}
|
||||
export function SubscriptionConnections({ setup = false }: { setup?: boolean }) {
|
||||
return <div className="space-y-3" data-testid="subscription-connections"><ChatGPTConnection setup={setup} />{NATIVE_SUBSCRIPTIONS.map((p) => <NativeSubscriptionConnection key={p.providerId} providerId={p.providerId} />)}</div>;
|
||||
}
|
||||
export function NativeSubscriptionBackgroundAccess({ provider }: { provider: string | undefined }) {
|
||||
const { t } = useI18n();
|
||||
const ui = useContext(Context), descriptor = NATIVE_SUBSCRIPTIONS.find((p) => p.logicalId === provider);
|
||||
const status = ui.statuses.find((s) => s.providerId === descriptor?.providerId);
|
||||
if (!descriptor || !status?.connected || status.allowBackgroundUse) return null;
|
||||
return <Button type="button" size="xs" variant="ghost" disabled={ui.busy} onClick={() => ui.open(descriptor.providerId)}>{t("Enable background use")}</Button>;
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
/**
|
||||
* The zero-keys surfaces (zero-keys wave, 2026-09-25, owner-locked over
|
||||
* Platform's 66dbea9 key-presence gate): when NO model-provider key
|
||||
@@ -46,6 +48,7 @@ export function useZeroKeys(): boolean {
|
||||
* chain's copy. testid "setup-cta-keys" (the models CTA keeps
|
||||
* "setup-cta"; probes can tell them apart). */
|
||||
export function ZeroKeysPill({ onOpen, inline = false }: { onOpen: () => void; inline?: boolean }) {
|
||||
const { t } = useI18n();
|
||||
const button = (
|
||||
<button
|
||||
type="button"
|
||||
@@ -53,8 +56,7 @@ export function ZeroKeysPill({ onOpen, inline = false }: { onOpen: () => void; i
|
||||
onClick={onOpen}
|
||||
className="rounded-sm border border-border bg-card px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 hover:bg-accent cursor-pointer"
|
||||
>
|
||||
Add a provider key
|
||||
</button>
|
||||
{t("Add a provider key")}</button>
|
||||
);
|
||||
return inline ? button : <div className="pointer-events-auto mb-2 flex justify-center">{button}</div>;
|
||||
}
|
||||
|
||||
+31
-30
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
/**
|
||||
* The first-run setup flow (model-slots wave, 2026-09-20, owner design
|
||||
* "A — composer CTA + send interception"): chats cannot start until the
|
||||
@@ -44,7 +46,8 @@ import { notifySettingsSaved, useSettingsSaved } from "@/components/settings-sig
|
||||
import { Hint } from "@/components/ui/hint";
|
||||
import { type ProviderKeyInfo } from "@/components/settings/keys-section";
|
||||
import { ProviderMenuList } from "@/components/settings/model-menu";
|
||||
import { ChatGPTBackgroundAccess, ChatGPTConnection } from "@/components/settings/chatgpt-connection";
|
||||
import { ChatGPTBackgroundAccess } from "@/components/settings/chatgpt-connection";
|
||||
import { NativeSubscriptionBackgroundAccess, SubscriptionConnections } from "@/components/settings/subscription-connections";
|
||||
import { defaultOrderLevel, populateLevel, THINKING_LABEL } from "@/components/thinking-default";
|
||||
import { ThinkingMenuList } from "@/components/settings/model-menu";
|
||||
import type { ThinkingLevel } from "@earendil-works/pi-agent-core";
|
||||
@@ -146,22 +149,22 @@ export function SetupKeysBody({
|
||||
/** The MenuShell anchor — wired by the wrapper (its triggerRef). */
|
||||
menuAnchor: React.RefObject<HTMLDivElement | null>;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div className="flex flex-col gap-3 px-6 py-5" data-testid="setup-stage-keys">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Choose your AI provider and paste its API key. You’ll pick your models next.
|
||||
</p>
|
||||
{t("Choose your AI provider and paste its API key. You’ll pick your models next.")}</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div ref={menuAnchor} className="relative max-w-96">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Provider"
|
||||
aria-label={t("Provider")}
|
||||
data-testid="setup-key-provider"
|
||||
aria-expanded={menuOpen}
|
||||
onClick={onToggleMenu}
|
||||
className="flex h-7 w-full items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50"
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate text-left">{provider ? provider.label : "Pick a provider…"}</span>
|
||||
<span className="min-w-0 flex-1 truncate text-left">{provider ? provider.label : t("Pick a provider…")}</span>
|
||||
<span aria-hidden className="text-muted-foreground">
|
||||
▾
|
||||
</span>
|
||||
@@ -187,8 +190,8 @@ export function SetupKeysBody({
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && value.trim()) onSave();
|
||||
}}
|
||||
placeholder="Paste key…"
|
||||
aria-label={`${provider.label} key`}
|
||||
placeholder={t("Paste key…")}
|
||||
aria-label={t("{v0} key", { v0: provider.label })}
|
||||
data-testid="setup-key-input"
|
||||
disabled={saving}
|
||||
autoFocus
|
||||
@@ -201,17 +204,17 @@ export function SetupKeysBody({
|
||||
data-testid="setup-key-save"
|
||||
className="shrink-0 rounded-sm border border-border bg-background px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{saving ? "Saving…" : "Save key"}
|
||||
{saving ? t("Saving…") : t("Save key")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<p role="alert" data-testid="setup-key-error" className="text-xs text-red-400">
|
||||
{error}
|
||||
{t(error)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 border-t border-border/60 pt-4"><ChatGPTConnection setup /></div>
|
||||
<div className="mt-2 border-t border-border/60 pt-4"><h3 className="mb-3 font-ui text-xs text-muted-foreground">{t("Subscriptions")}</h3><SubscriptionConnections setup /></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -227,6 +230,7 @@ export function SetupDialog({
|
||||
onClose: () => void;
|
||||
onDone: (models: ModelsSettings) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const backdropDismiss = useBackdropDismiss(onClose);
|
||||
const [body, setBody] = useState<ModelsBody | null>(null);
|
||||
const [failed, setFailed] = useState(false);
|
||||
@@ -406,17 +410,17 @@ export function SetupDialog({
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Set up your models"
|
||||
aria-label={t("Set up your models")}
|
||||
data-testid="setup-dialog"
|
||||
className="settings-dialog-pop flex max-h-[85vh] w-[640px] max-w-[90vw] flex-col overflow-hidden rounded-md border border-border bg-card shadow-xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<header className="flex h-15 shrink-0 items-center gap-3 border-b border-border px-5">
|
||||
<h2 className="font-title text-2xl tracking-tight">Set up your models</h2>
|
||||
<Hint label="Close" binding="escape" side="left">
|
||||
<h2 className="font-title text-2xl tracking-tight">{t("Set up your models")}</h2>
|
||||
<Hint label={t("Close")} binding="escape" side="left">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close setup"
|
||||
aria-label={t("Close setup")}
|
||||
data-testid="setup-close"
|
||||
onClick={onClose}
|
||||
className="ml-auto text-muted-foreground transition-colors hover:text-foreground"
|
||||
@@ -430,15 +434,14 @@ export function SetupDialog({
|
||||
<div className="flex flex-col px-6 py-5">
|
||||
{failed ? (
|
||||
<p className="text-sm text-foreground">
|
||||
Model catalog could not be loaded. Check the connection and retry.
|
||||
</p>
|
||||
{t("Model catalog could not be loaded. Check the connection and retry.")}</p>
|
||||
) : (
|
||||
<SetupKeysBody
|
||||
providers={keyProviders}
|
||||
provider={keyProvider}
|
||||
value={keyValue}
|
||||
saving={keySaving}
|
||||
error={keyError}
|
||||
error={t(keyError)}
|
||||
menuOpen={keyMenuOpen}
|
||||
menuAnchor={keyTriggerRef}
|
||||
onToggleMenu={() => setKeyMenuOpen((v) => !v)}
|
||||
@@ -455,8 +458,7 @@ export function SetupDialog({
|
||||
) : (
|
||||
<div className="flex flex-col gap-4 overflow-y-auto px-6 py-5" data-testid="setup-stage-pickers">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Pick the model for each tier. All three are required before chats can start.
|
||||
</p>
|
||||
{t("Pick the model for each tier. All three are required before chats can start.")}</p>
|
||||
{SLOT_ORDER.map((slot) => {
|
||||
const entry = picked[slot];
|
||||
const level = levels[slot];
|
||||
@@ -466,29 +468,28 @@ export function SetupDialog({
|
||||
return (
|
||||
<div key={slot} data-testid={`setup-slot-${slot}`} className="flex flex-col gap-1.5">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="font-ui text-sm text-foreground">{SLOT_META[slot].label}</span>
|
||||
<span className="font-ui text-sm text-foreground">{t(SLOT_META[slot].label)}</span>
|
||||
{!body?.slots?.[slot]?.model && !picked[slot] && (
|
||||
<span
|
||||
data-testid={`setup-needed-${slot}`}
|
||||
className="rounded-sm border border-border px-1 py-0.5 text-[10px] font-normal tracking-wide text-muted-foreground"
|
||||
>
|
||||
needed
|
||||
</span>
|
||||
{t("needed")}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/70">{SLOT_META[slot].roster}</span>
|
||||
{slot !== "strong" && <ChatGPTBackgroundAccess provider={entry?.provider} />}
|
||||
<span className="text-xs text-muted-foreground/70">{t(SLOT_META[slot].roster)}</span>
|
||||
{slot !== "strong" && <><ChatGPTBackgroundAccess provider={entry?.provider} /><NativeSubscriptionBackgroundAccess provider={entry?.provider} /></>}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`${SLOT_META[slot].label} model`}
|
||||
aria-label={t("{v0} model", { v0: SLOT_META[slot].label })}
|
||||
data-testid={`setup-trigger-${slot}`}
|
||||
aria-expanded={openMenu?.slot === slot && openMenu.kind === "model"}
|
||||
onClick={() => setOpenMenu(openMenu?.slot === slot && openMenu.kind === "model" ? null : { slot, kind: "model" })}
|
||||
className="flex h-7 min-w-40 w-full items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50"
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate">{entry ? prettyModel(entry.id) : "Pick a model…"}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{entry ? prettyModel(entry.id) : t("Pick a model…")}</span>
|
||||
<span aria-hidden className="text-muted-foreground">
|
||||
▾
|
||||
</span>
|
||||
@@ -526,7 +527,7 @@ export function SetupDialog({
|
||||
}));
|
||||
setOpenMenu(null);
|
||||
}}
|
||||
footer={catalog && catalog.length === 0 ? "No image-capable models. Add a provider key with access to a vision model." : undefined}
|
||||
footer={catalog && catalog.length === 0 ? t("No image-capable models. Add a provider key with access to a vision model.") : undefined}
|
||||
/>
|
||||
</MenuShell>
|
||||
)}
|
||||
@@ -536,7 +537,7 @@ export function SetupDialog({
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`${SLOT_META[slot].label} thinking`}
|
||||
aria-label={t("{v0} thinking", { v0: SLOT_META[slot].label })}
|
||||
data-testid={`setup-thinking-${slot}`}
|
||||
aria-expanded={openMenu?.slot === slot && openMenu.kind === "thinking"}
|
||||
disabled={!entry}
|
||||
@@ -581,9 +582,9 @@ export function SetupDialog({
|
||||
onClick={() => void save()}
|
||||
className="rounded-sm border border-border bg-background px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{saving ? "Saving…" : "Save models"}
|
||||
{saving ? t("Saving…") : t("Save models")}
|
||||
</button>
|
||||
{error && <p className="text-xs text-red-400">{error}</p>}
|
||||
{error && <p className="text-xs text-red-400">{t(error)}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
+48
-42
@@ -1,4 +1,7 @@
|
||||
"use client";
|
||||
import { translator, type Language } from "@/src/core";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
@@ -48,7 +51,7 @@ const STORAGE_KEY = "lh:sidebar-open";
|
||||
*
|
||||
* Mirrors SIDEBAR_AUTOCLOSE in electron/main.cjs — keep in sync.
|
||||
*/
|
||||
import type { ChatGPTControlBridge } from "@/src/core";
|
||||
import type { ChatGPTControlBridge, NativeSubscriptionControlBridge } from "@/src/core";
|
||||
const SIDEBAR_AUTOCLOSE = 928;
|
||||
|
||||
// Module scope, guarded for SSR (the server has no navigator).
|
||||
@@ -61,10 +64,12 @@ declare global {
|
||||
/** Read-only host OS; determines the native-control gutter. */
|
||||
platform?: string;
|
||||
chatgpt?: ChatGPTControlBridge;
|
||||
subscriptions?: NativeSubscriptionControlBridge;
|
||||
expandWindow: () => void;
|
||||
/** The zoom truth (owner round 7): subscribes to "lh:zoom" pushes; returns unsubscribe. */
|
||||
onZoom?: (cb: (factor: number) => void) => () => void;
|
||||
getZoom?: () => Promise<number>;
|
||||
setLanguage?: (language: "en" | "ru") => void;
|
||||
/** Auto-update channel (Wave C, 2026-10-10): "lh:update-status" pushes once a staged update exists. */
|
||||
onUpdateStatus?: (cb: (status: { status: string; version: string | null }) => void) => () => void;
|
||||
installUpdate?: () => void;
|
||||
@@ -187,6 +192,7 @@ export function SidebarProvider({ children }: { children: React.ReactNode }) {
|
||||
* The icon fades with the slot and is clipped by it as it collapses —
|
||||
* no popping in either direction. */
|
||||
export function SidebarToggle() {
|
||||
const { t } = useI18n();
|
||||
const { open, toggle } = useSidebar();
|
||||
return (
|
||||
<span
|
||||
@@ -195,11 +201,11 @@ export function SidebarToggle() {
|
||||
open ? "w-0 -mr-3" : "w-9 mr-0 lh-closed-toggle",
|
||||
)}
|
||||
>
|
||||
<Hint label="Open sidebar" action="toggle-sidebar">
|
||||
<Hint label={t("Open sidebar")} action="toggle-sidebar">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Open sidebar"
|
||||
aria-label={t("Open sidebar")}
|
||||
aria-hidden={open}
|
||||
tabIndex={open ? -1 : 0}
|
||||
onClick={toggle}
|
||||
@@ -238,16 +244,18 @@ function SessionStatus({ busy }: { busy: boolean }) {
|
||||
* in any locale and it sorts (owner, typography round 5; the old
|
||||
* M/D/YYYY was the US convention. A user-locale setting can come later
|
||||
* — trivial, a format function swap). Pure — exported for tests. */
|
||||
export function timeAgo(iso: string, now = new Date()): string {
|
||||
export function timeAgo(iso: string, now = new Date(), language: Language = "en"): string {
|
||||
const t = translator(language);
|
||||
const ms = now.getTime() - new Date(iso).getTime();
|
||||
if (ms < 60_000) return "just now";
|
||||
if (ms < 60_000) return t("just now");
|
||||
const min = Math.floor(ms / 60_000);
|
||||
if (min < 60) return `${min}m ago`;
|
||||
if (min < 60) return t("{v0}m ago", { v0: min });
|
||||
const h = Math.floor(min / 60);
|
||||
if (h < 24) return `${h}h ago`;
|
||||
if (h < 24) return t("{v0}h ago", { v0: h });
|
||||
const d = Math.floor(h / 24);
|
||||
if (d < 7) return `${d}d ago`;
|
||||
if (d < 7) return t("{v0}d ago", { v0: d });
|
||||
const date = new Date(iso);
|
||||
if (language === "ru") return new Intl.DateTimeFormat("ru-RU").format(date);
|
||||
const mm = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const dd = String(date.getDate()).padStart(2, "0");
|
||||
return `${date.getFullYear()}-${mm}-${dd}`;
|
||||
@@ -258,14 +266,15 @@ export function timeAgo(iso: string, now = new Date()): string {
|
||||
* typography round 5): it informed no decision — clutter. messageCount
|
||||
* still rides the API payload, so this is a one-line flip back if it's
|
||||
* ever wanted. */
|
||||
function sessionMeta(chat: ChatListItem): string {
|
||||
if (chat.compacting) return `Compacting context · ${timeAgo(chat.updatedAt)}`;
|
||||
if (chat.pendingQuestion) return `Waiting for input · ${timeAgo(chat.updatedAt)}`;
|
||||
function sessionMeta(chat: ChatListItem, language: Language = "en"): string {
|
||||
const t = translator(language);
|
||||
if (chat.compacting) return t("Compacting context · {v0}", { v0: timeAgo(chat.updatedAt, undefined, language) });
|
||||
if (chat.pendingQuestion) return t("Waiting for input · {v0}", { v0: timeAgo(chat.updatedAt, undefined, language) });
|
||||
if ((chat.kind ?? "teach") === "practice" && chat.pendingProblem) {
|
||||
return `Problem waiting · ${timeAgo(chat.updatedAt)}`;
|
||||
return t("Problem waiting · {v0}", { v0: timeAgo(chat.updatedAt, undefined, language) });
|
||||
}
|
||||
if (chat.busy) return "Working…";
|
||||
return timeAgo(chat.updatedAt);
|
||||
if (chat.busy) return t("Working…");
|
||||
return timeAgo(chat.updatedAt, undefined, language);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -289,6 +298,7 @@ export function SessionRow({
|
||||
/** Right-click opens the context menu (wave 6: Rename / Delete). */
|
||||
onContextMenu?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
@@ -309,13 +319,13 @@ export function SessionRow({
|
||||
rule, finally applied to the picker too (owner, typography
|
||||
round): mono = chrome, Source Sans = human words. */}
|
||||
<span className="block truncate font-prose text-(length:--lh-prose-size)">{chat.title}</span>
|
||||
<span className="block text-xs text-muted-foreground">{sessionMeta(chat)}</span>
|
||||
<span className="block text-xs text-muted-foreground">{sessionMeta(chat, language)}</span>
|
||||
</span>
|
||||
{/* The dumbbell rides the FAR RIGHT (owner round 6, 2026-10-05) —
|
||||
was left of the name; right-aligned keeps the titles flush with
|
||||
the teaching rows and reads cleaner. */}
|
||||
{(chat.kind ?? "teach") === "practice" && (
|
||||
<DumbbellIcon className="size-3.5 shrink-0 text-muted-foreground/70" aria-label="Practice session" />
|
||||
<DumbbellIcon className="size-3.5 shrink-0 text-muted-foreground/70" aria-label={t("Practice session")} />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
@@ -326,6 +336,7 @@ export function SessionRow({
|
||||
* "replace", the header rename's rule), Enter/blur commits, Esc discards.
|
||||
* The meta line stays so the row never changes height mid-edit. */
|
||||
export function RenameRow({ chat, onCommit, onCancel }: { chat: ChatListItem; onCommit: (next: string) => void; onCancel: () => void }) {
|
||||
const { t, language } = useI18n();
|
||||
const [draft, setDraft] = useState(chat.title);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
useEffect(() => {
|
||||
@@ -361,11 +372,11 @@ export function RenameRow({ chat, onCommit, onCancel }: { chat: ChatListItem; on
|
||||
onCancel();
|
||||
}
|
||||
}}
|
||||
aria-label="Rename session"
|
||||
aria-label={t("Rename session")}
|
||||
data-testid="session-rename-input"
|
||||
className="lh-input w-full min-w-0 truncate border-0 border-b border-border bg-transparent px-0 text-foreground outline-none"
|
||||
/>
|
||||
<span className="block truncate text-xs text-muted-foreground">{sessionMeta(chat)}</span>
|
||||
<span className="block truncate text-xs text-muted-foreground">{sessionMeta(chat, language)}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@@ -378,6 +389,7 @@ export type SessionKindFilter = "teach" | "all" | "practice";
|
||||
const KIND_FILTER_KEY = "lh:session-kind-filter";
|
||||
|
||||
function SessionsSidebar() {
|
||||
const { t } = useI18n();
|
||||
const { open, toggle } = useSidebar();
|
||||
const [chats, setChats] = useState<ChatListItem[] | null>(null);
|
||||
const [query, setQuery] = useState("");
|
||||
@@ -655,23 +667,23 @@ function SessionsSidebar() {
|
||||
// of the logo, carrying its real shortcut: ⌘G jumps to
|
||||
// the graph view (keyboard-shortcuts routes it to "/",
|
||||
// the same destination as this logo).
|
||||
label="Home"
|
||||
label={t("Home")}
|
||||
action="jump-graph"
|
||||
side="right"
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="Home"
|
||||
aria-label={t("Home")}
|
||||
className="lh-no-drag flex size-9 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
|
||||
>
|
||||
<LhMark className="size-6" />
|
||||
</Link>
|
||||
</Hint>
|
||||
<Hint label="Close sidebar" action="toggle-sidebar">
|
||||
<Hint label={t("Close sidebar")} action="toggle-sidebar">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Close sidebar"
|
||||
aria-label={t("Close sidebar")}
|
||||
onClick={toggle}
|
||||
className="lh-no-drag"
|
||||
>
|
||||
@@ -692,8 +704,7 @@ function SessionsSidebar() {
|
||||
className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<PlusIcon className="size-3" />
|
||||
Teaching
|
||||
<span className="sr-only">create a new teaching session</span>
|
||||
{t("Teaching")}<span className="sr-only">{t("create a new teaching session")}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -702,14 +713,13 @@ function SessionsSidebar() {
|
||||
className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<DumbbellIcon className="size-3" />
|
||||
Practice
|
||||
<span className="sr-only">create a new practice session</span>
|
||||
{t("Practice")}<span className="sr-only">{t("create a new practice session")}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mx-3 mb-2 flex items-center gap-2">
|
||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
|
||||
<Hint label="Search sessions" action="sessions-search" side="bottom">
|
||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">{t("Sessions")}</span>
|
||||
<Hint label={t("Search sessions")} action="sessions-search" side="bottom">
|
||||
<span className="relative flex-1">
|
||||
<Input
|
||||
ref={searchRef}
|
||||
@@ -759,8 +769,8 @@ function SessionsSidebar() {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
placeholder="Search…"
|
||||
aria-label="Search sessions"
|
||||
placeholder={t("Search…")}
|
||||
aria-label={t("Search sessions")}
|
||||
className="h-6 rounded-sm border-border bg-background pl-6 text-xs placeholder:text-muted-foreground/60"
|
||||
/>
|
||||
<SearchIcon className="pointer-events-none absolute left-1.5 top-1/2 size-3 -translate-y-1/2 text-muted-foreground/70" />
|
||||
@@ -789,17 +799,17 @@ function SessionsSidebar() {
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{f === "teach" ? "Teaching" : f === "all" ? "All" : "Practice"}
|
||||
{f === "teach" ? t("Teaching") : f === "all" ? t("All") : t("Practice")}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div ref={listRef} className="flex-1 overflow-y-auto p-2">
|
||||
{shown === null ? (
|
||||
<div className="px-2 py-4 text-xs text-muted-foreground">Loading…</div>
|
||||
<div className="px-2 py-4 text-xs text-muted-foreground">{t("Loading…")}</div>
|
||||
) : shown.length === 0 ? (
|
||||
<div className="px-2 py-4 text-xs text-muted-foreground">
|
||||
{query.trim() ? "No sessions match." : "No sessions yet."}
|
||||
{query.trim() ? t("No sessions match.") : t("No sessions yet.")}
|
||||
</div>
|
||||
) : (
|
||||
shown.map((c, i) =>
|
||||
@@ -838,7 +848,7 @@ function SessionsSidebar() {
|
||||
New session — quiet, bottom-pinned, opens the centered
|
||||
dialog (also mod+, in the keyboard registry). */}
|
||||
<div className="px-3 pb-3 pt-1">
|
||||
<Hint label="Settings" action="open-settings" side="right">
|
||||
<Hint label={t("Settings")} action="open-settings" side="right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openSettings()}
|
||||
@@ -846,8 +856,7 @@ function SessionsSidebar() {
|
||||
className="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<SettingsIcon className="size-3" />
|
||||
Settings
|
||||
</button>
|
||||
{t("Settings")}</button>
|
||||
</Hint>
|
||||
</div>
|
||||
</div>
|
||||
@@ -878,8 +887,7 @@ function SessionsSidebar() {
|
||||
}}
|
||||
className="flex items-center rounded-lg px-2.5 py-1.5 text-left text-foreground transition-colors hover:bg-accent"
|
||||
>
|
||||
Rename
|
||||
</button>
|
||||
{t("Rename")}</button>
|
||||
{/* Export as Markdown (owner, release polish 2026-10-06): the
|
||||
session-markdown engine's user-facing debut — same-origin
|
||||
anchor download; the route's Content-Disposition names the
|
||||
@@ -900,8 +908,7 @@ function SessionsSidebar() {
|
||||
}}
|
||||
className="flex items-center rounded-lg px-2.5 py-1.5 text-left text-foreground transition-colors hover:bg-accent"
|
||||
>
|
||||
Export as Markdown…
|
||||
</button>
|
||||
{t("Export as Markdown…")}</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="ctx-delete"
|
||||
@@ -912,8 +919,7 @@ function SessionsSidebar() {
|
||||
}}
|
||||
className="flex items-center rounded-lg px-2.5 py-1.5 text-left text-muted-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Delete…
|
||||
</button>
|
||||
{t("Delete…")}</button>
|
||||
<div className="my-0.5 border-t border-border/60" aria-hidden="true" />
|
||||
<CoverageMenuBlock chatId={ctxChatId} />
|
||||
</MenuShell>
|
||||
|
||||
+40
-37
@@ -1,10 +1,17 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
import { contextWindow, sessionCost, turnCost, type ChatSettings, type TurnUsage } from "@/src/core";
|
||||
import { formatTokens, formatUsd, prettyModel } from "@/components/usage-format";
|
||||
import { subscriptionLabels, subscriptionLabel, type Language, type SessionPricing, type TurnUsage } from "@/src/core";
|
||||
import { formatTokens, formatUsd, planCostLabel, prettyModel } from "@/components/usage-format";
|
||||
import { ModelControl, catalogLimits, useModelCatalog } from "@/components/model-picker";
|
||||
|
||||
export function formatContextMeasurement(tokens: number | null, limit: number | null, language: Language = "en"): string {
|
||||
const numerator = tokens === null ? "?" : formatTokens(tokens, language);
|
||||
return limit === null ? numerator : `${numerator} / ${formatTokens(limit, language)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* The below-composer stats bar (wave 4 observability): the session's
|
||||
* money/context footprint as one quiet row beneath the composer —
|
||||
@@ -16,23 +23,23 @@ import { ModelControl, catalogLimits, useModelCatalog } from "@/components/model
|
||||
* there died with the injection; a "— · —" summary over an empty
|
||||
* popover is pure noise) — the dictation strip's middle simply widens.
|
||||
*
|
||||
* All folds come from core/prices.ts (sessionCost, contextWindow, turnCost)
|
||||
* — no cost math lives here. Absent data renders "—", never zero (the
|
||||
* doctrine): no turns yet → every figure is "—"; turns the price table
|
||||
* can't price count as unpriced, shown in the popover, never folded into
|
||||
* a fake $0. The RIGHT side is the model + thinking control (components/
|
||||
* model-picker.tsx): one controller for the conversation agents, backed by
|
||||
* pi-ai's catalog; the buttons show the EFFECTIVE model (the record's
|
||||
* settings, else config's pin), while the left-side figures still fold the
|
||||
* turn log's actual billed models.
|
||||
* Spending arrives already priced by the server through Pi's catalog and
|
||||
* calculator. Missing cost stays "—", never fake zero. Context is a separate
|
||||
* completed-conversation measurement, never a money-log/summarizer fold or
|
||||
* transcript estimate. Its catalog denominator follows the selected model;
|
||||
* model changes preserve the numerator. Successful compaction clears it to ?.
|
||||
*/
|
||||
export function StatsBar({
|
||||
turns,
|
||||
contextTokens = null,
|
||||
pricing,
|
||||
dictationSlot,
|
||||
chatId,
|
||||
leadingSlot,
|
||||
}: {
|
||||
turns: TurnUsage[];
|
||||
contextTokens?: number | null;
|
||||
pricing?: SessionPricing;
|
||||
/** The bound session (per-session models, owner 2026-09-28): present
|
||||
* on the in-session bar — the model control binds THE SESSION'S own
|
||||
* record; absent on the draft surfaces, where it binds the strong
|
||||
@@ -48,7 +55,9 @@ export function StatsBar({
|
||||
* data (which renders nothing pre-chat on that surface). */
|
||||
leadingSlot?: ReactNode;
|
||||
}) {
|
||||
const { t, language } = useI18n();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedModel, setSelectedModel] = useState<string | undefined>();
|
||||
// Same dropdown discipline as the model control (owner, df4433f treatment,
|
||||
// stats round 1): close on any pointerdown outside the bar or on Escape.
|
||||
const barRef = useRef<HTMLDivElement>(null);
|
||||
@@ -73,22 +82,18 @@ export function StatsBar({
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
// The live-limits join (context-meter amendment, owner 2026-09-23):
|
||||
// contextWindow's denominator resolves ONLY from pi's live catalog —
|
||||
// built client-side over the picker's cached /api/models fetch (the
|
||||
// same fetch ModelControl below rides; module-level dedupe). Catalog
|
||||
// pending or failed → undefined index → limit null → USAGE-ONLY (the
|
||||
// honest-render precedent, never a fake window); the usage-only render
|
||||
// IS the null path.
|
||||
// Catalog-only denominator; the picker reports its effective selection.
|
||||
// Missing/pending catalog means usage-only, never a hardcoded maximum.
|
||||
const { catalog } = useModelCatalog();
|
||||
const limits = useMemo(() => (catalog ? catalogLimits(catalog) : undefined), [catalog]);
|
||||
const ctx = contextWindow({ turns }, limits);
|
||||
const { cost, unpriced, subscription = 0 } = sessionCost({ turns });
|
||||
const limit = selectedModel ? limits?.get(selectedModel) ?? null : null;
|
||||
const contextLabel = formatContextMeasurement(contextTokens, limit, language);
|
||||
const { cost = 0, unpriced = turns.length, subscription = 0 } = pricing ?? {};
|
||||
// Honest cost: show dollars only when at least one turn priced;
|
||||
// otherwise "—" (never a fake $0.0000).
|
||||
const pricedCount = turns.length - unpriced - subscription;
|
||||
const costLabel = subscription ? (pricedCount > 0 ? `${formatUsd(cost)} API + ChatGPT plan` : "ChatGPT plan") : pricedCount > 0 ? formatUsd(cost) : "—";
|
||||
const lastModel = turns.at(-1)?.model;
|
||||
const providers = pricing?.subscriptionProviders ?? subscriptionLabels(turns.map((turn) => turn.model));
|
||||
const costLabel = planCostLabel(pricedCount > 0 ? cost : null, providers, (value) => formatUsd(value, language));
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -110,7 +115,7 @@ export function StatsBar({
|
||||
{leadingSlot}
|
||||
{/* The left side: the session-data summary — only once a session
|
||||
exists (turns). Pre-chat renders nothing (see the header). */}
|
||||
{turns.length > 0 && (
|
||||
{(chatId || turns.length > 0) && (
|
||||
<div ref={barRef} className="relative">
|
||||
{/* No tooltip — the numbers describe themselves and the popover
|
||||
speaks on click (owner, subtlety round 2026-09-25). */}
|
||||
@@ -122,7 +127,7 @@ export function StatsBar({
|
||||
className="flex items-center gap-1.5 tabular-nums transition-colors hover:text-foreground"
|
||||
>
|
||||
<span data-testid="stats-context">
|
||||
{ctx ? (ctx.limit !== null ? `${formatTokens(ctx.usedTokens)} / ${formatTokens(ctx.limit)}` : formatTokens(ctx.usedTokens)) : "—"}
|
||||
{contextLabel}
|
||||
</span>
|
||||
<span aria-hidden>·</span>
|
||||
<span data-testid="stats-cost">{costLabel}</span>
|
||||
@@ -133,23 +138,22 @@ export function StatsBar({
|
||||
className="absolute bottom-full left-1/2 z-40 mb-1.5 w-72 -translate-x-1/2 rounded-xl border bg-card p-3 text-xs shadow-xl"
|
||||
>
|
||||
<div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Session stats
|
||||
</div>
|
||||
{t("Session stats")}</div>
|
||||
<div className="flex flex-col gap-1 text-muted-foreground">
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Context (last call)</span>
|
||||
<span>{t("Context (last call)")}</span>
|
||||
<span className="tabular-nums text-card-foreground">
|
||||
{ctx ? (ctx.limit !== null ? `${formatTokens(ctx.usedTokens)} / ${formatTokens(ctx.limit)}` : formatTokens(ctx.usedTokens)) : "—"}
|
||||
{contextLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>{subscription ? "Usage" : "Total cost"}</span>
|
||||
<span>{subscription ? t("Usage") : t("Total cost")}</span>
|
||||
<span className="tabular-nums text-card-foreground">{costLabel}</span>
|
||||
</div>
|
||||
{subscription > 0 && <a href="https://chatgpt.com/settings/usage" target="_blank" rel="noreferrer" className="underline underline-offset-2">Manage ChatGPT usage</a>}
|
||||
{providers.includes("ChatGPT") && <a href="https://chatgpt.com/settings/usage" target="_blank" rel="noreferrer" className="underline underline-offset-2">{t("Manage ChatGPT usage")}</a>}
|
||||
{unpriced > 0 && (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Unpriced turns</span>
|
||||
<span>{t("Unpriced turns")}</span>
|
||||
<span className="tabular-nums text-card-foreground">{unpriced}</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -157,19 +161,18 @@ export function StatsBar({
|
||||
{turns.length > 0 && (
|
||||
<>
|
||||
<div className="mb-1 mt-2.5 border-t pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Turns
|
||||
</div>
|
||||
{t("Turns")}</div>
|
||||
<ul className="flex max-h-56 flex-col gap-1 overflow-y-auto">
|
||||
{turns.map((turn, i) => {
|
||||
const c = turnCost(turn);
|
||||
const c = pricing?.turnCosts[turn.id] ?? null;
|
||||
return (
|
||||
<li key={`${turn.messageId}-${i}`} className="flex items-center justify-between gap-2">
|
||||
<span className="truncate text-muted-foreground">
|
||||
#{i + 1} · {prettyModel(turn.model, true)}
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-2 tabular-nums text-card-foreground">
|
||||
<span className="text-muted-foreground">{turn.steps.length} steps</span>
|
||||
<span>{turn.model.startsWith("chatgpt:") ? "ChatGPT plan" : c === null ? "—" : formatUsd(c)}</span>
|
||||
<span className="text-muted-foreground">{turn.steps.length}{" "}{t("steps")}</span>
|
||||
<span>{subscriptionLabel(turn.model) ?? (c === null ? "—" : formatUsd(c, language))}</span>
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
@@ -190,7 +193,7 @@ export function StatsBar({
|
||||
{/* The model + thinking control — one controller for the conversation
|
||||
agents (prober/teacher); the record's `turns` above still folds
|
||||
the ACTUAL models billed, regardless of what the picker says. */}
|
||||
<ModelControl chatId={chatId} />
|
||||
<ModelControl chatId={chatId} onModelChange={setSelectedModel} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { ChevronDownIcon } from "lucide-react";
|
||||
@@ -83,6 +85,7 @@ export function ThinkingBlock({
|
||||
/** On the card's own background: no band (the accent read too light). */
|
||||
inCard?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [open, setOpen] = useState(() => resolveUserThinkingOpen(defaultOpen));
|
||||
// ⌘T: an explicit global set overrides every row (once set, rows re-sync).
|
||||
const syncedRef = useRef(false);
|
||||
@@ -123,7 +126,7 @@ export function ThinkingBlock({
|
||||
aria-expanded={open}
|
||||
className="flex w-full items-center gap-2 font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
{label}
|
||||
{t(label)}
|
||||
<ChevronDownIcon className={cn("size-4 shrink-0 transition-transform", open ? "rotate-180" : "rotate-0")} />
|
||||
</button>
|
||||
{open && (
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
import * as React from "react"
|
||||
import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
|
||||
import { bindingForAction, formatBinding, type KeyAction } from "@/src/core"
|
||||
@@ -44,11 +46,12 @@ export function hintText(label: string, action?: KeyAction, binding?: string): s
|
||||
}
|
||||
|
||||
export function Hint({ label, action, binding, side = "top", children }: HintProps) {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
||||
<TooltipContent side={side}>{hintText(label, action, binding)}</TooltipContent>
|
||||
<TooltipContent side={side}>{hintText(t(label), action, binding)}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
"use client";
|
||||
import { useI18n } from "@/components/i18n";
|
||||
|
||||
|
||||
/**
|
||||
* The auto-update banner (Wave C, owner 2026-10-10: silent download +
|
||||
@@ -19,6 +21,7 @@ import { useEffect, useState } from "react";
|
||||
type UpdateStatus = { status: string; version: string | null };
|
||||
|
||||
export default function UpdateBanner() {
|
||||
const { t } = useI18n();
|
||||
const [ready, setReady] = useState<UpdateStatus | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -35,16 +38,15 @@ export default function UpdateBanner() {
|
||||
className="fixed right-4 bottom-4 z-50 flex items-center gap-3 rounded-lg border border-border bg-popover px-4 py-3 shadow-lg"
|
||||
>
|
||||
<div className="text-sm">
|
||||
<span className="font-medium">LearnHarness {ready.version ?? "update"} is ready</span>
|
||||
<span className="text-muted-foreground"> — restart to finish installing.</span>
|
||||
<span className="font-medium">LearnHarness {ready.version ?? "update"}{" "}{t("is ready")}</span>
|
||||
<span className="text-muted-foreground"> {" "}{t("— restart to finish installing.")}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => window.lh?.installUpdate?.()}
|
||||
className="rounded-md bg-accent px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent/80"
|
||||
>
|
||||
Restart
|
||||
</button>
|
||||
{t("Restart")}</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,23 @@
|
||||
import { localeTag, type Language } from "@/src/core";
|
||||
/**
|
||||
* Money/token presentation helpers (wave-4 observability UI) — shared by the
|
||||
* activity dock and the stats bar. Pure; exported for tests.
|
||||
*/
|
||||
|
||||
/** USD for cent-scale money: >= $1 keeps two decimals, smaller keeps four. */
|
||||
export function formatUsd(c: number): string {
|
||||
export function formatUsd(c: number, language: Language = "en"): string {
|
||||
if (language === "ru") return `${new Intl.NumberFormat(localeTag(language), { minimumFractionDigits: c >= 1 ? 2 : 4, maximumFractionDigits: c >= 1 ? 2 : 4 }).format(c)} $`;
|
||||
return c >= 1 ? `$${c.toFixed(2)}` : `$${c.toFixed(4)}`;
|
||||
}
|
||||
|
||||
export function planCostLabel(dollars: number | null, subscription: boolean, format = formatUsd): string {
|
||||
if (subscription) return dollars === null ? "ChatGPT plan" : `${format(dollars)} API + ChatGPT plan`;
|
||||
return dollars === null ? "—" : format(dollars);
|
||||
export function planCostLabel(dollars: number | null, subscription: boolean | string | readonly string[] | undefined, format = formatUsd): string {
|
||||
const labels = subscription === true ? ["ChatGPT"] : typeof subscription === "string" ? [subscription] : Array.isArray(subscription) ? [...new Set(subscription)] : [];
|
||||
return [...(dollars === null ? [] : [format(dollars)]), ...labels].join(" + ") || "—";
|
||||
}
|
||||
|
||||
/** 38000 → "38k", 1234567 → "1.2M" — trimmed, never "38.0k". */
|
||||
export function formatTokens(n: number): string {
|
||||
export function formatTokens(n: number, language: Language = "en"): string {
|
||||
if (language === "ru") return new Intl.NumberFormat("ru-RU", { notation: "compact", maximumFractionDigits: 1 }).format(n);
|
||||
if (n >= 1e6) return `${+(n / 1e6).toFixed(1)}M`;
|
||||
if (n >= 1e3) return `${+(n / 1e3).toFixed(1)}k`;
|
||||
return String(n);
|
||||
|
||||
+10
-2
@@ -399,7 +399,7 @@ Practice turns the graph into problem sets the learner reasons through out loud.
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph DESKTOP["Electron app (production)"]
|
||||
MAIN["Electron main (electron/main.cjs)<br/>thin launcher + security guard<br/>1 IPC channel: lh:expand-window"] -->|"spawn: ELECTRON_RUN_AS_NODE,<br/>loopback port, LH_DATA_DIR=userData/data"| NEXT["standalone Next server (child)<br/>ALL app logic: turns · extraction · jobs · graph"]
|
||||
MAIN["Electron main (electron/main.cjs)<br/>launcher + credential/security owner<br/>origin-pinned controls · private child IPC"] -->|"spawn: ELECTRON_RUN_AS_NODE,<br/>loopback port, LH_DATA_DIR=userData/data"| NEXT["standalone Next server (child)<br/>ALL app logic: turns · extraction · jobs · graph"]
|
||||
MAIN -->|"loadURL, sandboxed renderer"| REND["Browser renderer (components/)<br/>fetch/WebSocket to own origin only"]
|
||||
end
|
||||
subgraph OUTSIDE["outside the process"]
|
||||
@@ -417,10 +417,18 @@ flowchart LR
|
||||
REND -->|"fetch /api/*"| NEXT
|
||||
```
|
||||
|
||||
The Electron main is a launcher + security guard, never a host for app logic: single-instance lock, deny-by-default permissions, origin-pinned navigation, sandboxed renderer. All Next.js code runs unchanged in a child process (`output: "standalone"`), relocated by the `LH_DATA_DIR` seam (also the test seam — `data-dir-seam.test.ts` covers it, including a fresh-child-process case). The build hard-fails if repo `data/` would leak into the bundle or if prompt assets fall out of the trace (`scripts/build-server.mjs`).
|
||||
The Electron main is a launcher + credential/security guard, never a host for teaching or inference logic: single-instance lock, deny-by-default permissions, origin-pinned navigation, sandboxed renderer. All Next.js code runs unchanged in a child process (`output: "standalone"`), relocated by the `LH_DATA_DIR` seam (also the test seam — `data-dir-seam.test.ts` covers it, including a fresh-child-process case). The build hard-fails if repo `data/` would leak into the bundle or if prompt assets fall out of the trace (`scripts/build-server.mjs`).
|
||||
|
||||
---
|
||||
|
||||
### 8.1 Subscription connection boundary
|
||||
|
||||
`electron/chatgpt.cjs` retains the existing verified-account ChatGPT authentication, storage and revocation behavior. `electron/subscriptions.cjs` delegates GitHub Copilot/Grok login and refresh to the installed Pi SDK through its public provider/Models interfaces. Their single saved connections live independently in owner-only, atomically written `github-copilot-credentials.json` / `xai-credentials.json` beside the existing app credential files. Electron main alone owns durable OAuth credentials and serialized refresh; no global Pi files or API-key credential precedence are involved.
|
||||
|
||||
The renderer gets projected status, public device user codes, prompts and controls over origin-pinned IPC. The privately launched server child receives credential-free catalogs and scoped request auth (including native headers/account endpoints), never refresh tokens. `src/agent/subscription-bridge.ts` rejects framework-only IPC and invalidates stale connection/catalog scopes. `subscription-stream.ts` dispatches directly through native providers, retaining native protocol identity on the wire and restoring logical app identity in assistant history. Persisted routes `chatgpt`, `github-copilot-subscription` and `xai-subscription` are distinct from ordinary API routes and never fall back to them.
|
||||
|
||||
`subscription-request-cycle.ts` is the shared admission/automatic-input recovery state machine; the old ChatGPT module is its compatibility export. Background consent is independent per provider, default ON, with foreground-preserving cancellation and queue ownership retained on no-dispatch. Native usage rejected before dispatch is transiently excluded from helper usage collectors, without adding persisted provenance fields. Catalogs and read-time pricing preserve the selected connection: subscription use displays compact provider labels, API dollars remain dollars, and mixed usage joins both without estimating subscription dollars or claiming detected tiers/allowances.
|
||||
|
||||
## 9. The foundational invariants — what ALWAYS holds
|
||||
|
||||
### Tier A — machine-enforced (`eslint.config.mjs`; lint fails the build)
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
# Compaction and usage accounting
|
||||
|
||||
## Retention
|
||||
|
||||
`src/core/compaction.ts` locally ports the cutoff-selection behavior and relevant
|
||||
message-size heuristic from **@earendil-works/pi-coding-agent 1.4.0**. There is no
|
||||
coding-agent dependency. Upgrade this port deliberately; the native golden
|
||||
fixtures are in `tests/compaction-native-parity.test.ts`.
|
||||
|
||||
Walk backward to the approximately 20,000-token retained-tail budget, then select
|
||||
the nearest valid user/assistant boundary at or after the crossing. Never start
|
||||
at a tool result. If trailing results alone exceed the budget, keep the preceding
|
||||
assistant call. Preserve adjacent context-invisible metadata. LearnHarness adapts
|
||||
its visible custom markers to user-like entries, excludes UI-only markers, and
|
||||
uses the active compaction's retained history rather than discarded messages.
|
||||
|
||||
Text, visible thinking, tool-call names/arguments use characters divided by four;
|
||||
images receive the native fixed 1,200-token allowance. Encrypted signatures are
|
||||
not measured or stripped. Whole-message boundaries can overshoot. This does
|
||||
**not** guarantee a measured 20k tail or a fixed post-compaction request size.
|
||||
|
||||
Only cutoff selection is ported. LearnHarness retains its educational summary
|
||||
prompt, plan continuity, persistence, threshold, scheduling, and authorization
|
||||
lifecycle. It does not adopt Pi's coding summary or separate split-turn summary
|
||||
calls. A cut that drops no active history does not launch a summarizer.
|
||||
|
||||
## Conversation meter
|
||||
|
||||
The numerator is the latest qualifying completed conversation response's native
|
||||
Pi `input + output + cacheRead + cacheWrite`. Reasoning is already inside output;
|
||||
`totalTokens` is not an override. Partial stream updates, errors, aborts, invalid
|
||||
counts, and all-zero usage do not replace the last measurement. A successful
|
||||
compaction marker invalidates earlier measurements: show `? / maximum` until a
|
||||
new qualifying response completes. Summarizer usage never supplies this meter.
|
||||
|
||||
The denominator follows the selected model's catalog limit, independently of the
|
||||
last numeric measurement. Changing models preserves that numerator. No catalog
|
||||
limit means no invented denominator; no percentage display is added.
|
||||
|
||||
## Spending
|
||||
|
||||
`src/server/pricing.ts` uses Pi AI's full, key-independent catalog and public
|
||||
`calculateCost` on a new usage object. The browser receives derived costs, not a
|
||||
second calculator/rate table. Totals are estimates using the currently shipped
|
||||
catalog, not provider invoices; catalog updates can reprice history.
|
||||
|
||||
Saved input is Pi-normalized **fresh input**, disjoint from cache buckets. Never
|
||||
subtract cached reads from it again or migrate old logs as raw inclusive prompt
|
||||
tokens. New captures preserve the one-hour subset of cache writes and individual
|
||||
background-job calls. Older write-bearing records with a lost retention split,
|
||||
and tier-priced multi-call jobs with only aggregate usage, remain unpriced when
|
||||
the lost detail can change the answer. They are not reconstructed from totals.
|
||||
Flat-rate historical jobs with sufficient counts remain priceable. Missing models
|
||||
or required usage stay unpriced; ChatGPT subscriptions remain plan usage, not
|
||||
API dollars. Summarizer costs continue to count toward session spending.
|
||||
|
||||
## Upstream attribution
|
||||
|
||||
The cutoff/estimator port adapts MIT-licensed code from
|
||||
`@earendil-works/pi-coding-agent` 1.4.0, author Mario Zechner (published package
|
||||
metadata). The inspected `dist/core/compaction/compaction.js` SHA-256 is
|
||||
`f51e78ef1da66b5803fc91e185f07b968f8f989ab9326b7744958416aad3f6f6`.
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) Mario Zechner
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
@@ -1,5 +1,8 @@
|
||||
# Desktop builds and releases
|
||||
|
||||
For this fork’s Linux and Windows 0.5.1 release on Gitea, see [Gitea releases](gitea-release.md).
|
||||
The three-platform GitHub process below documents the upstream reference.
|
||||
|
||||
## Platforms
|
||||
|
||||
| Platform | Build runner | Packages | In-app update |
|
||||
|
||||
+5
-2
@@ -30,7 +30,6 @@ npm run desktop:dist # local signed/notarized macOS arm64 build (LH_NOTARY key
|
||||
npx tsx --env-file=.env.local scripts/import-notes.ts <dir> # bulk-import notes → graph
|
||||
npx tsx --env-file=.env.local scripts/backfill-graph.ts # wipe + re-extract every chat
|
||||
npx tsx --env-file=.env.local scripts/replay-layout.ts # re-derive layout from the ledgers
|
||||
npx tsx scripts/sync-pricing.ts # regenerate core/prices.ts tables
|
||||
```
|
||||
|
||||
For Windows/Linux packages and the three-OS CI/release flow, see [`desktop-release.md`](desktop-release.md). Native renderer binaries are traced per platform, so release builds run on the target OS, not as cross-builds from macOS.
|
||||
@@ -144,7 +143,7 @@ src/
|
||||
electron/ desktop launcher + security guard (spawns the standalone
|
||||
server; 1 IPC channel; LH_DATA_DIR + BYOK env)
|
||||
scripts/ build-server.mjs (packaging guards), import-notes,
|
||||
backfill-graph, replay-layout, sync-pricing
|
||||
backfill-graph, replay-layout
|
||||
data/ chats/ · graph/ (nodes/chains/sessions/coverage
|
||||
ledgers + positions/sources/render-settings maps) ·
|
||||
jobs/ · settings.json — runtime state, git-ignored
|
||||
@@ -152,6 +151,10 @@ data/ chats/ · graph/ (nodes/chains/sessions/coverage
|
||||
|
||||
## Key mechanisms
|
||||
|
||||
See [compaction and accounting](compaction-accounting.md) for the local Pi cutoff port,
|
||||
measurement-only context meter, and server-side current-catalog pricing. There is no
|
||||
pricing-generation step: Pi AI's catalog and public calculator are the authority.
|
||||
|
||||
**Client-side question tools.** `quiz` and `ask_user_question` have no server `execute`: the tool call streams to the browser, the learner answers in the dock, the client grades via `question-core` and returns the verdict with `addToolOutput` — which fires the SDK continuation so the teacher resumes mid-turn. Options are shuffled deterministically (seeded by toolCallId) so server and client renders match. A pending quiz persisted in the chat record is exactly what makes **resume mid-question free**.
|
||||
|
||||
**The formal plan tree (author-once).** The teacher authors the session's dependency tree with one schema-validated tool — `plan_init`, whose mermaid-subset input is parsed deterministically (line-numbered errors) and validated as a DAG. The tree persists in the chat record; progress is never mutated — `current`/`visited`/upcoming are **derived** from tagged quiz calls in the transcript, and the panel renders that derivation.
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
# Gitea releases for this fork
|
||||
|
||||
The release destination is
|
||||
https://server2.sorokin-oleg-edu.xyz/replicated/learnharness.
|
||||
Version **0.5.1 targets Linux x64 and Windows x64**, with each platform built
|
||||
and verified on its native operating system. The upstream GitHub workflow and three-platform packaging
|
||||
configuration remain available as reference in `.github/workflows/release.yml`
|
||||
and `electron-builder.yml`.
|
||||
|
||||
Official fork packages use `electron-builder.gitea.yml`, which inherits the
|
||||
upstream packaging and replaces its update origin with:
|
||||
|
||||
```
|
||||
https://server2.sorokin-oleg-edu.xyz/replicated/learnharness/releases/download/latest
|
||||
```
|
||||
|
||||
Gitea's `latest` alias resolves the most recent published, non-prerelease release.
|
||||
Drafts do not become updates. The repository and published downloads must be
|
||||
public; no API credential is embedded in the application.
|
||||
|
||||
## Preparing Linux packages
|
||||
|
||||
Use Node **26**, matching upstream's release gates. Build from a clean checkout
|
||||
of the intended release commit. Keep `.env*`, local keys, and application data out
|
||||
of the build directory. Next can copy loaded environment files after tracing;
|
||||
`build-server.mjs` refuses a payload containing them. A clean worktree avoids
|
||||
loading these files in the first place.
|
||||
|
||||
```sh
|
||||
npm ci
|
||||
npm run typecheck
|
||||
npm test
|
||||
npm run lint
|
||||
ELECTRON_RUN_AS_NODE=1 npx electron --import tsx --test tests/pdf-native-render.test.ts tests/pdf-ops.test.ts tests/svg-native-render.test.ts tests/browser-service.test.ts
|
||||
npm run desktop:release:linux
|
||||
```
|
||||
|
||||
The release script builds the standalone server, initializes providers offline,
|
||||
curates the payload, boots it under Electron's bundled Node, packages AppImage
|
||||
and Debian installers, checks the packaged Gitea updater configuration, creates SHA-256 checksums, and verifies update metadata
|
||||
against the actual installer bytes.
|
||||
|
||||
Run the packaged-runtime gates too:
|
||||
|
||||
```sh
|
||||
node scripts/smoke-provider-runtime.mjs --standalone dist/linux-unpacked/resources/server/standalone
|
||||
node scripts/smoke-provider-runtime.mjs --standalone dist/linux-unpacked/resources/server/standalone --runtime dist/linux-unpacked/learnharness
|
||||
xvfb-run -a node scripts/smoke-demo-runtime.mjs --standalone dist/linux-unpacked/resources/server/standalone --runtime dist/linux-unpacked/learnharness --browser
|
||||
```
|
||||
|
||||
The Linux portion of 0.5.1 has these attachments:
|
||||
|
||||
- `LearnHarness-0.5.1-x86_64.AppImage`
|
||||
- `LearnHarness-0.5.1-amd64.deb`
|
||||
- `latest-linux.yml`
|
||||
- `SHA256SUMS`
|
||||
|
||||
## Preparing Windows packages
|
||||
|
||||
Use a clean checkout of the same `v0.5.1` tag on Windows x64 with Node 26 and Git
|
||||
for Windows. Keep build tools and logs outside the checkout. The Windows
|
||||
release checkout is `~/Documents/Gitea/learnharness-release-0.5.1`, linked to the
|
||||
existing repository in `~/Documents/Gitea/learnharness`.
|
||||
|
||||
In PowerShell, stop after any failed command:
|
||||
|
||||
```powershell
|
||||
npm.cmd ci
|
||||
$env:NODE_ENV = 'test'
|
||||
$env:ELECTRON_RUN_AS_NODE = '1'
|
||||
node node_modules/electron/cli.js --import tsx --test tests/pdf-native-render.test.ts tests/pdf-ops.test.ts tests/svg-native-render.test.ts tests/browser-service.test.ts
|
||||
Remove-Item Env:ELECTRON_RUN_AS_NODE
|
||||
node --import tsx --test tests/i18n.test.tsx
|
||||
Remove-Item Env:NODE_ENV
|
||||
node node_modules/next/dist/bin/next build
|
||||
node scripts/smoke-provider-runtime.mjs
|
||||
node scripts/build-server.mjs
|
||||
node scripts/smoke-server.mjs --electron
|
||||
node node_modules/electron-builder/out/cli/cli.js --config electron-builder.gitea.yml --win --x64 --publish never
|
||||
node scripts/gitea-release.mjs verify-package dist/win-unpacked
|
||||
node scripts/smoke-provider-runtime.mjs --standalone dist/win-unpacked/resources/server/standalone
|
||||
node scripts/smoke-provider-runtime.mjs --standalone dist/win-unpacked/resources/server/standalone --runtime dist/win-unpacked/LearnHarness.exe
|
||||
node scripts/smoke-demo-runtime.mjs --standalone dist/win-unpacked/resources/server/standalone --runtime dist/win-unpacked/LearnHarness.exe --browser
|
||||
```
|
||||
|
||||
Windows contributes three attachments:
|
||||
|
||||
- `LearnHarness-0.5.1-x64-setup.exe`
|
||||
- `LearnHarness-0.5.1-x64-setup.exe.blockmap`
|
||||
- `latest.yml`
|
||||
|
||||
The combined release has **seven attachments**, including one `SHA256SUMS`
|
||||
covering all six other files. Verify that `latest.yml` names the Windows
|
||||
installer exactly, reports version `0.5.1`, and matches the installer's actual
|
||||
size and SHA-512. Its gzip blockmap must cover the installer and match every
|
||||
block checksum. Confirm the packaged `resources/app-update.yml` uses the Gitea
|
||||
generic provider. Windows builds follow upstream's unsigned, per-user installer
|
||||
configuration.
|
||||
|
||||
## Preparing a Linux-only Gitea draft
|
||||
|
||||
Commit and push the release source, then push its exact annotated tag:
|
||||
|
||||
```sh
|
||||
git tag -a v0.5.1 -m 'LearnHarness 0.5.1'
|
||||
git push gitea main v0.5.1
|
||||
```
|
||||
|
||||
Supply `GITEA_TOKEN` only to the upload command. A token file may remain outside
|
||||
the clean build checkout:
|
||||
|
||||
```sh
|
||||
node --env-file=/path/to/private/release.env scripts/gitea-release.mjs upload dist
|
||||
```
|
||||
|
||||
The tool requires the tag to exist in Gitea, creates or reuses one draft at that
|
||||
tag, uploads missing assets, and downloads every attachment to verify its actual
|
||||
SHA-256 against the local verified build. Existing mismatched attachments and
|
||||
published releases are refused. It never publishes or changes repository
|
||||
visibility. Release notes come from `docs/release-0.5.1.md`.
|
||||
|
||||
This uploader and its remote verifier enforce a **Linux-only** inventory. They
|
||||
will refuse a combined Linux/Windows draft. For the combined 0.5.1 release, add
|
||||
the verified Windows attachments to the existing draft and replace `SHA256SUMS`
|
||||
with the combined manifest. Keep the Linux installers and feed unchanged. Check
|
||||
all seven attachment names, sizes, and actual downloaded hashes against the
|
||||
verified local builds; update the bilingual release notes to include Windows.
|
||||
Do not publish until both platforms' checks pass.
|
||||
|
||||
A separate verification can be repeated without changing the draft:
|
||||
|
||||
```sh
|
||||
node --env-file=/path/to/private/release.env scripts/gitea-release.mjs verify-remote dist
|
||||
```
|
||||
|
||||
Review the verified draft before publication. Only after publication will the
|
||||
public `latest` feed and in-app automatic updates expose this version.
|
||||
|
||||
## Gitea Actions
|
||||
|
||||
`.gitea/workflows/release.yml` provides the same Linux gates through a manual
|
||||
workflow with an existing release tag as input. It requires a native Linux x64
|
||||
runner labeled `ubuntu-24.04`, the label used by upstream's Linux release job,
|
||||
plus the native Electron dependencies and `xvfb-run`. There were no runners
|
||||
registered when 0.5.1 was prepared, so its packages are built locally. A tag push
|
||||
does not queue a job that cannot run.
|
||||
|
||||
The workflow uses the repository's ephemeral `GITEA_TOKEN` with release-write
|
||||
permission only in the final upload step. It checks out the requested tag without
|
||||
persisting credentials and leaves the result as a verified draft. Public pull
|
||||
requests cannot trigger this publishing workflow. This workflow remains
|
||||
Linux-only; the combined 0.5.1 draft was assembled from local native builds.
|
||||
Windows has its own standalone payload and smoke checks, as described above.
|
||||
@@ -0,0 +1,54 @@
|
||||
# Language support
|
||||
|
||||
LearnHarness supports English and Russian. Settings → General contains independent
|
||||
interface and speech recognition language selectors. The microphone also has a
|
||||
speech language selector. Each offers System default, English, and Русский.
|
||||
|
||||
System default uses the preferred browser language (the operating system's
|
||||
preferred language in the desktop app); Russian locales select Russian and other
|
||||
locales select English. Explicit choices persist in `settings.json` as
|
||||
`general.language` and `general.sttLanguage`. Removing a field restores automatic
|
||||
selection. Changing one preference preserves the other general settings.
|
||||
|
||||
The interface changes immediately, including accessibility labels and the desktop
|
||||
menu. New AI teaching, questions, plans, practice, graph descriptions, research,
|
||||
figures, and demos use the interface language. Existing conversations and imported
|
||||
source material retain their authored text. A session retains the language of its
|
||||
latest foreground turn so automatic follow-ups can use the same language after a
|
||||
restart; an explicit app language preference takes precedence.
|
||||
|
||||
Speech recognition uses Deepgram Nova-3 with an explicit `language=en` or
|
||||
`language=ru`. A recording captures the selected language when it starts and keeps
|
||||
that language through reconnections. The selector is disabled while recording;
|
||||
changes elsewhere take effect on the next recording. Audio capture, deferred
|
||||
transcript insertion, stopping, and cancellation retain their existing behavior.
|
||||
|
||||
## Maintaining translations
|
||||
|
||||
The pure localization functions live in `src/core/i18n.ts` and are exported through
|
||||
the core barrel. English and Russian catalogs are in `src/core/locales/en.json` and
|
||||
`ru.json`. English source phrases are message keys. Add every new app-owned message
|
||||
to both catalogs, use named interpolation parameters, and use plural entries with
|
||||
`Intl.PluralRules` for counts. Russian entries may use `one`, `few`, `many`, and
|
||||
`other` forms. Keep code, provider/model names, identifiers, and user-authored text
|
||||
out of translation lookups.
|
||||
|
||||
React components use `useI18n()` from `components/i18n.tsx`. The root provider gets
|
||||
server-resolved initial settings and locale to preserve hydration. General-setting
|
||||
writes share a serialized read-modify-write path; other surfaces use the existing
|
||||
settings-saved signal. Server and agent code receive an explicit language rather
|
||||
than depending on a mutable global translation state.
|
||||
|
||||
Some existing protocol errors arrive preformatted in English. Localization can
|
||||
recognize cataloged application templates at the display boundary, preserving the
|
||||
canonical error values used for classification and any third-party diagnostics.
|
||||
Raw technical instructions, code, and user overrides remain editable source data.
|
||||
|
||||
The desktop shell has its own small catalog in `electron/language.cjs`, packaged
|
||||
with the shell. Its narrow `lh:language` channel accepts only `en` and `ru` from a
|
||||
trusted application window. Russian prose uses Noto Sans because Source Sans 3
|
||||
has no Cyrillic subset. Explicit font choices continue to take precedence.
|
||||
|
||||
`tests/i18n.test.tsx` covers preference validation, automatic selection, independent
|
||||
STT requests, catalog parity and interpolation, Russian plural forms, SSR locale
|
||||
isolation, translated dialogs and exports, agent instructions, and native labels.
|
||||
@@ -0,0 +1,59 @@
|
||||
# LearnHarness 0.4.0
|
||||
|
||||
## English
|
||||
|
||||
LearnHarness now supports English and Russian throughout the interface and new
|
||||
AI learning content. Switch languages in **Settings → General**. The interface
|
||||
language and speech recognition language are independent and persist across
|
||||
restarts; System default follows the browser or operating system, using English
|
||||
for unsupported languages.
|
||||
|
||||
- Russian translations cover lessons, practice, the knowledge graph, setup,
|
||||
settings, dialogs, tooltips, accessibility labels, notifications, exports,
|
||||
desktop menus, and application error messages.
|
||||
- New teaching, questions, plans, practice, graph descriptions, research,
|
||||
diagrams, and interactive demos follow the interface language.
|
||||
- Choose English or Russian speech recognition next to the microphone or in
|
||||
General settings. A recording retains its language through reconnections;
|
||||
changing the preference affects the next recording.
|
||||
- Russian text uses a Cyrillic-capable reading font, correct plural forms,
|
||||
localized numbers, and filenames that preserve Cyrillic characters.
|
||||
- Language changes preserve other settings. Existing conversations and imported
|
||||
learning material retain their original text.
|
||||
|
||||
This Gitea release includes **Linux x64** AppImage and Debian packages and a
|
||||
**Windows x64** installer. Both platforms were built and checked on their native
|
||||
operating systems. Automatic updates use this fork's public Gitea releases.
|
||||
The Windows installer is unsigned, matching upstream's Windows packaging.
|
||||
|
||||
To use live dictation, configure a Deepgram key under **Settings → Providers**.
|
||||
To start AI sessions, connect an AI provider and select the required model tiers.
|
||||
|
||||
## Русский
|
||||
|
||||
LearnHarness теперь поддерживает английский и русский языки во всём интерфейсе
|
||||
и в новых учебных материалах, создаваемых ИИ. Язык можно выбрать в разделе
|
||||
**Настройки → Общие**. Язык интерфейса и язык распознавания речи выбираются
|
||||
независимо и сохраняются после перезапуска. В режиме «Язык системы» используется
|
||||
язык браузера или операционной системы; для неподдерживаемых языков — английский.
|
||||
|
||||
- Переведены занятия, практика, граф знаний, первоначальная настройка,
|
||||
параметры приложения, диалоги, подсказки, подписи для программ чтения с экрана,
|
||||
уведомления, экспорт, меню настольного приложения и сообщения об ошибках.
|
||||
- Новые объяснения, вопросы, планы, практические задачи, описания в графе,
|
||||
исследования, диаграммы и интерактивные демонстрации используют язык интерфейса.
|
||||
- Английский или русский язык распознавания речи можно выбрать рядом с микрофоном
|
||||
или в общих настройках. Запись сохраняет выбранный язык при восстановлении
|
||||
соединения; изменение настройки применяется к следующей записи.
|
||||
- Для русского текста добавлен шрифт с кириллицей, правильные формы множественного
|
||||
числа, локализованное отображение чисел и поддержка кириллицы в именах файлов.
|
||||
- Смена языка сохраняет остальные настройки. Существующие разговоры и
|
||||
импортированные учебные материалы остаются на исходном языке.
|
||||
|
||||
Этот выпуск в Gitea включает пакеты AppImage и Debian для **Linux x64** и
|
||||
установщик для **Windows x64**. Сборка и проверка каждой версии выполнены в её
|
||||
операционной системе. Автоматические обновления используют публичные выпуски
|
||||
этого форка в Gitea. Установщик Windows не подписан — как и в исходном проекте.
|
||||
|
||||
Для диктовки добавьте ключ Deepgram в разделе **Настройки → Провайдеры**.
|
||||
Для занятий с ИИ подключите провайдера и выберите модели для всех нужных уровней.
|
||||
@@ -0,0 +1,62 @@
|
||||
# LearnHarness 0.5.0
|
||||
|
||||
## English
|
||||
|
||||
This release adds ChatGPT Fast mode and improves the language controls and
|
||||
Russian settings layout introduced in 0.4.0.
|
||||
|
||||
- Interface-language and speech-recognition selectors in **Settings → General**,
|
||||
plus the quick selector beside the microphone, now use the app's styled menus.
|
||||
The menus include selected-item checkmarks and keyboard navigation; Escape
|
||||
closes the menu and restores focus to its trigger. Language preferences stay
|
||||
independent, and STT selection remains locked while recording.
|
||||
- **Quizzing** keeps its full Russian labels. The label and segmented control
|
||||
share a row when space permits. Narrower panels stack the control beneath the
|
||||
hint with matching left alignment and enough height for wrapped text.
|
||||
- **Settings → Agent** now has a **⚡ Fast** toggle for each Strong, Cheap, and
|
||||
Vision model tier. Fast mode is **off by default** and initially available only
|
||||
for **ChatGPT** connections. It requests priority processing and may consume
|
||||
more ChatGPT plan allowance; availability depends on the model and account.
|
||||
- Fast preferences take effect on the **next request**, including existing
|
||||
ChatGPT conversations and newly started background work in the corresponding
|
||||
tier. The selected model and reasoning effort are preserved. Selecting another
|
||||
provider turns Fast off for that tier; other providers show it as unavailable.
|
||||
- Unsupported Fast requests produce actionable, localized errors. Connections
|
||||
keep their existing account, background-consent, and no-API-key-fallback rules.
|
||||
|
||||
Packages: **Linux x64** AppImage and Debian, and a **Windows x64** installer.
|
||||
Both platforms use this fork's public Gitea releases for automatic updates.
|
||||
Windows packaging remains unsigned, matching upstream.
|
||||
|
||||
## Русский
|
||||
|
||||
В этом выпуске добавлен быстрый режим ChatGPT и улучшены языковые настройки
|
||||
и их отображение на русском языке, появившиеся в версии 0.4.0.
|
||||
|
||||
- Выбор языка интерфейса и распознавания речи в разделе **Настройки → Общие**,
|
||||
а также быстрый выбор языка рядом с микрофоном теперь используют меню в стиле
|
||||
приложения. Выбранный пункт отмечен галочкой, поддерживается управление
|
||||
клавиатурой. Escape закрывает меню и возвращает фокус на кнопку. Языковые
|
||||
настройки остаются независимыми; язык распознавания нельзя менять во время
|
||||
записи.
|
||||
- В разделе **Проверка понимания** сохранены полные русские подписи. Если места
|
||||
достаточно, заголовок и переключатель расположены в одной строке. В узких
|
||||
панелях переключатель размещается под пояснением с выравниванием по левому
|
||||
краю; высота кнопок учитывает перенос текста.
|
||||
- В разделе **Настройки → Агент** появился переключатель **⚡ Быстро** для каждого
|
||||
уровня моделей: основной, экономичной и с поддержкой изображений. Быстрый
|
||||
режим **отключён по умолчанию** и пока доступен только для подключений
|
||||
**ChatGPT**. Он запрашивает приоритетную обработку и может быстрее расходовать
|
||||
лимит ChatGPT. Доступность зависит от модели и учётной записи.
|
||||
- Настройка применяется к **следующему запросу**, в том числе в существующих
|
||||
занятиях с ChatGPT и в новых фоновых задачах соответствующего уровня.
|
||||
Выбранная модель и уровень рассуждений сохраняются. При выборе другого
|
||||
провайдера быстрый режим для этого уровня отключается; для остальных
|
||||
провайдеров переключатель недоступен.
|
||||
- Если быстрый режим не поддерживается, приложение показывает понятную ошибку
|
||||
на выбранном языке. Сохраняются выбранная учётная запись, разрешения на
|
||||
фоновую работу и запрет автоматического перехода на API-ключ.
|
||||
|
||||
Пакеты: AppImage и Debian для **Linux x64**, установщик для **Windows x64**.
|
||||
Обе версии используют публичные выпуски этого форка в Gitea для автоматических
|
||||
обновлений. Установщик Windows не подписан, как и в исходном проекте.
|
||||
@@ -0,0 +1,53 @@
|
||||
# LearnHarness 0.5.1
|
||||
|
||||
## English
|
||||
|
||||
This release adds multilingual speech recognition and simplifies the STT picker
|
||||
beside the microphone.
|
||||
|
||||
- **Settings → General → Speech recognition language** now includes
|
||||
**Multilingual**. It uses Deepgram Nova-3's `language=multi` mode for speech
|
||||
that switches between supported languages, including Russian and English.
|
||||
The preference is saved and applies to the next recording, including any
|
||||
reconnects during that recording.
|
||||
- The chat STT picker now offers **English**, **Русский**, and **Multilingual**.
|
||||
The compact button displays **Multi** when multilingual recognition is selected.
|
||||
The **Auto · LANG** entry has been removed from this picker.
|
||||
- **System default** remains available in General settings. When it is active,
|
||||
the chat picker displays the resolved English or Russian language. Opening
|
||||
the picker preserves System default; choosing a language saves that explicit
|
||||
preference, even when it matches the current system language.
|
||||
- Interface and STT languages remain independently selectable. Existing
|
||||
preferences and system defaults are preserved, and both STT controls remain
|
||||
locked while recording. The menus retain keyboard navigation and selected-item
|
||||
checkmarks.
|
||||
|
||||
Packages: **Linux x64** AppImage and Debian, and a **Windows x64** installer.
|
||||
Both platforms use this fork's public Gitea releases for automatic updates.
|
||||
Windows packaging remains unsigned, matching the previous release.
|
||||
|
||||
## Русский
|
||||
|
||||
В этом выпуске добавлено многоязычное распознавание речи и упрощён выбор языка
|
||||
рядом с микрофоном.
|
||||
|
||||
- В разделе **Настройки → Общие → Язык распознавания речи** появился вариант
|
||||
**Несколько языков**. Он включает режим `language=multi` в Deepgram Nova-3
|
||||
для речи с переключением между поддерживаемыми языками, в том числе русским
|
||||
и английским. Выбор сохраняется и применяется к следующей записи, включая
|
||||
повторные подключения во время этой записи.
|
||||
- В меню языка распознавания рядом с микрофоном теперь доступны **English**,
|
||||
**Русский** и **Несколько языков**. При многоязычном распознавании компактная
|
||||
кнопка показывает **Мульти**. Пункт **Авто · LANG** из этого меню удалён.
|
||||
- В общих настройках по-прежнему доступен вариант **Язык системы**. Если он
|
||||
выбран, кнопка рядом с микрофоном показывает фактически используемый язык:
|
||||
английский или русский. Открытие меню не меняет настройку. Выбор языка
|
||||
сохраняет его явно, даже если он совпадает с текущим языком системы.
|
||||
- Язык интерфейса и язык распознавания остаются независимыми. Сохраняются
|
||||
прежние предпочтения и выбор языка системы. Оба переключателя языка
|
||||
распознавания заблокированы во время записи. Меню поддерживают управление
|
||||
клавиатурой и отмечают выбранный пункт галочкой.
|
||||
|
||||
Пакеты: AppImage и Debian для **Linux x64**, установщик для **Windows x64**.
|
||||
Обе версии используют публичные выпуски этого форка в Gitea для автоматических
|
||||
обновлений. Установщик Windows не подписан, как и в предыдущем выпуске.
|
||||
@@ -0,0 +1,8 @@
|
||||
# Official packages for this fork. Upstream packaging stays in electron-builder.yml.
|
||||
extends: ./electron-builder.yml
|
||||
publish:
|
||||
# Use an object: electron-builder concatenates inherited publish arrays.
|
||||
provider: generic
|
||||
# Gitea resolves the latest published, non-prerelease release here.
|
||||
# Drafts remain private and do not become an update before publication.
|
||||
url: https://server2.sorokin-oleg-edu.xyz/replicated/learnharness/releases/download/latest
|
||||
@@ -84,6 +84,9 @@ files:
|
||||
# Main-process ID-token signature verification (no bundled OAuth implementation).
|
||||
- node_modules/jose/**/*
|
||||
extraResources:
|
||||
# Attribution/license for the bounded local Pi cutoff-selector port.
|
||||
- from: docs/compaction-accounting.md
|
||||
to: licenses/pi-compaction.md
|
||||
# Copy from the PARENT dir (.next), not .next/standalone itself:
|
||||
# electron-builder hard-excludes a copy's root node_modules and the
|
||||
# default no-filter pattern is a literal path match (empirically both
|
||||
@@ -97,6 +100,11 @@ extraResources:
|
||||
filter:
|
||||
- "standalone/**/*"
|
||||
mac:
|
||||
# The backend's --require runs before Next loads. Keep this resource
|
||||
# outside app.asar so early Node-mode loading needs no ASAR support.
|
||||
extraResources:
|
||||
- from: electron/server-title-guard.cjs
|
||||
to: server-title-guard.cjs
|
||||
icon: build/icon.icon
|
||||
# zip rides next to dmg (flipped 2026-10-08): Squirrel.Mac — Electron's
|
||||
# macOS auto-updater — installs from ZIP and cannot read DMGs. DMG is
|
||||
|
||||
+14
-28
@@ -19,8 +19,7 @@ const fail = (code) => Object.assign(new Error(code), { code });
|
||||
const publicError = (err) => ({
|
||||
cancelled: "ChatGPT sign-in cancelled.",
|
||||
timeout: "ChatGPT sign-in timed out. Try again.",
|
||||
secure_storage: "Secure credential storage is unavailable. ChatGPT sign-in requires the desktop app and an OS secure-storage backend.",
|
||||
storage: "ChatGPT credentials could not be saved securely. Reconnect before making requests.",
|
||||
storage: "ChatGPT credentials could not be read or saved. Check local file access, then reconnect before making requests.",
|
||||
identity: "ChatGPT sign-in could not be verified. Select the intended saved account and try again.",
|
||||
scope: "ChatGPT plan permission is missing. Reconnect and authorize ChatGPT plan use.",
|
||||
disconnected: "This ChatGPT connection is disconnected. Reconnect in Providers.",
|
||||
@@ -34,7 +33,7 @@ const publicError = (err) => ({
|
||||
|
||||
const nonempty = (v) => typeof v === "string" && v.length > 0 && !/[\x00-\x20\x7f]/.test(v);
|
||||
const planScopes = (tokens) => !!tokens?.accessToken && SCOPES.every((scope) => tokens.scopes.includes(scope));
|
||||
/** Reject the entire encrypted record. Encryption is not schema validation. */
|
||||
/** Reject the entire credential record when its schema is invalid. */
|
||||
function validateState(state) {
|
||||
if (!state || state.version !== 1 || !nonempty(state.hostId) || !Array.isArray(state.registrations) || !(state.activeId === null || nonempty(state.activeId))) throw fail("storage");
|
||||
if (Object.hasOwn(state, "allowBackgroundUse") && typeof state.allowBackgroundUse !== "boolean") throw fail("storage");
|
||||
@@ -51,35 +50,25 @@ function validateState(state) {
|
||||
return state;
|
||||
}
|
||||
|
||||
/** Encrypted envelope only, outside learning data. No plaintext fallback. */
|
||||
function encryptedStore(file, safeStorage) {
|
||||
function secure() {
|
||||
if (!safeStorage.isEncryptionAvailable() || safeStorage.getSelectedStorageBackend?.() === "basic_text") throw fail("secure_storage");
|
||||
}
|
||||
/** Private, unencrypted JSON outside learning data. No OS credential-store access. */
|
||||
function fileStore(file) {
|
||||
return {
|
||||
secure,
|
||||
async read() {
|
||||
secure();
|
||||
try {
|
||||
const envelope = JSON.parse(await fs.readFile(file, "utf8"));
|
||||
if (envelope.version !== 1 || typeof envelope.encrypted !== "string" || !/^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/.test(envelope.encrypted) || !envelope.encrypted) throw fail("storage");
|
||||
const state = JSON.parse(safeStorage.decryptString(Buffer.from(envelope.encrypted, "base64")));
|
||||
return validateState(state);
|
||||
return validateState(JSON.parse(await fs.readFile(file, "utf8")));
|
||||
} catch (err) {
|
||||
if (err.code === "ENOENT") return null;
|
||||
throw fail("storage");
|
||||
}
|
||||
},
|
||||
async write(state) {
|
||||
secure();
|
||||
validateState(state);
|
||||
const temp = `${file}.${crypto.randomUUID()}.tmp`;
|
||||
let handle;
|
||||
try {
|
||||
const encrypted = safeStorage.encryptString(JSON.stringify(state)).toString("base64");
|
||||
await fs.mkdir(path.dirname(file), { recursive: true, mode: 0o700 });
|
||||
handle = await fs.open(temp, "wx", 0o600);
|
||||
await handle.writeFile(JSON.stringify({ version: 1, encrypted }));
|
||||
await handle.writeFile(`${JSON.stringify(state)}\n`);
|
||||
await handle.sync();
|
||||
await handle.close();
|
||||
handle = null;
|
||||
@@ -115,7 +104,6 @@ function createChatGPT({ store, openExternal, fetch: request = globalThis.fetch,
|
||||
let authorityRevision = 0;
|
||||
let catalogSequence = 0;
|
||||
let storageDenied = false;
|
||||
let secureAvailable = true;
|
||||
const stamp = () => ({ epoch, authorityRevision, revision });
|
||||
let backgroundIntent;
|
||||
let pending;
|
||||
@@ -174,17 +162,13 @@ function createChatGPT({ store, openExternal, fetch: request = globalThis.fetch,
|
||||
state = first;
|
||||
}
|
||||
})();
|
||||
try { await init; checkSecure(); } catch (err) { denyStorage(err); throw err; }
|
||||
try { await init; } catch (err) { denyStorage(err); throw err; }
|
||||
}
|
||||
function denyStorage(err) {
|
||||
secureAvailable = false;
|
||||
if (!storageDenied) { storageDenied = true; lastError = publicError(err); stop(); }
|
||||
}
|
||||
function checkSecure() {
|
||||
try { store.secure(); secureAvailable = true; } catch (err) { denyStorage(err); throw err; }
|
||||
}
|
||||
async function save(next) {
|
||||
try { checkSecure(); validateState(next); await store.write(next); checkSecure(); } catch (err) {
|
||||
try { validateState(next); await store.write(next); } catch (err) {
|
||||
// A rotated token may already have invalidated its predecessor. Fail closed.
|
||||
denyStorage(err);
|
||||
lastError = publicError(err);
|
||||
@@ -195,7 +179,7 @@ function createChatGPT({ store, openExternal, fetch: request = globalThis.fetch,
|
||||
}
|
||||
function snapshot() {
|
||||
return {
|
||||
available: !!state && secureAvailable && !closed && !paused,
|
||||
available: !!state && !closed && !paused,
|
||||
pending: !!pending,
|
||||
allowBackgroundUse: backgroundAllowed(),
|
||||
activeId: state?.activeId ?? null,
|
||||
@@ -210,6 +194,9 @@ function createChatGPT({ store, openExternal, fetch: request = globalThis.fetch,
|
||||
registration: r.clientId,
|
||||
connected: !storageDenied && !closed && !paused && !suspended && !r.reconnectRequired && planScopes(r.tokens),
|
||||
planEnabled: !storageDenied && !r.reconnectRequired && planScopes(r.tokens),
|
||||
// Recovery is authorization-only, not a response to storage failure
|
||||
// or temporary transport suspension. Never infer it from error copy.
|
||||
canSignInAgain: !storageDenied && !closed && !paused && (r.reconnectRequired === true || !planScopes(r.tokens)),
|
||||
};
|
||||
}),
|
||||
error: lastError,
|
||||
@@ -331,7 +318,7 @@ function createChatGPT({ store, openExternal, fetch: request = globalThis.fetch,
|
||||
next.registrations = next.registrations.filter((r) => r.id !== record.id).concat(record);
|
||||
next.activeId = record.id;
|
||||
const previous = structuredClone(state);
|
||||
await save(next); // Active identity changes only AFTER validation and durable encrypted persistence.
|
||||
await save(next); // Active identity changes only AFTER validation and durable persistence.
|
||||
if (closed || abort.signal.aborted || epoch !== attemptEpoch) {
|
||||
await save(previous);
|
||||
throw fail("cancelled");
|
||||
@@ -365,7 +352,6 @@ function createChatGPT({ store, openExternal, fetch: request = globalThis.fetch,
|
||||
function cancelLogin() { pending?.cancel(); return snapshot(); }
|
||||
|
||||
function authorized(background, expected, capturedEpoch) {
|
||||
checkSecure();
|
||||
const account = active();
|
||||
if (!account || (capturedEpoch !== undefined && capturedEpoch !== epoch)) throw fail("disconnected");
|
||||
if (!planScopes(account.tokens)) throw fail("scope");
|
||||
@@ -553,4 +539,4 @@ function createChatGPT({ store, openExternal, fetch: request = globalThis.fetch,
|
||||
return { status, login, cancelLogin, lease, models, select, consent, disconnect, logout, close, pause, resume, stamp };
|
||||
}
|
||||
|
||||
module.exports = { createChatGPT, encryptedStore, publicError, allowedAuthEndpoint, SCOPES, validateState };
|
||||
module.exports = { createChatGPT, fileStore, publicError, allowedAuthEndpoint, SCOPES, validateState };
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
/** Native-shell catalog. Kept with the shell so packaged builds do not load server sources. */
|
||||
const ru = {
|
||||
"Check for Updates…": "Проверить обновления…", "Edit": "Правка", "View": "Вид", "Window": "Окно",
|
||||
"Actual Size": "Исходный масштаб", "Zoom In": "Увеличить масштаб", "Zoom Out": "Уменьшить масштаб",
|
||||
"About LearnHarness": "О LearnHarness", "Hide LearnHarness": "Скрыть LearnHarness", "Hide Others": "Скрыть остальные", "Quit LearnHarness": "Выйти из LearnHarness",
|
||||
"Undo": "Отменить", "Redo": "Повторить", "Cut": "Вырезать", "Copy": "Копировать", "Paste": "Вставить", "Select All": "Выбрать всё",
|
||||
"Reload": "Перезагрузить", "Developer Tools": "Инструменты разработчика", "Toggle Full Screen": "Полноэкранный режим", "Minimize": "Свернуть", "Close": "Закрыть",
|
||||
"You're up to date.": "Установлена последняя версия.", "Couldn't check for updates.": "Не удалось проверить обновления.",
|
||||
"LearnHarness {version} is the latest version.": "LearnHarness {version} — последняя версия.", "OK": "ОК",
|
||||
};
|
||||
function resolveLanguage(preference, languages = []) { return preference === "ru" || preference !== "en" && /^ru(?:-|_|$)/i.test(languages[0] || "") ? "ru" : "en"; }
|
||||
function translate(language, text, params = {}) { return (language === "ru" ? ru[text] || text : text).replace(/\{(\w+)\}/g, (match, key) => Object.hasOwn(params, key) ? String(params[key]) : match); }
|
||||
module.exports = { resolveLanguage, translate };
|
||||
+72
-21
@@ -24,9 +24,11 @@
|
||||
* would shadow every settings-page key change until restart.
|
||||
*/
|
||||
|
||||
const { app, BrowserWindow, Menu, ipcMain, session, shell, dialog, safeStorage } = require("electron");
|
||||
const { createChatGPT, encryptedStore } = require("./chatgpt.cjs");
|
||||
const { app, BrowserWindow, Menu, ipcMain, session, shell, dialog } = require("electron");
|
||||
const { createChatGPT, fileStore } = require("./chatgpt.cjs");
|
||||
const { attachChatGPTChild, trustedSender, chatGPTControl } = require("./chatgpt-ipc.cjs");
|
||||
const { createSubscriptions, loadSubscriptionSDK } = require("./subscriptions.cjs");
|
||||
const { attachSubscriptionChild, subscriptionControl } = require("./subscription-ipc.cjs");
|
||||
const { desktopAPIHeaders } = require("./desktop-api.cjs");
|
||||
const { randomBytes } = require("node:crypto");
|
||||
const { spawn } = require("node:child_process");
|
||||
@@ -134,6 +136,8 @@ if (process.argv.includes("--browser-service")) {
|
||||
let serverProcess = null;
|
||||
let chatgpt = null;
|
||||
let chatgptChild = null;
|
||||
let subscriptions = null;
|
||||
let subscriptionChild = null;
|
||||
// Per-launch request capability, never OAuth tokens and never renderer state.
|
||||
let desktopAPISecret = null;
|
||||
const trustedAppWindows = new Set();
|
||||
@@ -196,7 +200,11 @@ function startServer(port) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const child = spawn(
|
||||
process.execPath,
|
||||
[serverEntry()],
|
||||
// Only the macOS backend needs this: Next's native title setter
|
||||
// otherwise checks this Node-mode process in as a foreground app.
|
||||
process.platform === "darwin"
|
||||
? ["--require", path.join(process.resourcesPath, "server-title-guard.cjs"), serverEntry()]
|
||||
: [serverEntry()],
|
||||
{
|
||||
cwd: path.dirname(serverEntry()),
|
||||
env: {
|
||||
@@ -206,6 +214,7 @@ function startServer(port) {
|
||||
PORT: String(port),
|
||||
HOSTNAME: "127.0.0.1", // the server defaults to 0.0.0.0 — never
|
||||
LH_DATA_DIR: DATA_DIR(),
|
||||
LH_SYSTEM_LANGUAGE: app.getPreferredSystemLanguages()[0] || "en",
|
||||
// The auth/keys store — the child reads AND writes this file itself
|
||||
// (no env injection anymore: a spawn-time copy would shadow every
|
||||
// settings-page key change until restart; env wins over file).
|
||||
@@ -218,6 +227,7 @@ function startServer(port) {
|
||||
);
|
||||
serverProcess = child;
|
||||
chatgptChild = attachChatGPTChild(child, chatgpt);
|
||||
subscriptionChild = attachSubscriptionChild(child, subscriptions);
|
||||
const fwd = (buf) => buf.toString().trimEnd().split("\n").forEach((l) => l && log(`server: ${l}`));
|
||||
child.stdout.on("data", fwd);
|
||||
child.stderr.on("data", fwd);
|
||||
@@ -226,7 +236,10 @@ function startServer(port) {
|
||||
serverProcess = null;
|
||||
chatgptChild?.dispose();
|
||||
chatgptChild = null;
|
||||
subscriptionChild?.dispose();
|
||||
subscriptionChild = null;
|
||||
chatgpt?.close();
|
||||
subscriptions?.close();
|
||||
});
|
||||
resolve(child);
|
||||
});
|
||||
@@ -251,6 +264,7 @@ function waitUntilUp(url, tries = 150) {
|
||||
|
||||
function killServer() {
|
||||
chatgpt?.close();
|
||||
subscriptions?.close();
|
||||
if (!serverProcess) return;
|
||||
const child = serverProcess;
|
||||
serverProcess = null;
|
||||
@@ -443,11 +457,11 @@ function checkForUpdates({ manual = false } = {}) {
|
||||
// update-downloaded. Manual checks additionally answer directly.
|
||||
if (!manual) return;
|
||||
const version = result?.updateInfo?.version;
|
||||
if (!version) dialog.showMessageBox({ type: "info", message: "You're up to date.", detail: `LearnHarness ${app.getVersion()} is the latest version.` });
|
||||
if (!version) dialog.showMessageBox({ type: "info", message: nt("You're up to date."), detail: nt("LearnHarness {version} is the latest version.", { version: app.getVersion() }), buttons: [nt("OK")] });
|
||||
})
|
||||
.catch((err) => {
|
||||
log(`update check failed: ${err?.message ?? err}`);
|
||||
if (manual) dialog.showMessageBox({ type: "warning", message: "Couldn't check for updates.", detail: String(err?.message ?? err) });
|
||||
if (manual) dialog.showMessageBox({ type: "warning", message: nt("Couldn't check for updates."), buttons: [nt("OK")], detail: String(err?.message ?? err) });
|
||||
});
|
||||
}
|
||||
|
||||
@@ -511,53 +525,63 @@ function applyZoom(win, factor) {
|
||||
|
||||
/** macOS needs an application menu with the Edit roles — without one,
|
||||
* Cmd+C/V/A do nothing in the renderer. Everything else stays minimal. */
|
||||
const { resolveLanguage: resolveShellLanguage, translate: translateShell } = require("./language.cjs");
|
||||
let shellLanguage;
|
||||
function nativeLanguage() {
|
||||
if (shellLanguage) return shellLanguage;
|
||||
let preference;
|
||||
try { preference = JSON.parse(fs.readFileSync(path.join(DATA_DIR(), "settings.json"), "utf8")).general?.language; } catch {}
|
||||
return resolveShellLanguage(preference, app.getPreferredSystemLanguages());
|
||||
}
|
||||
function nt(text, params) { return translateShell(nativeLanguage(), text, params); }
|
||||
|
||||
function installMenu() {
|
||||
const template = [
|
||||
{
|
||||
label: app.name,
|
||||
submenu: [
|
||||
{ role: "about" },
|
||||
{ role: "about", label: nt("About LearnHarness") },
|
||||
// Manual check (Wave C): answers via native dialog — no renderer
|
||||
// round-trip. The 24h automatic checks stay silent.
|
||||
{ label: "Check for Updates…", click: () => checkForUpdates({ manual: true }) },
|
||||
{ label: nt("Check for Updates…"), click: () => checkForUpdates({ manual: true }) },
|
||||
{ type: "separator" },
|
||||
{ role: "hide" },
|
||||
{ role: "hideOthers" },
|
||||
{ role: "hide", label: nt("Hide LearnHarness") },
|
||||
{ role: "hideOthers", label: nt("Hide Others") },
|
||||
{ type: "separator" },
|
||||
{ role: "quit" },
|
||||
{ role: "quit", label: nt("Quit LearnHarness") },
|
||||
],
|
||||
},
|
||||
{ label: "Edit", submenu: [{ role: "undo" }, { role: "redo" }, { type: "separator" }, { role: "cut" }, { role: "copy" }, { role: "paste" }, { role: "selectAll" }] },
|
||||
{ label: nt("Edit"), submenu: [{ role: "undo", label: nt("Undo") }, { role: "redo", label: nt("Redo") }, { type: "separator" }, { role: "cut", label: nt("Cut") }, { role: "copy", label: nt("Copy") }, { role: "paste", label: nt("Paste") }, { role: "selectAll", label: nt("Select All") }] },
|
||||
{
|
||||
label: "View",
|
||||
label: nt("View"),
|
||||
submenu: [
|
||||
{ role: "reload" },
|
||||
{ role: "toggleDevTools" },
|
||||
{ role: "reload", label: nt("Reload") },
|
||||
{ role: "toggleDevTools", label: nt("Developer Tools") },
|
||||
{ type: "separator" },
|
||||
// OWNED zoom (see applyZoom): the roles change zoomLevel
|
||||
// silently; these broadcast the factor and re-seat the
|
||||
// traffic lights. The renderer's --lh-zoom depends on
|
||||
// hearing every change.
|
||||
{
|
||||
label: "Actual Size",
|
||||
label: nt("Actual Size"),
|
||||
accelerator: "CommandOrControl+0",
|
||||
click: () => applyZoom(BrowserWindow.getAllWindows()[0], 1),
|
||||
},
|
||||
{
|
||||
label: "Zoom In",
|
||||
label: nt("Zoom In"),
|
||||
accelerator: "CommandOrControl+Plus",
|
||||
click: () => zoomStep(BrowserWindow.getAllWindows()[0], +1),
|
||||
},
|
||||
{
|
||||
label: "Zoom Out",
|
||||
label: nt("Zoom Out"),
|
||||
accelerator: "CommandOrControl+-",
|
||||
click: () => zoomStep(BrowserWindow.getAllWindows()[0], -1),
|
||||
},
|
||||
{ type: "separator" },
|
||||
{ role: "togglefullscreen" },
|
||||
{ role: "togglefullscreen", label: nt("Toggle Full Screen") },
|
||||
],
|
||||
},
|
||||
{ role: "windowMenu" },
|
||||
{ label: nt("Window"), submenu: [{ role: "minimize", label: nt("Minimize") }, { role: "close", label: nt("Close") }] },
|
||||
];
|
||||
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
|
||||
}
|
||||
@@ -565,6 +589,7 @@ function installMenu() {
|
||||
async function main() {
|
||||
app.on("window-all-closed", () => {
|
||||
chatgpt?.pause();
|
||||
subscriptions?.pause();
|
||||
// macOS convention: the app stays resident, reactivated from the Dock.
|
||||
if (process.platform !== "darwin") app.quit();
|
||||
});
|
||||
@@ -589,13 +614,23 @@ async function main() {
|
||||
callback({ requestHeaders: desktopAPIHeaders(details, ownedOrigin, desktopAPISecret, [...trustedAppWindows]) });
|
||||
});
|
||||
chatgpt = createChatGPT({
|
||||
store: encryptedStore(path.join(app.getPath("userData"), "chatgpt-credentials.enc.json"), safeStorage),
|
||||
store: fileStore(path.join(app.getPath("userData"), "chatgpt-credentials.json")),
|
||||
openExternal: (target) => shell.openExternal(target),
|
||||
onChange: (value) => {
|
||||
chatgptChild?.send(value);
|
||||
for (const win of BrowserWindow.getAllWindows()) win.webContents.send("lh:chatgpt:changed");
|
||||
},
|
||||
});
|
||||
subscriptions = createSubscriptions({
|
||||
directory: app.getPath("userData"),
|
||||
loadSDK: () => loadSubscriptionSDK(path.dirname(serverEntry())),
|
||||
openExternal: (target) => shell.openExternal(target),
|
||||
onChange: (snapshot) => {
|
||||
subscriptionChild?.send(snapshot);
|
||||
for (const win of BrowserWindow.getAllWindows()) win.webContents.send("lh:subscriptions:changed");
|
||||
},
|
||||
});
|
||||
await subscriptions.ready;
|
||||
log(`starting server: ${serverEntry()}`);
|
||||
log(`data dir: ${DATA_DIR()}${fs.existsSync(AUTH_FILE()) ? " · auth.json: present" : " · auth.json: ABSENT (no BYOK keys yet)"}`);
|
||||
await startServer(new URL(url).port);
|
||||
@@ -613,7 +648,23 @@ async function main() {
|
||||
return chatGPTControl(command, chatgpt);
|
||||
});
|
||||
|
||||
ipcMain.handle("lh:subscriptions:control", async (event, command) => {
|
||||
if (!trustedAppWindows.has(BrowserWindow.fromWebContents(event.sender)) || !trustedSender(event, new URL(url).origin, BrowserWindow)) throw new Error("Untrusted desktop request.");
|
||||
if (!subscriptions || !serverProcess?.connected) {
|
||||
if (command?.op === "status") return [];
|
||||
throw new Error("Subscription sign-in requires the desktop app's private server connection.");
|
||||
}
|
||||
return subscriptionControl(command, subscriptions);
|
||||
});
|
||||
|
||||
installMenu();
|
||||
ipcMain.on("lh:language", (event, language) => {
|
||||
if (!trustedAppWindows.has(BrowserWindow.fromWebContents(event.sender)) || !trustedSender(event, new URL(url).origin, BrowserWindow)) return;
|
||||
if (language !== "en" && language !== "ru") return;
|
||||
if (shellLanguage === language) return;
|
||||
shellLanguage = language;
|
||||
installMenu();
|
||||
});
|
||||
|
||||
// Auto-update (Wave C): wire the updater before the window so the
|
||||
// banner channel is live from first paint; the first check and the 24h
|
||||
@@ -638,7 +689,7 @@ async function main() {
|
||||
if (width < target) win.setBounds({ x, y, width: target, height });
|
||||
});
|
||||
app.on("activate", () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) { chatgpt?.resume(); createWindow(url); }
|
||||
if (BrowserWindow.getAllWindows().length === 0) { chatgpt?.resume(); subscriptions?.resume(); createWindow(url); }
|
||||
});
|
||||
createWindow(url);
|
||||
log(`window open: ${url}`);
|
||||
|
||||
@@ -29,6 +29,7 @@ const { contextBridge, ipcRenderer } = require("electron");
|
||||
|
||||
contextBridge.exposeInMainWorld("lh", {
|
||||
platform: process.platform,
|
||||
setLanguage: (language) => ipcRenderer.send("lh:language", language),
|
||||
chatgpt: {
|
||||
status: () => ipcRenderer.invoke("lh:chatgpt:control", { op: "status" }),
|
||||
login: (id) => ipcRenderer.invoke("lh:chatgpt:control", { op: "login", id }),
|
||||
@@ -43,6 +44,21 @@ contextBridge.exposeInMainWorld("lh", {
|
||||
return () => ipcRenderer.removeListener("lh:chatgpt:changed", listener);
|
||||
},
|
||||
},
|
||||
subscriptions: {
|
||||
status: () => ipcRenderer.invoke("lh:subscriptions:control", { op: "status" }),
|
||||
login: (providerId, enabled) => ipcRenderer.invoke("lh:subscriptions:control", { op: "login", providerId, enabled }),
|
||||
cancel: (providerId) => ipcRenderer.invoke("lh:subscriptions:control", { op: "cancel", providerId }),
|
||||
respond: (providerId, attemptId, promptId, value) => ipcRenderer.invoke("lh:subscriptions:control", { op: "respond", providerId, attemptId, promptId, value }),
|
||||
open: (providerId, attemptId, actionId) => ipcRenderer.invoke("lh:subscriptions:control", { op: "open", providerId, attemptId, actionId }),
|
||||
retry: (providerId) => ipcRenderer.invoke("lh:subscriptions:control", { op: "retry", providerId }),
|
||||
disconnect: (providerId) => ipcRenderer.invoke("lh:subscriptions:control", { op: "disconnect", providerId }),
|
||||
consent: (providerId, enabled) => ipcRenderer.invoke("lh:subscriptions:control", { op: "consent", providerId, enabled }),
|
||||
onChange: (cb) => {
|
||||
const listener = () => cb();
|
||||
ipcRenderer.on("lh:subscriptions:changed", listener);
|
||||
return () => ipcRenderer.removeListener("lh:subscriptions:changed", listener);
|
||||
},
|
||||
},
|
||||
expandWindow: () => ipcRenderer.send("lh:expand-window"),
|
||||
onZoom: (cb) => {
|
||||
const listener = (_event, factor) => cb(factor);
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Preloaded only into the packaged macOS backend, before Next starts.
|
||||
*
|
||||
* Next assigns process.title. In Electron's Node mode on macOS, the native
|
||||
* setter checks in with Launch Services using the main app bundle, creating
|
||||
* an unwanted foreground application registration. Keep title writes in JS
|
||||
* instead: the native process name stays unchanged while JS can read back
|
||||
* its assigned title. This deliberately does not emulate native truncation
|
||||
* or every coercion detail; assignments use String(value).
|
||||
*
|
||||
* Explicit launch arguments (not NODE_OPTIONS) keep the full-Electron browser
|
||||
* helper untouched. Node-mode fork descendants can inherit this preload.
|
||||
*/
|
||||
if (process.platform === "darwin" && process.env.ELECTRON_RUN_AS_NODE === "1" && process.env.LH_DESKTOP_SERVER === "1") {
|
||||
let title = process.title;
|
||||
Object.defineProperty(process, "title", {
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
get: () => title,
|
||||
set: (value) => {
|
||||
title = String(value);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
"use strict";
|
||||
const { PROVIDERS } = require("./subscription-store.cjs");
|
||||
const { publicError } = require("./subscriptions.cjs");
|
||||
function attachSubscriptionChild(child, controller) {
|
||||
let disposed = false;
|
||||
const send = (packet) => { if (!disposed && child.connected) { try { child.send(packet, () => {}); } catch { /* child exited */ } } };
|
||||
const listener = async (message) => {
|
||||
if (disposed || !child.connected || message?.channel !== "lh:subscriptions" || typeof message.id !== "string") return;
|
||||
const { id, op } = message;
|
||||
try {
|
||||
if (!controller || !["snapshot", "lease"].includes(op)) throw new Error();
|
||||
if (op === "lease" && (typeof message.background !== "boolean" || !validScope(message.scope))) throw new Error();
|
||||
const value = op === "snapshot" ? await controller.snapshot() : await controller.lease(message.scope, message.background);
|
||||
send({ channel: "lh:subscriptions", id, op, ok: true, value });
|
||||
} catch (error) { send({ channel: "lh:subscriptions", id, op, ok: false, error: publicError(error) }); }
|
||||
};
|
||||
child.on("message", listener);
|
||||
return {
|
||||
send(snapshot) { send({ channel: "lh:subscriptions", op: "changed", snapshot }); },
|
||||
dispose() { disposed = true; child.removeListener("message", listener); },
|
||||
};
|
||||
}
|
||||
function validScope(scope) {
|
||||
return scope && PROVIDERS.includes(scope.providerId) && typeof scope.connectionId === "string" && !!scope.connectionId && typeof scope.selectedModelId === "string" && !!scope.selectedModelId && [scope.epoch, scope.authorityRevision].every((n) => Number.isSafeInteger(n) && n >= 0);
|
||||
}
|
||||
/** Caller authenticates the exact trusted main-frame origin before dispatch. */
|
||||
async function subscriptionControl(command, controller) {
|
||||
try {
|
||||
if (!controller || !command || typeof command !== "object") throw new Error();
|
||||
if (command.op === "status") return await controller.status();
|
||||
if (!PROVIDERS.includes(command.providerId)) throw new Error();
|
||||
const id = command.providerId;
|
||||
switch (command.op) {
|
||||
case "login": return await controller.login(id, command.enabled);
|
||||
case "cancel": return controller.cancel(id);
|
||||
case "respond": return await controller.respond(id, command.attemptId, command.promptId, command.value);
|
||||
case "open": return await controller.open(id, command.attemptId, command.actionId);
|
||||
case "retry": return await controller.retry(id);
|
||||
case "disconnect": return await controller.disconnect(id);
|
||||
case "consent": return await controller.consent(id, command.enabled);
|
||||
default: throw new Error();
|
||||
}
|
||||
} catch (error) { throw new Error(publicError(error)); }
|
||||
}
|
||||
module.exports = { attachSubscriptionChild, subscriptionControl, validScope };
|
||||
@@ -0,0 +1,64 @@
|
||||
"use strict";
|
||||
const fs = require("node:fs/promises");
|
||||
const path = require("node:path");
|
||||
const { randomUUID } = require("node:crypto");
|
||||
|
||||
const PROVIDERS = ["github-copilot", "xai"];
|
||||
const failure = (code) => Object.assign(new Error(code), { code });
|
||||
const nonempty = (value) => typeof value === "string" && value.length > 0 && !/[\x00-\x20\x7f]/.test(value);
|
||||
function validateCredential(providerId, credential) {
|
||||
if (!credential || credential.type !== "oauth" || !nonempty(credential.access) || !nonempty(credential.refresh) || !Number.isFinite(credential.expires) || credential.expires < 0) throw failure("storage");
|
||||
if (providerId === "github-copilot") {
|
||||
if (credential.enterpriseUrl !== undefined && !safeDomain(credential.enterpriseUrl)) throw failure("storage");
|
||||
if (credential.availableModelIds !== undefined && (!Array.isArray(credential.availableModelIds) || !credential.availableModelIds.every(nonempty))) throw failure("storage");
|
||||
}
|
||||
return credential;
|
||||
}
|
||||
function safeDomain(value) {
|
||||
if (typeof value !== "string" || !value || /[\s/:@?#\\]/.test(value)) return false;
|
||||
try { return new URL(`https://${value}`).hostname === value; } catch { return false; }
|
||||
}
|
||||
function safeHttps(value) {
|
||||
try {
|
||||
const url = new URL(value);
|
||||
return url.protocol === "https:" && !url.username && !url.password;
|
||||
} catch { return false; }
|
||||
}
|
||||
function validateState(providerId, state) {
|
||||
if (!PROVIDERS.includes(providerId) || !state || state.version !== 1 || typeof state.allowBackgroundUse !== "boolean") throw failure("storage");
|
||||
const hasId = Object.hasOwn(state, "connectionId");
|
||||
if (hasId !== Object.hasOwn(state, "credential") || (hasId && !/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(state.connectionId))) throw failure("storage");
|
||||
if (hasId) validateCredential(providerId, state.credential);
|
||||
return state;
|
||||
}
|
||||
/** Main-process-only, one independent owner-only file per provider. No recovery writes on corruption. */
|
||||
function fileStore(file, providerId, io = fs) {
|
||||
return {
|
||||
async read() {
|
||||
try {
|
||||
const stat = await io.lstat(file);
|
||||
if (!stat.isFile() || (process.platform !== "win32" && ((stat.mode & 0o077) !== 0 || (typeof process.getuid === "function" && stat.uid !== process.getuid())))) throw failure("storage");
|
||||
return validateState(providerId, JSON.parse(await io.readFile(file, "utf8")));
|
||||
}
|
||||
catch (error) { if (error.code === "ENOENT") return { version: 1, allowBackgroundUse: true }; throw failure("storage"); }
|
||||
},
|
||||
async write(state) {
|
||||
validateState(providerId, state);
|
||||
const temporary = `${file}.${randomUUID()}.tmp`;
|
||||
let handle;
|
||||
try {
|
||||
await io.mkdir(path.dirname(file), { recursive: true, mode: 0o700 });
|
||||
handle = await io.open(temporary, "wx", 0o600);
|
||||
await handle.writeFile(`${JSON.stringify(state)}\n`);
|
||||
await handle.sync(); await handle.close(); handle = null;
|
||||
await io.rename(temporary, file);
|
||||
if (process.platform !== "win32") {
|
||||
const directory = await io.open(path.dirname(file), "r");
|
||||
try { await directory.sync(); } finally { await directory.close(); }
|
||||
}
|
||||
} catch { throw failure("storage"); }
|
||||
finally { await handle?.close().catch(() => {}); await io.unlink(temporary).catch(() => {}); }
|
||||
},
|
||||
};
|
||||
}
|
||||
module.exports = { PROVIDERS, failure, validateCredential, validateState, safeDomain, safeHttps, fileStore };
|
||||
@@ -0,0 +1,251 @@
|
||||
"use strict";
|
||||
const { randomUUID } = require("node:crypto");
|
||||
const path = require("node:path");
|
||||
const { createRequire, registerHooks } = require("node:module");
|
||||
const { pathToFileURL } = require("node:url");
|
||||
const { PROVIDERS, fileStore, validateCredential, safeHttps, failure } = require("./subscription-store.cjs");
|
||||
|
||||
const LABELS = { "github-copilot": "GitHub Copilot", xai: "Grok" };
|
||||
const APIS = new Set(["openai-responses", "openai-completions", "anthropic-messages"]);
|
||||
const clone = (value) => value === undefined ? undefined : JSON.parse(JSON.stringify(value));
|
||||
const MESSAGES = {
|
||||
storage: "The saved connection could not be read or written safely. Reopen the app or reconnect after resolving the credential-file problem.",
|
||||
login: "Sign-in did not complete. Try connecting again.",
|
||||
refresh: "The connection could not be refreshed. Retry or reconnect in Providers.",
|
||||
cancel: "Sign-in cancelled.",
|
||||
unavailable: "This subscription connection is unavailable. Reconnect or explicitly choose another connection.",
|
||||
background: "Background use is off for this connection. Automatic follow-up remains deferred in its queue.",
|
||||
stale: "The connection or model catalog changed. Select an available model and retry.",
|
||||
interaction: "This sign-in action is no longer available.",
|
||||
};
|
||||
function publicError(error) { return MESSAGES[error?.code] ?? MESSAGES.unavailable; }
|
||||
/** Resolve the SAME SDK installation as the standalone server, through public exports. */
|
||||
async function loadSubscriptionSDK(baseDirectory) {
|
||||
const resolve = createRequire(path.join(baseDirectory, "package.json"));
|
||||
const load = (id) => {
|
||||
// Pi exports are import-only. Resolve the public export with ESM
|
||||
// conditions, then remove this synchronous, exact-specifier hook
|
||||
// BEFORE evaluation; no private package path or global hook remains.
|
||||
const hook = registerHooks({ resolve(specifier, context, next) {
|
||||
return next(specifier, specifier === id ? { ...context, conditions: [...context.conditions, "import"] } : context);
|
||||
} });
|
||||
let file;
|
||||
try { file = resolve.resolve(id); } finally { hook.deregister(); }
|
||||
return import(pathToFileURL(file).href);
|
||||
};
|
||||
const [sdk, copilot, xai] = await Promise.all([load("@earendil-works/pi-ai"), load("@earendil-works/pi-ai/providers/github-copilot"), load("@earendil-works/pi-ai/providers/xai")]);
|
||||
return { ...sdk, ...copilot, ...xai };
|
||||
}
|
||||
function validEndpoint(providerId, auth, credential) {
|
||||
if (!auth || (!(typeof auth.apiKey === "string" && auth.apiKey.length > 0) && !Object.entries(auth.headers ?? {}).some(([key, value]) => ["authorization", "x-api-key", "api-key"].includes(key.toLowerCase()) && typeof value === "string" && value.trim().length > 0))) return false;
|
||||
const value = auth.baseUrl ?? (providerId === "xai" ? "https://api.x.ai/v1" : "https://api.individual.githubcopilot.com");
|
||||
if (!safeHttps(value)) return false;
|
||||
const url = new URL(value);
|
||||
if (providerId === "xai") return url.origin === "https://api.x.ai" && url.pathname.replace(/\/$/, "") === "/v1" && !url.search && !url.hash;
|
||||
const domain = credential?.enterpriseUrl;
|
||||
return !url.search && !url.hash && url.pathname === "/" && (!url.port || url.port === "443") && (url.hostname.endsWith(".githubcopilot.com") || (domain && (url.hostname === domain || url.hostname.endsWith(`.${domain}`))));
|
||||
}
|
||||
/** Main owns durable credentials and refresh. Everything returned by status/snapshot is explicitly projected. */
|
||||
function createSubscriptions(options) {
|
||||
let sdk;
|
||||
let closed = false, paused = false;
|
||||
const entries = new Map(PROVIDERS.map((providerId) => [providerId, {
|
||||
providerId, state: { version: 1, allowBackgroundUse: true }, disk: options.stores?.[providerId] ?? fileStore(path.join(options.directory, `${providerId}-credentials.json`), providerId),
|
||||
epoch: 0, authorityRevision: 0, revision: 0, tail: Promise.resolve(), fatal: false, blocked: false, ready: false, error: undefined, authFailed: false, attempt: null, catalog: [], endpoint: null,
|
||||
}]));
|
||||
const entryFor = (id) => { const entry = entries.get(id); if (!entry) throw failure("unavailable"); return entry; };
|
||||
function serialized(entry, fn) { const result = entry.tail.then(fn); entry.tail = result.catch(() => {}); return result; }
|
||||
function statusOf(entry) {
|
||||
const available = entry.ready && !closed && !paused && !entry.fatal;
|
||||
const attempt = entry.attempt;
|
||||
return {
|
||||
providerId: entry.providerId, available, connected: !!(available && entry.state.credential && !entry.blocked && !entry.authFailed), pending: !!attempt, committing: attempt?.committing === true,
|
||||
allowBackgroundUse: entry.state.allowBackgroundUse, connectionId: entry.state.connectionId ?? null,
|
||||
epoch: entry.epoch, authorityRevision: entry.authorityRevision, revision: entry.revision,
|
||||
...(entry.error ? { error: entry.error } : {}),
|
||||
...(attempt ? { interaction: clone(attempt.public) } : {}),
|
||||
};
|
||||
}
|
||||
function snapshotNow() {
|
||||
return { statuses: [...entries.values()].map(statusOf), models: Object.fromEntries([...entries.values()].map((entry) => [entry.providerId, statusOf(entry).connected ? clone(entry.catalog) : []])) };
|
||||
}
|
||||
function changed(entry) { entry.revision++; try { options.onChange?.(snapshotNow()); } catch { /* observer cannot break credential writes */ } }
|
||||
function catalog(entry) {
|
||||
let models = entry.provider?.getModels().filter((model) => APIS.has(model.api)) ?? [];
|
||||
if (!entry.state.credential) models = [];
|
||||
else if (entry.providerId === "github-copilot" && !Array.isArray(entry.state.credential.availableModelIds)) models = [];
|
||||
else if (entry.provider?.filterModels) models = [...entry.provider.filterModels(models, entry.state.credential)];
|
||||
if (JSON.stringify(models) !== JSON.stringify(entry.catalog)) { entry.catalog = models; entry.authorityRevision++; }
|
||||
}
|
||||
async function updateEndpoint(entry) {
|
||||
let endpoint = null;
|
||||
if (entry.state.credential) {
|
||||
const auth = await entry.provider.auth.oauth.toAuth(entry.state.credential);
|
||||
if (!validEndpoint(entry.providerId, auth, entry.state.credential)) throw failure("storage");
|
||||
endpoint = auth.baseUrl ?? (entry.providerId === "xai" ? "https://api.x.ai/v1" : "https://api.individual.githubcopilot.com");
|
||||
}
|
||||
if (entry.endpoint !== endpoint) { entry.endpoint = endpoint; entry.authorityRevision++; }
|
||||
}
|
||||
function storageFailed(entry) { entry.fatal = true; entry.blocked = true; entry.epoch++; entry.error = MESSAGES.storage; changed(entry); }
|
||||
async function save(entry, state) {
|
||||
try { await entry.disk.write(state); } catch { storageFailed(entry); throw failure("storage"); }
|
||||
entry.state = clone(state);
|
||||
try { await updateEndpoint(entry); catalog(entry); } catch { storageFailed(entry); throw failure("storage"); }
|
||||
changed(entry);
|
||||
}
|
||||
const ready = (async () => {
|
||||
try { sdk = options.sdk ?? await options.loadSDK(); }
|
||||
catch { for (const entry of entries.values()) { entry.error = MESSAGES.unavailable; entry.fatal = true; changed(entry); } return; }
|
||||
await Promise.all([...entries.values()].map(async (entry) => {
|
||||
try {
|
||||
entry.state = clone(await entry.disk.read());
|
||||
const native = entry.providerId === "github-copilot" ? sdk.githubCopilotProvider() : sdk.xaiProvider();
|
||||
// No API-key auth method exists in this collection: ambient keys cannot become a fallback.
|
||||
entry.provider = { ...native, auth: { oauth: native.auth.oauth } };
|
||||
const store = {
|
||||
read: async (id) => id === entry.providerId ? clone(entry.state.credential) : undefined,
|
||||
list: async () => entry.state.credential ? [{ providerId: entry.providerId, type: "oauth" }] : [],
|
||||
modify: (id, fn, operation) => serialized(entry, async () => {
|
||||
if (id !== entry.providerId || entry.fatal || closed || paused || operation?.signal?.aborted) throw failure("unavailable");
|
||||
const next = await fn(clone(entry.state.credential));
|
||||
// A returned rotation must be saved even if the app paused while
|
||||
// refresh was in flight. Admission is rechecked after resolution;
|
||||
// queued logout deletes only after this serialized durable write.
|
||||
if (next !== undefined && JSON.stringify(next) !== JSON.stringify(entry.state.credential)) {
|
||||
try { validateCredential(id, next); } catch { storageFailed(entry); throw failure("storage"); }
|
||||
await save(entry, { ...entry.state, credential: next });
|
||||
}
|
||||
return clone(entry.state.credential);
|
||||
}),
|
||||
delete: (id) => serialized(entry, async () => {
|
||||
if (id !== entry.providerId || entry.fatal) throw failure("storage");
|
||||
await save(entry, { version: 1, allowBackgroundUse: entry.state.allowBackgroundUse });
|
||||
}),
|
||||
};
|
||||
entry.models = sdk.createModels({ credentials: store }); entry.models.setProvider(entry.provider);
|
||||
await updateEndpoint(entry); entry.ready = true; catalog(entry); changed(entry);
|
||||
} catch { entry.fatal = true; entry.error = MESSAGES.storage; changed(entry); }
|
||||
}));
|
||||
})();
|
||||
function current(entry, scope) {
|
||||
return statusOf(entry).connected && scope?.providerId === entry.providerId && scope.connectionId === entry.state.connectionId && scope.epoch === entry.epoch && scope.authorityRevision === entry.authorityRevision && entry.catalog.some((m) => m.id === scope.selectedModelId);
|
||||
}
|
||||
async function consent(providerId, enabled) {
|
||||
await ready; const entry = entryFor(providerId);
|
||||
if (typeof enabled !== "boolean" || entry.fatal || closed || paused) throw failure("unavailable");
|
||||
await serialized(entry, async () => { if (entry.state.allowBackgroundUse !== enabled) await save(entry, { ...entry.state, allowBackgroundUse: enabled }); });
|
||||
}
|
||||
async function login(providerId, enabled) {
|
||||
await ready; const entry = entryFor(providerId);
|
||||
if ((enabled !== undefined && typeof enabled !== "boolean") || entry.fatal || closed || paused || !entry.ready) throw failure("unavailable");
|
||||
if ([...entries.values()].some((e) => e.attempt)) throw failure("interaction");
|
||||
const abort = new AbortController();
|
||||
const attempt = { id: randomUUID(), abort, committing: false, actions: new Map(), prompt: null, public: {} };
|
||||
attempt.public = { attemptId: attempt.id }; entry.attempt = attempt; entry.error = undefined; changed(entry);
|
||||
const active = () => entry.attempt === attempt && !abort.signal.aborted && !closed && !paused;
|
||||
const addBrowser = (value) => {
|
||||
if (!safeHttps(value)) throw failure("interaction");
|
||||
const id = randomUUID(); attempt.actions.set(id, value);
|
||||
const url = new URL(value); attempt.public.browser = { id, url: `${url.origin}${url.pathname}` };
|
||||
};
|
||||
try {
|
||||
const staging = sdk.createModels(); staging.setProvider(entry.provider);
|
||||
const credential = await staging.login(providerId, "oauth", {
|
||||
signal: abort.signal,
|
||||
notify: (event) => {
|
||||
if (!active()) return;
|
||||
if (event.type === "auth_url") addBrowser(event.url);
|
||||
if (event.type === "device_code") { addBrowser(event.verificationUri); attempt.public.userCode = event.userCode; }
|
||||
// Native provider diagnostics are never forwarded. Public prompt wording comes from SDK-owned prompts.
|
||||
attempt.public.progress = event.type === "device_code" || event.type === "auth_url" ? "Complete sign-in in your browser." : "Waiting for the provider…";
|
||||
changed(entry);
|
||||
},
|
||||
prompt: (prompt) => new Promise((resolve, reject) => {
|
||||
if (!active() || prompt.signal?.aborted) { reject(failure("cancel")); return; }
|
||||
const id = randomUUID();
|
||||
const stop = () => { cleanup(); reject(failure("cancel")); };
|
||||
const cleanup = () => { abort.signal.removeEventListener("abort", stop); prompt.signal?.removeEventListener("abort", stop); if (attempt.prompt?.id === id) { attempt.prompt = null; delete attempt.public.prompt; } };
|
||||
attempt.prompt = { id, resolve: (value) => { cleanup(); resolve(value); }, reject: stop };
|
||||
attempt.public.prompt = { id, type: prompt.type, message: prompt.message, ...(prompt.placeholder ? { placeholder: prompt.placeholder } : {}), ...(prompt.type === "select" ? { options: clone(prompt.options) } : {}) };
|
||||
abort.signal.addEventListener("abort", stop, { once: true }); prompt.signal?.addEventListener("abort", stop, { once: true }); changed(entry);
|
||||
}),
|
||||
}, { agentName: "LearnHarness" });
|
||||
if (!active()) throw failure("cancel"); validateCredential(providerId, credential);
|
||||
const auth = await entry.provider.auth.oauth.toAuth(credential);
|
||||
if (!validEndpoint(providerId, auth, credential) || !active()) throw failure("login");
|
||||
await serialized(entry, async () => {
|
||||
if (!active() || entry.fatal) throw failure("cancel");
|
||||
attempt.committing = true; entry.blocked = true; entry.epoch++; changed(entry);
|
||||
await save(entry, { version: 1, allowBackgroundUse: enabled ?? entry.state.allowBackgroundUse, connectionId: randomUUID(), credential });
|
||||
entry.blocked = false; entry.authFailed = false; entry.error = undefined;
|
||||
});
|
||||
} catch (error) {
|
||||
if (active() && !entry.fatal) entry.error = error?.code === "cancel" ? undefined : MESSAGES.login;
|
||||
if (!abort.signal.aborted) throw failure(entry.fatal ? "storage" : "login");
|
||||
} finally { attempt.prompt?.reject(); if (entry.attempt === attempt) { entry.attempt = null; changed(entry); } }
|
||||
}
|
||||
function cancel(providerId) { const entry = entryFor(providerId); if (entry.attempt && !entry.attempt.committing) { entry.attempt.abort.abort(); entry.attempt = null; if (entry.authFailed && !entry.error) entry.error = MESSAGES.refresh; changed(entry); } }
|
||||
async function resolveAuth(entry, modelId) {
|
||||
if (entry.fatal || closed || paused || !entry.state.credential) throw failure("unavailable");
|
||||
const connectionId = entry.state.connectionId, epoch = entry.epoch;
|
||||
const unchanged = () => connectionId === entry.state.connectionId && epoch === entry.epoch && !entry.blocked && !closed && !paused;
|
||||
try {
|
||||
const model = entry.provider.getModels().find((m) => m.id === modelId);
|
||||
if (!model) throw failure("stale");
|
||||
const resolved = await entry.models.getAuth(model);
|
||||
if (!unchanged()) throw failure("stale");
|
||||
if (!validEndpoint(entry.providerId, resolved?.auth, entry.state.credential)) throw failure("unavailable");
|
||||
return {
|
||||
...(typeof resolved.auth.apiKey === "string" ? { apiKey: resolved.auth.apiKey } : {}),
|
||||
...(resolved.auth.headers ? { headers: Object.fromEntries(Object.entries(resolved.auth.headers).filter(([, value]) => value === null || typeof value === "string")) } : {}),
|
||||
...(typeof resolved.auth.baseUrl === "string" ? { baseUrl: resolved.auth.baseUrl } : {}),
|
||||
};
|
||||
} catch (error) {
|
||||
if (!entry.fatal && unchanged()) { entry.authFailed = true; entry.error = MESSAGES.refresh; entry.epoch++; changed(entry); }
|
||||
throw failure(entry.fatal ? "storage" : error?.code === "stale" ? "stale" : "refresh");
|
||||
}
|
||||
}
|
||||
return {
|
||||
ready,
|
||||
async snapshot() { await ready; return snapshotNow(); },
|
||||
async status() { await ready; return snapshotNow().statuses; },
|
||||
login, consent, cancel,
|
||||
async respond(providerId, attemptId, promptId, value) {
|
||||
const entry = entryFor(providerId), attempt = entry.attempt;
|
||||
if (!attempt || attempt.id !== attemptId || attempt.prompt?.id !== promptId || typeof value !== "string" || value.length > 4096) throw failure("interaction");
|
||||
const prompt = attempt.public.prompt;
|
||||
if (prompt.type === "select" && !prompt.options.some((option) => option.id === value)) throw failure("interaction");
|
||||
attempt.prompt.resolve(value); changed(entry);
|
||||
},
|
||||
async open(providerId, attemptId, actionId) {
|
||||
const attempt = entryFor(providerId).attempt;
|
||||
const target = attempt?.id === attemptId ? attempt.actions.get(actionId) : undefined;
|
||||
if (!target || !safeHttps(target)) throw failure("interaction");
|
||||
try { await options.openExternal(target); } catch { throw failure("interaction"); }
|
||||
},
|
||||
async lease(scope, background) {
|
||||
await ready; const entry = entryFor(scope?.providerId);
|
||||
if (!current(entry, scope)) throw failure("stale");
|
||||
if (background && !entry.state.allowBackgroundUse) throw failure("background");
|
||||
const auth = await resolveAuth(entry, scope.selectedModelId);
|
||||
if (!current(entry, scope)) throw failure("stale");
|
||||
if (background && !entry.state.allowBackgroundUse) throw failure("background");
|
||||
return { scope: clone(scope), auth: clone(auth) };
|
||||
},
|
||||
async retry(providerId) {
|
||||
await ready; const entry = entryFor(providerId);
|
||||
const model = entry.catalog[0]; if (!model || entry.fatal || entry.blocked) throw failure("unavailable");
|
||||
await resolveAuth(entry, model.id); entry.authFailed = false; entry.error = undefined; changed(entry);
|
||||
},
|
||||
async disconnect(providerId) {
|
||||
await ready; const entry = entryFor(providerId); cancel(providerId);
|
||||
if (entry.fatal) throw failure("storage");
|
||||
entry.blocked = true; entry.epoch++; changed(entry);
|
||||
await entry.models.logout(providerId); entry.blocked = false; entry.authFailed = false; entry.error = undefined; changed(entry);
|
||||
},
|
||||
pause() { paused = true; for (const entry of entries.values()) { cancel(entry.providerId); entry.epoch++; changed(entry); } },
|
||||
resume() { if (closed) return; paused = false; for (const entry of entries.values()) changed(entry); },
|
||||
close() { closed = true; for (const entry of entries.values()) { cancel(entry.providerId); entry.epoch++; changed(entry); } },
|
||||
};
|
||||
}
|
||||
module.exports = { createSubscriptions, loadSubscriptionSDK, publicError, validEndpoint, LABELS };
|
||||
@@ -74,6 +74,11 @@ const nextConfig: NextConfig = {
|
||||
// per-platform-binary story as the canvas above (one per build).
|
||||
"node_modules/@resvg/resvg-js-*/**/*",
|
||||
"node_modules/@earendil-works/pi-ai/dist/providers/data/**/*",
|
||||
// Public native OAuth factories load these flows through variable imports.
|
||||
// Electron main uses the same standalone SDK; the offline runtime gate
|
||||
// evaluates their real toAuth paths without login or provider requests.
|
||||
"node_modules/@earendil-works/pi-ai/dist/auth/oauth/{load,github-copilot,xai,device-code}.js",
|
||||
"node_modules/@earendil-works/pi-ai/dist/utils/sleep.js",
|
||||
"node_modules/@earendil-works/pi-agent-core/dist/**/*.json",
|
||||
// Next 16.3.2 native Turbopack applies unanchored excludes while
|
||||
// traversing modules; **/data/**/* still prunes gcp-metadata and
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "learnharness",
|
||||
"version": "0.3.5",
|
||||
"version": "0.5.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "learnharness",
|
||||
"version": "0.3.5",
|
||||
"version": "0.5.1",
|
||||
"license": "AGPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@earendil-works/pi-agent-core": "1.4.0",
|
||||
|
||||
+2
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "learnharness",
|
||||
"version": "0.3.5",
|
||||
"version": "0.5.1",
|
||||
"license": "AGPL-3.0-only",
|
||||
"author": {
|
||||
"name": "Amos Blomqvist",
|
||||
@@ -19,6 +19,7 @@
|
||||
"test": "NODE_ENV=test tsx --test tests/*.test.ts tests/*.test.tsx",
|
||||
"lint": "eslint .",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"desktop:release:linux": "rm -rf dist .next/standalone && npm run build && node scripts/smoke-provider-runtime.mjs && node scripts/build-server.mjs && node scripts/smoke-server.mjs --electron && electron-builder --config electron-builder.gitea.yml --linux --x64 --publish never && node scripts/gitea-release.mjs verify-package dist/linux-unpacked && node scripts/gitea-release.mjs checksums dist && node scripts/gitea-release.mjs verify dist",
|
||||
"desktop:dev": "concurrently -k \"next dev\" \"LH_DEV_URL=http://localhost:3000 electron .\"",
|
||||
"dev:fresh": "bash scripts/dev-fresh.sh",
|
||||
"desktop:dist": "rm -rf dist .next/standalone && next build && node scripts/smoke-provider-runtime.mjs && node scripts/build-server.mjs && node scripts/smoke-server.mjs && DEVELOPER_DIR=${DEVELOPER_DIR:-/Applications/Xcode.app/Contents/Developer} APPLE_KEYCHAIN_PROFILE=LH_NOTARY APPLE_TEAM_ID=JS6XN22HY6 electron-builder --mac --arm64"
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
/** Prepare and verify this fork's Linux release; publication is always a separate human action. */
|
||||
import assert from "node:assert/strict";
|
||||
import { createHash } from "node:crypto";
|
||||
import fs from "node:fs";
|
||||
import fsp from "node:fs/promises";
|
||||
import { createRequire } from "node:module";
|
||||
import os from "node:os";
|
||||
import path from "node:path";
|
||||
import { Readable } from "node:stream";
|
||||
import { pipeline } from "node:stream/promises";
|
||||
import { pathToFileURL } from "node:url";
|
||||
|
||||
const require = createRequire(import.meta.url);
|
||||
const yaml = require("js-yaml");
|
||||
const ROOT = path.resolve(import.meta.dirname, "..");
|
||||
export const SERVER = "https://server2.sorokin-oleg-edu.xyz";
|
||||
export const REPOSITORY = "replicated/learnharness";
|
||||
export const UPDATE_URL = `${SERVER}/${REPOSITORY}/releases/download/latest`;
|
||||
const API = `${SERVER}/api/v1/repos/${REPOSITORY}`;
|
||||
|
||||
export function expectedLinuxAssets(version) {
|
||||
assert.match(version, /^\d+\.\d+\.\d+$/, "release version must be a stable semver");
|
||||
return [`LearnHarness-${version}-x86_64.AppImage`, `LearnHarness-${version}-amd64.deb`, "latest-linux.yml", "SHA256SUMS"];
|
||||
}
|
||||
export async function fileDigest(file, algorithm, encoding = "hex") {
|
||||
const hash = createHash(algorithm);
|
||||
for await (const chunk of fs.createReadStream(file)) hash.update(chunk);
|
||||
return hash.digest(encoding);
|
||||
}
|
||||
|
||||
export async function writeChecksums(directory, version) {
|
||||
const names = expectedLinuxAssets(version).filter((name) => name !== "SHA256SUMS");
|
||||
const lines = [];
|
||||
for (const name of names) lines.push(`${await fileDigest(path.join(directory, name), "sha256")} ${name}`);
|
||||
await fsp.writeFile(path.join(directory, "SHA256SUMS"), lines.join("\n") + "\n");
|
||||
}
|
||||
|
||||
export async function verifyPackagedUpdater(directory) {
|
||||
const config = yaml.load(await fsp.readFile(path.join(directory, "resources", "app-update.yml"), "utf8"));
|
||||
assert.equal(config.provider, "generic", "packaged updater must use the Gitea generic provider");
|
||||
assert.equal(config.url, UPDATE_URL, "packaged updater must use the public Gitea release feed");
|
||||
assert(!config.owner && !config.repo, "packaged updater must not retain an upstream GitHub destination");
|
||||
}
|
||||
|
||||
export async function verifyLocal(directory, version) {
|
||||
const names = expectedLinuxAssets(version);
|
||||
const inventory = new Map();
|
||||
for (const name of names) {
|
||||
const file = path.join(directory, name);
|
||||
const stat = await fsp.lstat(file);
|
||||
assert(stat.isFile() && stat.size > 0, `${name} must be a nonempty regular file`);
|
||||
inventory.set(name, { name, size: stat.size, sha256: await fileDigest(file, "sha256") });
|
||||
}
|
||||
for (const [name, magic] of [[names[0], Buffer.from([0x7f, 0x45, 0x4c, 0x46])], [names[1], Buffer.from("!<arch>\n")]]) {
|
||||
const handle = await fsp.open(path.join(directory, name), "r");
|
||||
try { const header = Buffer.alloc(magic.length); await handle.read(header, 0, header.length, 0); assert(header.equals(magic), `${name} has an invalid installer header`); } finally { await handle.close(); }
|
||||
}
|
||||
const feed = yaml.load(await fsp.readFile(path.join(directory, "latest-linux.yml"), "utf8"));
|
||||
assert.equal(feed?.version, version, "update metadata version differs from the package");
|
||||
assert(Array.isArray(feed.files), "update metadata must contain files");
|
||||
const installers = names.filter((name) => /\.(AppImage|deb)$/.test(name));
|
||||
assert.deepEqual(feed.files.map((entry) => entry.url).sort(), [...installers].sort(), "update feed must reference exactly the Linux installers by filename");
|
||||
for (const entry of feed.files) {
|
||||
assert.equal(entry.size, inventory.get(entry.url)?.size, `${entry.url} update size differs`);
|
||||
assert.equal(entry.sha512, await fileDigest(path.join(directory, entry.url), "sha512", "base64"), `${entry.url} update checksum differs`);
|
||||
}
|
||||
assert.equal(feed.path, feed.files[0].url, "legacy updater path differs");
|
||||
assert.equal(feed.sha512, feed.files[0].sha512, "legacy updater checksum differs");
|
||||
const checksums = (await fsp.readFile(path.join(directory, "SHA256SUMS"), "utf8")).trim().split("\n");
|
||||
assert.deepEqual(checksums, names.filter((name) => name !== "SHA256SUMS").map((name) => `${inventory.get(name).sha256} ${name}`), "SHA256SUMS does not match the release bytes");
|
||||
return [...inventory.values()];
|
||||
}
|
||||
|
||||
/** The downloaded bytes, not only API-reported sizes, must agree with the local verified package. */
|
||||
export async function verifyRemote(release, localInventory, headers = {}, request = fetch) {
|
||||
assert.equal(release.draft, true, "only a draft may be prepared or verified by this tool");
|
||||
assert.equal(release.prerelease, false, "release must be stable");
|
||||
assert.deepEqual(release.assets.map((asset) => asset.name).sort(), localInventory.map((asset) => asset.name).sort(), "remote draft has missing, duplicate, or unexpected assets");
|
||||
const temporary = await fsp.mkdtemp(path.join(os.tmpdir(), "lh-release-verify-"));
|
||||
try {
|
||||
for (const expected of localInventory) {
|
||||
const asset = release.assets.find((entry) => entry.name === expected.name);
|
||||
assert.equal(asset.size, expected.size, `${expected.name} remote size differs`);
|
||||
const url = new URL(asset.browser_download_url);
|
||||
assert.equal(url.origin, SERVER, "release attachment points outside Gitea");
|
||||
const response = await request(url, { headers, signal: AbortSignal.timeout(300_000) });
|
||||
assert(response.ok && response.body, `cannot download ${expected.name}: HTTP ${response.status}`);
|
||||
const file = path.join(temporary, expected.name);
|
||||
await pipeline(Readable.fromWeb(response.body), fs.createWriteStream(file));
|
||||
assert.equal(await fileDigest(file, "sha256"), expected.sha256, `${expected.name} remote bytes differ`);
|
||||
}
|
||||
} finally { await fsp.rm(temporary, { recursive: true, force: true }); }
|
||||
}
|
||||
|
||||
function authorization() {
|
||||
const token = process.env.GITEA_TOKEN || process.env.GITEA_ACCESS_TOKEN || process.env.GITEA_API_TOKEN;
|
||||
assert(token, "GITEA_TOKEN is required for Gitea API operations");
|
||||
return { Authorization: `token ${token}` };
|
||||
}
|
||||
async function api(endpoint, options = {}) {
|
||||
const headers = { ...authorization(), ...options.headers };
|
||||
const response = await fetch(`${API}${endpoint}`, { ...options, headers, signal: AbortSignal.timeout(300_000) });
|
||||
if (!response.ok) throw new Error(`Gitea ${options.method ?? "GET"} ${endpoint}: HTTP ${response.status}`);
|
||||
return response.status === 204 ? null : response.json();
|
||||
}
|
||||
export async function selectDraft(tag) {
|
||||
const releases = [];
|
||||
for (let page = 1; ; page++) {
|
||||
const batch = await api(`/releases?limit=50&page=${page}`);
|
||||
assert(Array.isArray(batch), "release list response is invalid");
|
||||
releases.push(...batch);
|
||||
if (batch.length < 50) break;
|
||||
}
|
||||
const matches = releases.filter((release) => release.tag_name === tag || release.tag_name === tag.slice(1));
|
||||
assert(matches.length <= 1, `ambiguous releases for ${tag}`);
|
||||
if (matches.length) {
|
||||
assert.equal(matches[0].tag_name, tag, "use the exact versioned tag");
|
||||
assert.equal(matches[0].draft, true, "refusing to modify an already published release");
|
||||
}
|
||||
return matches[0] ?? null;
|
||||
}
|
||||
async function upload(directory, version) {
|
||||
const inventory = await verifyLocal(directory, version);
|
||||
const tag = `v${version}`;
|
||||
// The tag must already exist remotely; never create a release from a moving branch.
|
||||
const tagged = await api(`/tags/${encodeURIComponent(tag)}`);
|
||||
assert(tagged.commit?.sha, "release tag does not resolve to a commit");
|
||||
let release = await selectDraft(tag);
|
||||
const notes = await fsp.readFile(path.join(ROOT, "docs", `release-${version}.md`), "utf8");
|
||||
const data = { tag_name: tag, target_commitish: tagged.commit.sha, name: `LearnHarness ${version}`, body: notes, draft: true, prerelease: false };
|
||||
release = await api(release ? `/releases/${release.id}` : "/releases", { method: release ? "PATCH" : "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) });
|
||||
for (const expected of inventory) {
|
||||
const existing = (release.assets ?? []).find((asset) => asset.name === expected.name);
|
||||
if (existing) {
|
||||
assert.equal(existing.size, expected.size, `${expected.name} already exists with different bytes; review the draft before replacing it`);
|
||||
// Verify the bytes below, including an existing same-size attachment.
|
||||
continue;
|
||||
}
|
||||
const bytes = await fsp.readFile(path.join(directory, expected.name));
|
||||
const form = new FormData();
|
||||
form.set("attachment", new Blob([bytes]), expected.name);
|
||||
await api(`/releases/${release.id}/assets?name=${encodeURIComponent(expected.name)}`, { method: "POST", body: form });
|
||||
console.log(`uploaded ${expected.name}`);
|
||||
}
|
||||
release = await api(`/releases/${release.id}`);
|
||||
await verifyRemote(release, inventory, authorization());
|
||||
console.log(`Verified draft: ${release.html_url}`);
|
||||
console.log("Publication remains a separate review step.");
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const [command, directory = "dist"] = process.argv.slice(2);
|
||||
const { version } = JSON.parse(await fsp.readFile(path.join(ROOT, "package.json"), "utf8"));
|
||||
if (command === "checksums") await writeChecksums(directory, version);
|
||||
else if (command === "verify-package") await verifyPackagedUpdater(directory);
|
||||
else if (command === "verify") console.log(JSON.stringify(await verifyLocal(directory, version), null, 2));
|
||||
else if (command === "upload") await upload(directory, version);
|
||||
else if (command === "verify-remote") {
|
||||
const inventory = await verifyLocal(directory, version);
|
||||
const release = await selectDraft(`v${version}`);
|
||||
assert(release, "draft not found");
|
||||
await verifyRemote(release, inventory, authorization());
|
||||
console.log(`Verified draft: ${release.html_url}`);
|
||||
} else throw new Error("Usage: node scripts/gitea-release.mjs checksums|verify|upload|verify-remote [dist-directory], or verify-package [unpacked-app-directory]");
|
||||
}
|
||||
if (process.argv[1] && pathToFileURL(path.resolve(process.argv[1])).href === import.meta.url) {
|
||||
main().catch((error) => { console.error(error.message); process.exitCode = 1; });
|
||||
}
|
||||
@@ -103,6 +103,29 @@ async function probe(standalone) {
|
||||
noNetwork();
|
||||
console.log(`[smoke-provider-runtime] ${name}: native lazy Google adapter reached onPayload; generation stopped`);
|
||||
}
|
||||
// Exercise the public lazy OAuth surface offline. toAuth evaluates the
|
||||
// real flow module and its imports but neither logs in nor refreshes.
|
||||
for (const [name, factory] of [["github-copilot", "githubCopilotProvider"], ["xai", "xaiProvider"]]) {
|
||||
const provider = (await import(new URL(`providers/${name}.js`, entry).href))[factory]();
|
||||
const credential = { type: "oauth", access: name === "github-copilot" ? "tid=offline;proxy-ep=proxy.individual.githubcopilot.com;" : "offline-xai-oauth-not-a-token", refresh: "offline-refresh-not-a-token", expires: Date.now() + 3600000, availableModelIds: provider.getModels().map((model) => model.id) };
|
||||
const auth = await provider.auth.oauth.toAuth(credential);
|
||||
assert.equal(auth.apiKey, credential.access);
|
||||
if (name === "github-copilot") assert.equal(auth.baseUrl, "https://api.individual.githubcopilot.com");
|
||||
const seenApis = new Set();
|
||||
for (const model of provider.getModels()) {
|
||||
if (seenApis.has(model.api)) continue;
|
||||
seenApis.add(model.api);
|
||||
const sentinel = `LH_OFFLINE_SUBSCRIPTION_${randomUUID()}`;
|
||||
let reached = 0;
|
||||
const result = await provider.streamSimple({ ...model, ...(auth.baseUrl ? { baseUrl: auth.baseUrl } : {}) }, { messages: [{ role: "user", content: "Offline initialization only", timestamp: 0 }] }, {
|
||||
...auth, maxRetries: 0, onPayload() { reached++; throw new Error(sentinel); },
|
||||
}).result();
|
||||
assert.equal(reached, 1, `${name}/${model.api}: ${result.errorMessage}`);
|
||||
assert.equal(result.errorMessage, sentinel);
|
||||
}
|
||||
noNetwork();
|
||||
console.log(`[smoke-provider-runtime] ${name}: public native OAuth and ${seenApis.size} transport APIs initialized offline`);
|
||||
}
|
||||
// Resolution/evaluation, not folder-exists checks. This also covers the
|
||||
// previously missing transitive edge and permits legitimate nested deps.
|
||||
for (const name of ["@google/genai", "google-auth-library", "gcp-metadata", "json-bigint", "bignumber.js"]) {
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
/**
|
||||
* Regenerate src/core/prices.ts tables from pi-ai's shipped per-provider
|
||||
* catalogs (providers/data/*.json).
|
||||
*
|
||||
* Usage: npx tsx scripts/sync-pricing.ts
|
||||
*
|
||||
* The catalogs are pi-ai's curated, versioned snapshots — the SAME source
|
||||
* piEngineFor resolves engines from and /api/models serves the picker
|
||||
* from — so the money channel's lookup table can never disagree with the
|
||||
* engine. Fully offline (the JSON ships in node_modules); refreshes happen
|
||||
* by bumping @earendil-works/pi-ai and re-running this script. The tables
|
||||
* are generated; hand edits are overwritten. A model missing from the
|
||||
* catalogs gets no entry — cost renders as absent ("—"), never zero.
|
||||
*
|
||||
* Key format (model slots wave, 2026-09-20): uniformly provider-qualified
|
||||
* ("provider:id", incl. "openrouter:<slug>"). Owner decision: no legacy
|
||||
* compat — records stamped with pre-wave bare slugs simply render unpriced.
|
||||
*/
|
||||
|
||||
import * as fs from "node:fs";
|
||||
import * as path from "node:path";
|
||||
|
||||
const DATA_DIR = path.join(
|
||||
import.meta.dirname,
|
||||
"..",
|
||||
"node_modules",
|
||||
"@earendil-works",
|
||||
"pi-ai",
|
||||
"dist",
|
||||
"providers",
|
||||
"data",
|
||||
);
|
||||
const OUT = path.join(import.meta.dirname, "..", "src", "core", "prices.ts");
|
||||
|
||||
/** One raw catalog entry (fields we consume; the files carry more). */
|
||||
interface CatalogModel {
|
||||
id: string;
|
||||
name: string;
|
||||
/** pi-ai 1.0 (catalog schema v6): every entry is type-tagged. */
|
||||
type?: "chat" | "image" | "classifier";
|
||||
cost: { input: number; output: number; cacheRead: number; cacheWrite: number };
|
||||
}
|
||||
|
||||
/** The pure walk: every catalog entry that carries pricing, keyed
|
||||
* "provider:id". Exported for the drift-guard test (tests/prices-sync)
|
||||
* so the guard asserts EXACTLY what this script would generate — the
|
||||
* test and the generator can never disagree (owner, 2026-09-29). */
|
||||
export function buildPrices(): Map<string, CatalogModel["cost"]> {
|
||||
const priced = new Map<string, CatalogModel["cost"]>();
|
||||
for (const file of fs.readdirSync(DATA_DIR).filter((f) => f.endsWith(".json"))) {
|
||||
const provider = file.slice(0, -".json".length);
|
||||
const catalog = JSON.parse(fs.readFileSync(path.join(DATA_DIR, file), "utf-8")) as Record<
|
||||
string,
|
||||
Record<string, CatalogModel>
|
||||
>;
|
||||
for (const models of Object.values(catalog)) {
|
||||
for (const [id, m] of Object.entries(models)) {
|
||||
// pi-ai 1.0 (catalog schema v6): keys are type-qualified
|
||||
// ("chat:<id>", "image:<id>", "classifier:<id>") and entries
|
||||
// carry their own `type`. We price CHAT models only — our
|
||||
// usage records are chat — and keys stay "provider:id"
|
||||
// (owner format, 2026-09-20): strip the chat: prefix, skip the
|
||||
// rest.
|
||||
if (m.type && m.type !== "chat") continue;
|
||||
const plainId = id.startsWith("chat:") ? id.slice("chat:".length) : id;
|
||||
// A catalog entry without pricing data gets no key at all
|
||||
// (cost renders "—", never zero).
|
||||
if (!m.cost) continue;
|
||||
// First writer wins (an id can appear under two apis within one
|
||||
// file with identical pricing; cross-file collisions cannot
|
||||
// happen — keys are provider-qualified).
|
||||
priced.set(`${provider}:${plainId}`, m.cost);
|
||||
}
|
||||
}
|
||||
}
|
||||
return priced;
|
||||
}
|
||||
|
||||
function main(): void {
|
||||
const priced = new Map<string, { cost: CatalogModel["cost"] }>(
|
||||
[...buildPrices()].map(([k, cost]) => [k, { cost }] as const),
|
||||
);
|
||||
|
||||
// Sort by key for a stable, diff-friendly generated table.
|
||||
const rows = [...priced.entries()]
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([key, m]) => ({
|
||||
price: `\t${JSON.stringify(key)}: { input: ${m.cost.input}, output: ${m.cost.output}, cacheRead: ${m.cost.cacheRead}, cacheWrite: ${m.cost.cacheWrite} },`,
|
||||
}));
|
||||
|
||||
const tables = `/** Token prices, USD per 1M tokens. A missing model makes cost render
|
||||
* as absent ("—"), never zero. Keys are uniformly provider-qualified
|
||||
* ("provider:id") — NO legacy bare-slug compat (owner decision, sync
|
||||
* script 2026-09-20): pre-wave records stamped with bare slugs render
|
||||
* unpriced.
|
||||
* Context-window limits are NOT a table (owner amendment, 2026-09-23):
|
||||
* every meter's denominator reads pi's LIVE catalog (GET /api/models /
|
||||
* the activity feed's server-side join) — missing model, usage-only.
|
||||
* Refresh: bump @earendil-works/pi-ai, then npx tsx scripts/sync-pricing.ts
|
||||
* (reads pi-ai's shipped catalogs — the same source the engine and the
|
||||
* picker use). Forgetting the re-run is exactly how models go unpriced
|
||||
* (deepseek-v4.1-flash, 2026-09-29) — the drift-guard test
|
||||
* (tests/prices-sync.test.ts) fails the gates until you do. */
|
||||
export const PRICES: Record<string, ModelPrice> = {
|
||||
${rows.map((r) => r.price).join("\n")}
|
||||
};
|
||||
`;
|
||||
|
||||
const src = fs.readFileSync(OUT, "utf-8");
|
||||
const start = src.indexOf("/** Token prices");
|
||||
const end = src.indexOf("// ─── Pure helpers");
|
||||
if (start === -1 || end === -1) throw new Error("prices.ts markers not found — file structure changed");
|
||||
fs.writeFileSync(OUT, src.slice(0, start) + tables + "\n" + src.slice(end), "utf-8");
|
||||
|
||||
console.log(`prices.ts regenerated from pi-ai's catalogs: ${priced.size} keys priced.`);
|
||||
}
|
||||
|
||||
// Run only as a script, not when imported (the drift-guard test).
|
||||
if (process.argv[1] && import.meta.filename && path.resolve(process.argv[1]) === import.meta.filename) {
|
||||
main();
|
||||
}
|
||||
@@ -14,6 +14,12 @@ interface BridgeState {
|
||||
const key = Symbol.for("lh.chatgpt.bridge");
|
||||
const unavailable = (): ChatGPTStatus => ({ available: false, pending: false, allowBackgroundUse: true, activeId: null, accounts: [], error: null });
|
||||
const validStamp = (s: Stamp) => s && [s.epoch, s.authorityRevision, s.revision].every((v) => Number.isSafeInteger(v) && v >= 0);
|
||||
/** Next dev also uses parent/child IPC. IPC alone is not our desktop
|
||||
* transport: require the same launch markers set by Electron startServer.
|
||||
* These identify the transport, not a substitute for admission/lease checks. */
|
||||
function desktopIPCConnected(): boolean {
|
||||
return process.env.LH_DESKTOP_SERVER === "1" && (process.env.LH_DESKTOP_API_SECRET?.length ?? 0) >= 64 && typeof process.send === "function" && process.connected === true;
|
||||
}
|
||||
function bridge(): BridgeState {
|
||||
const global = globalThis as typeof globalThis & { [key]?: BridgeState };
|
||||
if (!global[key]) {
|
||||
@@ -21,7 +27,7 @@ function bridge(): BridgeState {
|
||||
global[key] = state;
|
||||
process.on("message", (raw: unknown) => {
|
||||
const m = raw as { channel?: string; kind?: string; id?: string; op?: string; ok?: boolean; value?: unknown; stamp: Stamp; status: ChatGPTStatus; invalidate?: string; error?: string };
|
||||
if (m?.channel !== "lh:chatgpt") return;
|
||||
if (!desktopIPCConnected() || m?.channel !== "lh:chatgpt") return;
|
||||
if (m.kind === "state" && validStamp(m.stamp) && m.stamp.revision >= state.stamp.revision) {
|
||||
acceptStatus(state, { ...m.stamp, status: m.status });
|
||||
if (m.invalidate === "all") { state.catalogRequest++; clearCatalog(state); }
|
||||
@@ -57,7 +63,7 @@ function acceptStatus(state: BridgeState, value: StatusValue) {
|
||||
/** Runtime-only inherited IPC. No HTTP credential route or renderer method. */
|
||||
export function chatGPTRequest<T>(op: "status" | "models" | "lease", fields: Record<string, unknown> = {}): Promise<T> {
|
||||
const state = bridge();
|
||||
if (!process.send || !process.connected) return Promise.reject(new Error("ChatGPT sign-in is available only in the desktop app with a private server connection."));
|
||||
if (!desktopIPCConnected()) return Promise.reject(new Error("ChatGPT sign-in is available only in the desktop app with a private server connection."));
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
const id = `${process.pid}:${++state.counter}`;
|
||||
const timer = setTimeout(() => { state.pending.delete(id); reject(new Error("The ChatGPT desktop connection timed out.")); }, 45000);
|
||||
@@ -68,7 +74,7 @@ export function chatGPTRequest<T>(op: "status" | "models" | "lease", fields: Rec
|
||||
});
|
||||
}
|
||||
export function chatGPTStatus(): ChatGPTStatus { return bridge().status; }
|
||||
export function chatGPTConnected(): boolean { const s = chatGPTStatus(); return s.available && s.accounts.some((a) => a.id === s.activeId && a.connected && a.planEnabled === true); }
|
||||
export function chatGPTConnected(): boolean { const s = chatGPTStatus(); return desktopIPCConnected() && s.available && s.accounts.some((a) => a.id === s.activeId && a.connected && a.planEnabled === true); }
|
||||
export function chatGPTBackgroundAllowed(): boolean { const s = chatGPTStatus(); return chatGPTConnected() && s.allowBackgroundUse === true; }
|
||||
export function onChatGPTChange(listener: () => void): () => void { bridge().listeners.add(listener); return () => { bridge().listeners.delete(listener); }; }
|
||||
export function chatGPTModels(): Model<"openai-responses">[] { return bridge().models; }
|
||||
@@ -80,7 +86,7 @@ export function chatGPTScope(selectedModelId: string): AdmissionScope {
|
||||
}
|
||||
export function chatGPTScopeCurrent(scope: AdmissionScope): boolean {
|
||||
const s = bridge();
|
||||
return !!process.connected && chatGPTConnected() && scope.accountId === s.catalogAccount && scope.accountId === s.status.activeId && scope.epoch === s.stamp.epoch && scope.authorityRevision === s.stamp.authorityRevision && !!chatGPTModel(scope.selectedModelId);
|
||||
return desktopIPCConnected() && chatGPTConnected() && scope.accountId === s.catalogAccount && scope.accountId === s.status.activeId && scope.epoch === s.stamp.epoch && scope.authorityRevision === s.stamp.authorityRevision && !!chatGPTModel(scope.selectedModelId);
|
||||
}
|
||||
export async function chatGPTLease(scope: AdmissionScope, background: boolean): Promise<LeaseValue> {
|
||||
if (!chatGPTScopeCurrent(scope)) throw new Error("ChatGPT catalog authority changed");
|
||||
@@ -102,7 +108,7 @@ export async function chatGPTDenial(scope: AdmissionScope | undefined, controlle
|
||||
/** Preserve account order; unknown capabilities/windows are never fabricated. */
|
||||
export async function refreshChatGPTModels(supported: Model<"openai-responses">[]): Promise<void> {
|
||||
const state = bridge();
|
||||
if (!process.send || !process.connected) { clearCatalog(state); return; }
|
||||
if (!desktopIPCConnected()) { clearCatalog(state); return; }
|
||||
const sequence = ++state.catalogRequest;
|
||||
try {
|
||||
const value = await chatGPTRequest<ModelsValue>("models");
|
||||
|
||||
@@ -1,122 +1,4 @@
|
||||
import type { AgentEvent, AgentMessage, PrepareRequestContext } from "@earendil-works/pi-agent-core";
|
||||
import type { AssistantMessage } from "@earendil-works/pi-ai";
|
||||
import { nativeInputCause, needsContinuation, type LhMessage } from "../core/native-messages.ts";
|
||||
|
||||
export interface AdmissionScope { accountId: string; epoch: number; authorityRevision: number; selectedModelId: string }
|
||||
export type NoDispatchKind = "background" | "all" | "other";
|
||||
export interface ChatGPTDispatchLifecycle {
|
||||
captured(scope: AdmissionScope): void;
|
||||
beforeDispatch(scope: AdmissionScope): void;
|
||||
noDispatch(kind: NoDispatchKind): void;
|
||||
}
|
||||
interface CycleOptions {
|
||||
initialMessages: AgentMessage[];
|
||||
staged?: AgentMessage[];
|
||||
foregroundOwed: boolean;
|
||||
purpose: { background: boolean };
|
||||
scopeCurrent: (scope: AdmissionScope) => boolean;
|
||||
commitStaged?: () => void;
|
||||
restoreAutomatic: (automaticIds: ReadonlySet<string>, retainedIds: ReadonlySet<string>) => void;
|
||||
}
|
||||
const idOf = (m: AgentMessage) => (m as { id?: string }).id;
|
||||
/** One logical turn, not an SDK loop. No credentials, persisted provenance or wire protocol. */
|
||||
export class ChatGPTRequestCycle implements ChatGPTDispatchLifecycle {
|
||||
private release?: (event: AgentEvent) => void;
|
||||
private held: AgentEvent[] = [];
|
||||
private snapshot: AgentMessage[] = [];
|
||||
private seen: Set<string>;
|
||||
private automatic = new Set<string>();
|
||||
private committed = false;
|
||||
private denied?: NoDispatchKind;
|
||||
private scope?: AdmissionScope;
|
||||
private originalScope?: AdmissionScope;
|
||||
private foregroundOwed: boolean;
|
||||
private inheritedBackground: boolean;
|
||||
private resumed = false;
|
||||
private userAborted = false;
|
||||
private stagedCommitted = false;
|
||||
private started = false;
|
||||
private anyDispatch = false;
|
||||
private firstResolved = false;
|
||||
private resolveAdmission!: (admitted: boolean) => void;
|
||||
readonly admission = new Promise<boolean>((resolve) => { this.resolveAdmission = resolve; });
|
||||
constructor(private readonly options: CycleOptions) {
|
||||
this.seen = new Set(options.initialMessages.map(idOf).filter((id): id is string => !!id));
|
||||
for (const message of options.staged ?? []) { const id = idOf(message); if (id) this.seen.delete(id); }
|
||||
this.foregroundOwed = options.foregroundOwed;
|
||||
this.inheritedBackground = options.purpose.background;
|
||||
}
|
||||
get dispatched(): boolean { return this.anyDispatch; }
|
||||
get deniedBeforeDispatch(): boolean { return this.denied !== undefined; }
|
||||
abort(): void { this.userAborted = true; }
|
||||
bindRelease(release: (event: AgentEvent) => void): () => void { this.release = release; return () => { this.release = undefined; }; }
|
||||
prepare(request: PrepareRequestContext): void {
|
||||
const messages = request.context.messages as AgentMessage[];
|
||||
this.snapshot = [...messages]; this.automatic = new Set();
|
||||
let learner = false;
|
||||
for (const m of messages) {
|
||||
const id = idOf(m); if (!id || this.seen.has(id)) continue;
|
||||
const cause = nativeInputCause(m, messages.slice(0, messages.indexOf(m)));
|
||||
if (cause === "automatic") this.automatic.add(id);
|
||||
if (cause === "learner") learner = true;
|
||||
}
|
||||
if (this.automatic.size > 0) this.options.purpose.background = true;
|
||||
const retained = messages.filter((m) => !this.automatic.has(idOf(m) ?? ""));
|
||||
this.foregroundOwed ||= learner || (!this.inheritedBackground && needsContinuation(retained as LhMessage[]));
|
||||
}
|
||||
hold(event: AgentEvent): boolean {
|
||||
if (event.type === "agent_start") { if (this.started) return true; this.started = true; return false; }
|
||||
if (event.type === "agent_end") return true; // settle only after native activeRun is cleared
|
||||
if (event.type === "turn_start") {
|
||||
this.committed = false; this.denied = undefined; this.scope = undefined;
|
||||
// A retained learner batch from the denied cycle already owns its turn_start.
|
||||
if (!this.held.some((e) => e.type === "turn_start")) this.held.push(event);
|
||||
return true;
|
||||
}
|
||||
if (!this.committed) { this.held.push(event); return true; }
|
||||
return false;
|
||||
}
|
||||
captured(scope: AdmissionScope): void {
|
||||
if (this.originalScope && this.resumed && JSON.stringify(scope) !== JSON.stringify(this.originalScope)) throw new Error("ChatGPT recovery scope changed");
|
||||
this.scope = { ...scope };
|
||||
this.originalScope ??= { ...scope };
|
||||
}
|
||||
beforeDispatch(scope: AdmissionScope): void {
|
||||
if (this.userAborted || this.denied || this.committed || !this.scope || JSON.stringify(scope) !== JSON.stringify(this.scope) || !this.options.scopeCurrent(scope)) throw new Error("ChatGPT admission cancelled");
|
||||
if (!this.stagedCommitted && (this.options.staged?.length ?? 0) > 0) {
|
||||
this.options.commitStaged?.(); // synchronous durable prefix, before visibility and fetch
|
||||
this.stagedCommitted = true;
|
||||
const stagedEvents: AgentEvent[] = this.options.staged!.flatMap((message) => [{ type: "message_start" as const, message }, { type: "message_end" as const, message }]);
|
||||
const boundary = this.held.findIndex((event) => event.type === "turn_start");
|
||||
this.held.splice(boundary < 0 ? 0 : boundary + 1, 0, ...stagedEvents);
|
||||
}
|
||||
this.committed = true; this.anyDispatch = true; this.foregroundOwed = false;
|
||||
this.inheritedBackground = this.options.purpose.background;
|
||||
for (const m of this.snapshot) { const id = idOf(m); if (id) this.seen.add(id); }
|
||||
const events = this.held; this.held = [];
|
||||
for (const event of events) this.release?.(event);
|
||||
this.resolveFirst(true);
|
||||
}
|
||||
noDispatch(kind: NoDispatchKind): void { if (!this.committed) this.denied = this.userAborted ? "all" : kind; }
|
||||
acceptsUsage(_message: AssistantMessage): boolean { return this.committed; }
|
||||
private resolveFirst(value: boolean) { if (!this.firstResolved) { this.firstResolved = true; this.resolveAdmission(value); } }
|
||||
finishNativeCycle(): { action: "settle" | "resumeForeground"; messages: AgentMessage[] } {
|
||||
if (!this.denied) { this.resolveFirst(this.anyDispatch); return { action: "settle", messages: [] }; }
|
||||
const messages = this.snapshot.filter((m) => !this.automatic.has(idOf(m) ?? ""));
|
||||
const retainedIds = new Set(messages.map(idOf).filter((id): id is string => !!id));
|
||||
this.options.restoreAutomatic(this.automatic, retainedIds);
|
||||
this.resolveFirst(false); // queue deferral is installed before initial fire cargo returns
|
||||
this.held = this.held.filter((e) => (e.type === "turn_start") || ((e.type === "message_start" || e.type === "message_end") && e.message.role !== "assistant" && !this.automatic.has(idOf(e.message) ?? "")));
|
||||
const retry = this.denied === "background" && !this.userAborted && !this.resumed && this.foregroundOwed && !!this.scope && this.options.scopeCurrent(this.scope);
|
||||
if (retry) {
|
||||
this.resumed = true; this.options.purpose.background = false;
|
||||
this.seen = retainedIds;
|
||||
this.denied = undefined;
|
||||
// Staged automatic input must not be resurrected on foreground recovery.
|
||||
this.options.staged = undefined;
|
||||
return { action: "resumeForeground", messages };
|
||||
}
|
||||
this.held = [];
|
||||
return { action: "settle", messages };
|
||||
}
|
||||
}
|
||||
/** Compatibility surface: ChatGPT keeps its scope/behavior while all subscription
|
||||
* connections share the same provider-neutral request-admission state machine. */
|
||||
export { SubscriptionRequestCycle as ChatGPTRequestCycle } from "./subscription-request-cycle.ts";
|
||||
export type { AdmissionScope, NoDispatchKind, SubscriptionDispatchLifecycle as ChatGPTDispatchLifecycle } from "./subscription-request-cycle.ts";
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user