Zero-keys wave: provider-key gate renders honestly everywhere
Over Platform's 66dbea9 key-presence seam, the five owner-locked tasks: 1. Zero-keys pill — components/setup-cta.tsx: pure hasProviderKey (classifyKeys reuse — tool keys like Deepgram never count), useZeroKeys (GET /api/keys, re-read on the new lh:settings-saved 'keys' signal), ZeroKeysPill (testid setup-cta-keys) taking PRECEDENCE over the models CTA on chat/home/new-session. SettingsSection gains 'keys'; keys-section dispatches after save AND delete. 2. Setup stage 1 is self-contained: provider picker (MenuShell + ProviderMenuList) + key paste + Save via PUT /api/keys/:id — the dialog STAYS MOUNTED; its own save dispatches the keys signal, the fetch effect re-runs on it, and the stage flips to the pickers on its own. onOpenKeys + setup-open-keys die. SetupKeysBody exported for SSR pins. 3. parseProviderKeyRefusal (chat.tsx, envelope-verbatim twin of parseModelsRefusal) joins the revert-draft-and-open-setup interception; activity-dock reads 'needs a provider key'; dispatch-card shows 'Add a key' — both deep-link setup, which lands on stage 1 by itself. 4. Dictation trio: the token route's only 503 (missing Deepgram key) becomes the client-authored DICTATION_KEYLESS short line; the errored idle click clears the error and deep-links Settings -> Keys -> DEEPGRAM_API_KEY via the new open(section, row) seam (dialog landOnRow -> SettingsDialogBody initialRow -> KeysSection openRow follow-effect). Live-verified on :3001 under LH_IGNORE_ENV_KEYS=1 (the fresh-user switch): pill on all three surfaces + precedence over the CTA, stage-1 save -> auto-advance with dialog mounted, real 503 send refusal reverting the draft and opening setup, dictation 503 -> short line -> Settings lands on the unfolded Deepgram row with the error cleared, keys-section save and delete both flipping the pill live, and a fabricated refused research job rendering the 'Add a key' dispatch card. 926/926, tsc/lint/build green.
This commit is contained in:
@@ -28,6 +28,7 @@ import { AUTH_KEYS, type AuthKeyStatus } from "@/src/core";
|
||||
import { SettingsGroup } from "./controls.tsx";
|
||||
import { ProviderMenuList } from "./model-menu.tsx";
|
||||
import { MenuShell } from "@/components/menu-shell";
|
||||
import { notifySettingsSaved } from "@/components/settings-signal";
|
||||
|
||||
/** One pi-ai provider with plain API-key auth (the Platform seam —
|
||||
* derived from pi-ai's own env-key table; no drift possible). */
|
||||
@@ -313,12 +314,21 @@ function AddProviderRow({
|
||||
);
|
||||
}
|
||||
|
||||
export function KeysSection() {
|
||||
export function KeysSection({
|
||||
/** A deep-linked row to unfold on arrival (zero-keys wave): the
|
||||
* dictation error's click lands here on DEEPGRAM_API_KEY. Followed
|
||||
* while mounted too — the settings dialog's while-open retarget
|
||||
* pattern. undefined = nothing seeded. */
|
||||
initialRow,
|
||||
}: {
|
||||
initialRow?: string;
|
||||
}) {
|
||||
const [statuses, setStatuses] = useState<AuthKeyStatus[] | null>(null);
|
||||
const [providers, setProviders] = useState<ProviderKeyInfo[] | undefined>(undefined);
|
||||
const [loading, setLoading] = useState(true);
|
||||
/** The unfolded row (its id), null = all folded. */
|
||||
const [openRow, setOpenRow] = useState<string | null>(null);
|
||||
/** The unfolded row (its id), null = all folded. Seeded by the
|
||||
* deep-link (initialRow) and re-followed when it retargets. */
|
||||
const [openRow, setOpenRow] = useState<string | null>(initialRow ?? null);
|
||||
/** The paste editor for a freshly chosen Add-provider target. */
|
||||
const [adding, setAdding] = useState<ProviderKeyInfo | null>(null);
|
||||
const [addError, setAddError] = useState<string | null>(null);
|
||||
@@ -354,6 +364,13 @@ export function KeysSection() {
|
||||
void reload();
|
||||
}, []);
|
||||
|
||||
// The deep-link follow: a retarget while the section is open (the
|
||||
// same while-open pattern the dialog's section nav uses) unfolds the
|
||||
// named row; a fresh mount seeds it via the useState initializer.
|
||||
useEffect(() => {
|
||||
if (initialRow !== undefined) setOpenRow(initialRow);
|
||||
}, [initialRow]);
|
||||
|
||||
async function saveKey(id: string, value: string): Promise<string | null> {
|
||||
const res = await fetch(`/api/keys/${id}`, {
|
||||
method: "PUT",
|
||||
@@ -365,12 +382,17 @@ export function KeysSection() {
|
||||
return body.error ?? `Save failed (${res.status})`;
|
||||
}
|
||||
await reload();
|
||||
// The cross-surface keys signal (zero-keys wave): the zero-keys pill,
|
||||
// the setup dialog's stage advance, and any other keys reader hear
|
||||
// that a key landed — deletions included (see deleteKey below).
|
||||
notifySettingsSaved("keys");
|
||||
return null;
|
||||
}
|
||||
|
||||
async function deleteKey(id: string): Promise<void> {
|
||||
await fetch(`/api/keys/${id}`, { method: "DELETE" }).catch(() => undefined);
|
||||
await reload();
|
||||
notifySettingsSaved("keys");
|
||||
}
|
||||
|
||||
if (loading || statuses === null) {
|
||||
|
||||
@@ -60,7 +60,12 @@ const SECTIONS = [
|
||||
] as const;
|
||||
type SectionId = (typeof SECTIONS)[number]["id"];
|
||||
|
||||
const DialogContext = createContext<{ open: (section?: string) => void }>({ open: () => {} });
|
||||
/** `open(section?, row?)` — the optional ROW deep-links into the Keys
|
||||
* section with that row unfolded (zero-keys wave: the dictation error's
|
||||
* click lands on the Deepgram row). `row` is the KEY ID (the env-var
|
||||
* name, e.g. DEEPGRAM_API_KEY — KeysSection's openRow state), not the
|
||||
* row's testid. */
|
||||
const DialogContext = createContext<{ open: (section?: string, row?: string) => void }>({ open: () => {} });
|
||||
|
||||
/** AppShell-level mount: the sidebar row and the mod+, chord call this.
|
||||
* `open(section)` lands the dialog on a specific section (the first-run
|
||||
@@ -72,14 +77,18 @@ export function SettingsDialogProvider({
|
||||
}) {
|
||||
const [show, setShow] = useState(false);
|
||||
const [landOn, setLandOn] = useState<SectionId>("general");
|
||||
const open = useCallback((section?: string) => {
|
||||
const [landOnRow, setLandOnRow] = useState<string | null>(null);
|
||||
const open = useCallback((section?: string, row?: string) => {
|
||||
if (section) setLandOn(section as SectionId);
|
||||
setLandOnRow(row ?? null);
|
||||
setShow(true);
|
||||
}, []);
|
||||
return (
|
||||
<DialogContext.Provider value={{ open }}>
|
||||
{children}
|
||||
{show && <SettingsDialog onClose={() => setShow(false)} initialSection={landOn} />}
|
||||
{show && (
|
||||
<SettingsDialog onClose={() => setShow(false)} initialSection={landOn} initialRow={landOnRow} />
|
||||
)}
|
||||
</DialogContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -88,7 +97,16 @@ export function useSettingsDialog() {
|
||||
return useContext(DialogContext);
|
||||
}
|
||||
|
||||
function SettingsDialog({ onClose, initialSection }: { onClose: () => void; initialSection: SectionId }) {
|
||||
function SettingsDialog({
|
||||
onClose,
|
||||
initialSection,
|
||||
initialRow,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
initialSection: SectionId;
|
||||
/** The keys-section row to unfold (see DialogContext above). */
|
||||
initialRow: string | null;
|
||||
}) {
|
||||
// Plain dim backdrop (no blur — nothing decorative); the click
|
||||
// closes, the dialog body stops propagation.
|
||||
return createPortal(
|
||||
@@ -97,7 +115,7 @@ function SettingsDialog({ onClose, initialSection }: { onClose: () => void; init
|
||||
data-testid="settings-backdrop"
|
||||
onClick={onClose}
|
||||
>
|
||||
<SettingsDialogBody onClose={onClose} initialSection={initialSection} />
|
||||
<SettingsDialogBody onClose={onClose} initialSection={initialSection} initialRow={initialRow} />
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
@@ -108,9 +126,13 @@ function SettingsDialog({ onClose, initialSection }: { onClose: () => void; init
|
||||
export function SettingsDialogBody({
|
||||
onClose,
|
||||
initialSection = "general",
|
||||
initialRow = null,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
initialSection?: SectionId;
|
||||
/** The keys row to unfold on arrival (null = none). While-open
|
||||
* retargets follow it exactly like initialSection below. */
|
||||
initialRow?: string | null;
|
||||
}) {
|
||||
const { onAppearanceChange } = useAppearance();
|
||||
const [record, setRecord] = useState<UserSettings | null | undefined>(
|
||||
@@ -333,7 +355,7 @@ export function SettingsDialogBody({
|
||||
)}
|
||||
{active === "keys" && (
|
||||
<SettingsSection title="Keys" testid="section-keys">
|
||||
<KeysSection />
|
||||
<KeysSection initialRow={initialRow ?? undefined} />
|
||||
</SettingsSection>
|
||||
)}
|
||||
{active === "agent" && (
|
||||
|
||||
Reference in New Issue
Block a user