ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stop: drop Ollama API key, clean up code execution UI (#5464)

Browse source 
* chat: drop Ollama API key, clean up code execution UI

* studio/chat: fix undefined candidateId + keyboard a11y on container list

- Auto-bind effect referenced `candidateId`, which is not declared in
  this scope (only `candidate` is) — would fail the TS/Next build.
  Use `candidate.id` to match the variable that's actually defined.
- Container list items get `role="button"` when `canActivate` is true
  but had no keyboard activation. Add `onKeyDown` for Enter/Space and
  `tabIndex={0}` so the row is focusable and activatable from the
  keyboard, matching the existing onClick behavior.

* studio/chat: restore declarations dropped by the main merge

The 75646444d auto-merge with main (#5466) silently dropped the
declarations a4f19171c added in regions #5466 also rewrote, while
leaving the usages further down in the file. No textual conflict
markers, but the result referenced undeclared names:

- REFRESH_POLL_MS constant (drives the 30s list refresh interval).
- pendingDelete / setPendingDelete / deleting / setDeleting state
  (drives the in-sheet AlertDialog delete confirm — replaces the
  window.confirm() that landed via #5466).
- Per-row locals inside the container list .map callback: running,
  isActive (recomputed with running), ttlMinutes, canActivate,
  statusLabel (drive click-to-activate, expired/active badges, and
  the muted styling for expired containers).

Also wire setDeleting(false) + setPendingDelete(null) into the
confirmDelete finally so the AlertDialog closes after the delete
call resolves; previously the busy state never cleared.

The all-containers list now iterates sortedContainers (matches the
picker above and the "newest-active first" UX) instead of the
unsorted visibleContainers.

---------

Co-authored-by: Roland Tannous <115670425+rolandtannous@users.noreply.github.com>
Co-authored-by: Roland Tannous <rolandtannous@gravityq.ai>
This commit is contained in:
Lee Jackson 2026-05-15 23:17:03 +01:00 • committed by GitHub
commit ba0cae1aff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 241 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

82
studio/frontend/src/features/chat/chat-providers-dialog.tsx
View file

@ -188,6 +188,11 @@ export function ChatProvidersSettings({
const [isReasoningModel, setIsReasoningModel] = useState(false);
const reduceMotion = useReducedMotion();
const isCustomProvider = isCustomProviderType(providerType);
// Ollama runs locally and does not require an API key. Hide the input
// entirely rather than just marking it optional so users aren't prompted
// for a credential the provider never uses.
const isOllamaProvider = providerType === "ollama";
const showApiKeyField = !isOllamaProvider;
const showReasoningToggle = supportsProviderReasoningToggle(providerType);
const registryByType = useMemo(
@ -734,7 +739,10 @@ export function ChatProvidersSettings({
async function testProvider(provider: ExternalProviderConfig) {
const savedKey = getExternalProviderApiKey(provider.id).trim();
if (!savedKey) {
// Ollama runs locally and never requires a key — fall through to the
// real connection check instead of prompting for credentials the form
// no longer exposes.
if (!savedKey && provider.providerType !== "ollama") {
if (isCustomProviderType(provider.providerType)) {
await editProvider(provider);
toast.info(CUSTOM_PROVIDER_MISSING_KEY_MESSAGE);
@ -884,42 +892,44 @@ export function ChatProvidersSettings({
</Select>
</div>
<div className="grid grid-cols-[minmax(150px,0.8fr)_minmax(260px,1.2fr)] items-center gap-4 px-4 py-3 max-sm:grid-cols-1">
<div className="flex min-w-0 flex-col gap-0.5">
<Label
htmlFor="provider-api-key"
className="text-sm font-medium"
>
API key {isCustomProvider ? "(optional)" : ""}
</Label>
<p className="text-xs leading-snug text-muted-foreground">
Stored locally.
</p>
{showApiKeyField ? (
<div className="grid grid-cols-[minmax(150px,0.8fr)_minmax(260px,1.2fr)] items-center gap-4 px-4 py-3 max-sm:grid-cols-1">
<div className="flex min-w-0 flex-col gap-0.5">
<Label
htmlFor="provider-api-key"
className="text-sm font-medium"
>
API key {isCustomProvider ? "(optional)" : ""}
</Label>
<p className="text-xs leading-snug text-muted-foreground">
Stored locally.
</p>
</div>
<div className="relative min-w-0">
<Input
id="provider-api-key"
type={showApiKey ? "text" : "password"}
value={apiKey}
onChange={(event) => setApiKey(event.target.value)}
placeholder="Enter API key"
className="h-9 pr-9 text-sm"
/>
<button
type="button"
onClick={() => setShowApiKey((visible) => !visible)}
className="absolute top-1/2 right-1.5 flex size-5 -translate-y-1/2 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
aria-label={showApiKey ? "Hide API key" : "Show API key"}
aria-pressed={showApiKey}
>
{showApiKey ? (
<Eye className="size-3.5" />
) : (
<EyeOff className="size-3.5" />
)}
</button>
</div>
</div>
<div className="relative min-w-0">
<Input
id="provider-api-key"
type={showApiKey ? "text" : "password"}
value={apiKey}
onChange={(event) => setApiKey(event.target.value)}
placeholder="Enter API key"
className="h-9 pr-9 text-sm"
/>
<button
type="button"
onClick={() => setShowApiKey((visible) => !visible)}
className="absolute top-1/2 right-1.5 flex size-5 -translate-y-1/2 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
aria-label={showApiKey ? "Hide API key" : "Show API key"}
aria-pressed={showApiKey}
>
{showApiKey ? (
<Eye className="size-3.5" />
) : (
<EyeOff className="size-3.5" />
)}
</button>
</div>
</div>
) : null}
{isCustomProvider ? (
<div className="grid grid-cols-[minmax(150px,0.8fr)_minmax(260px,1.2fr)] items-center gap-4 px-4 py-3 max-sm:grid-cols-1">

242
studio/frontend/src/features/chat/components/openai-code-exec-section.tsx
View file

@ -31,6 +31,16 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
@ -50,6 +60,11 @@ const AUTO_OPTION_VALUE = "__auto__";
const DEFAULT_TTL_MINUTES = 20;
const TTL_MIN = 1;
const TTL_MAX = 20; // OpenAI hard cap on expires_after.minutes
// Cadence for re-fetching the container list while the section is
// mounted. OpenAI's container TTL flips at minute granularity, so 30s
// is fast enough that an expired container loses its ACTIVE pill within
// half a minute without hammering /v1/containers.
const REFRESH_POLL_MS = 30_000;
function ageLabel(epochSeconds: number | null | undefined): string {
if (!epochSeconds) return "";
@ -63,6 +78,21 @@ function ageLabel(epochSeconds: number | null | undefined): string {
return `${ageDay}d ago`;
}
function shortContainerId(id: string): string {
// Mid-truncate keeps the "cntr_" prefix readable and still surfaces the
// tail digits users sometimes copy off OpenAI's dashboard.
if (id.length <= 18) return id;
return `${id.slice(0, 12)}…${id.slice(-4)}`;
}
function isContainerRunning(c: OpenAIContainerSummary): boolean {
// OpenAI's containers API reports `status: "running"` while idle TTL is
// valid and `status: "expired"` once the idle window has passed. Treat
// a missing status as running so we don't false-positive on any older
// payloads that didn't include the field.
return c.status == null || c.status === "running";
}
interface OpenAICodeExecSectionProps {
provider: ExternalProviderConfig;
apiKey: string | null;
@ -91,6 +121,12 @@ export function OpenAICodeExecSection({
// creates more confusion than it solves. Refreshing the page resets
// the tombstone naturally.
const [tombstones, setTombstones] = useState<Set<string>>(() => new Set());
// Target row for the destructive confirmation dialog. Held in state
// (rather than blocking with window.confirm) so the dialog sits inside
// the settings sheet instead of a native browser alert.
const [pendingDelete, setPendingDelete] =
useState<OpenAIContainerSummary | null>(null);
const [deleting, setDeleting] = useState(false);
const thread = useLiveQuery(
async () => (activeThreadId ? db.threads.get(activeThreadId) : undefined),
@ -116,15 +152,27 @@ export function OpenAICodeExecSection({
[visibleContainers],
);
// What the dropdown should display right now. We decouple this from
// `activeContainerId` (which is whatever is in Dexie) so the user
// immediately sees the most-recent container by name when there is
// no thread binding yet, rather than a "Selecting most recent…"
// placeholder while the auto-bind effect's async write propagates
// back through useLiveQuery. The auto-bind effect still writes the
// bind to Dexie so the chat adapter sees it on send.
// First running container by lastActiveAt — the auto-bind target and
// also what we surface visually before Dexie catches up.
const firstRunningContainer = useMemo(
() => sortedContainers.find(isContainerRunning) ?? null,
[sortedContainers],
);
// What the picker should treat as "active" right now. We decouple
// this from `activeContainerId` (Dexie state) so the user immediately
// sees the most-recent running container while the auto-bind effect's
// async write propagates. If the Dexie-bound container has since
// expired, fall back to the first running candidate — the stale-bind
// sweeper below will clear Dexie shortly after.
const boundContainer = useMemo(
() => sortedContainers.find((c) => c.id === activeContainerId) ?? null,
[sortedContainers, activeContainerId],
);
const displayedContainerId =
activeContainerId ?? sortedContainers[0]?.id ?? null;
(boundContainer && isContainerRunning(boundContainer)
? boundContainer.id
: firstRunningContainer?.id) ?? null;
const refresh = useCallback(async () => {
if (!apiKey) return;
@ -144,9 +192,28 @@ export function OpenAICodeExecSection({
}
}, [apiKey, provider.baseUrl]);
// Fetch once when the section mounts (or provider changes).
// Fetch once when the section mounts (or provider changes), then
// poll on a low cadence so an expired container's ACTIVE pill clears
// without the user clicking the refresh button. Also re-fetch when
// the tab regains visibility — covers the common case of leaving the
// sheet open across a long idle period.
useEffect(() => {
void refresh();
const interval = window.setInterval(() => {
if (document.visibilityState === "visible") {
void refresh();
}
}, REFRESH_POLL_MS);
const onVisibility = () => {
if (document.visibilityState === "visible") {
void refresh();
}
};
document.addEventListener("visibilitychange", onVisibility);
return () => {
window.clearInterval(interval);
document.removeEventListener("visibilitychange", onVisibility);
};
}, [refresh]);
// Auto-bind the active thread to the most-recently-active container
@ -275,15 +342,10 @@ export function OpenAICodeExecSection({
}
};
const onDelete = async (id: string, name: string | null | undefined) => {
if (!apiKey) return;
if (
!window.confirm(
`Delete container ${name || id}? Threads using it will fall back to auto-create on their next turn.`,
)
) {
return;
}
const confirmDelete = async () => {
if (!apiKey || !pendingDelete) return;
const { id, name } = pendingDelete;
setDeleting(true);
try {
await deleteOpenAIContainer(
{ apiKey, baseUrl: provider.baseUrl || null },
@ -312,6 +374,8 @@ export function OpenAICodeExecSection({
`Delete failed: ${err instanceof Error ? err.message : "Unknown"}`,
);
} finally {
setDeleting(false);
setPendingDelete(null);
// Always refresh so a stale list entry (e.g. container deleted
// elsewhere, or already expired) is purged from the UI even when
// the delete call itself errored.
@ -319,6 +383,8 @@ export function OpenAICodeExecSection({
}
};
const displayActiveId = displayedContainerId;
return (
<div className="flex flex-col gap-3 pt-1">
{/* TTL */}
@ -336,23 +402,23 @@ export function OpenAICodeExecSection({
max={TTL_MAX}
value={ttlValue}
onChange={(e) => onTtlChange(e.target.value)}
className="h-8 w-24 text-sm"
className="h-8 w-14 px-2 text-center text-sm tabular-nums"
/>
</div>
{/* Active container picker — visually emphasized so it reads as
the primary control vs. the static list below. Accent
background + ring outline distinguish it from the plain
bordered list items beneath. */}
<div className="flex flex-col gap-1.5 rounded-md border border-primary/30 bg-primary/5 p-2.5">
{/* Single container list. The previously-separate "Active for
this thread" picker collapses into this list: clicking a row
binds it to the active thread, and the ACTIVE pill marks
which one. Avoids duplicating state across two controls. */}
<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between gap-2">
<span className="text-[13px] font-semibold leading-[1.25] tracking-nav text-primary">
Active for this thread
<span className="text-[11px] uppercase tracking-wider text-muted-foreground">
Containers
</span>
<Button
size="sm"
variant="ghost"
className="h-7 px-2"
className="-mr-1 h-6 w-6 p-0 text-muted-foreground"
onClick={() => void refresh()}
disabled={isLoading || !apiKey}
aria-label="Refresh container list"
@ -396,38 +462,84 @@ export function OpenAICodeExecSection({
</span>
{isLoading && visibleContainers.length === 0 ? (
<Skeleton className="h-16 w-full" />
) : visibleContainers.length > 0 ? (
<ul className="flex flex-col gap-1 max-h-44 overflow-auto">
{visibleContainers.map((c) => {
const isActive = c.id === activeContainerId;
) : sortedContainers.length > 0 ? (
<ul className="flex max-h-52 flex-col gap-1 overflow-auto">
{sortedContainers.map((c) => {
const running = isContainerRunning(c);
const isActive = running && c.id === displayActiveId;
const ttlMinutes = c.expiresAfterMinutes ?? DEFAULT_TTL_MINUTES;
const canActivate =
activeThreadId != null && !isActive && running;
const statusLabel = !running ? (c.status ?? "expired") : null;
return (
<li
key={c.id}
className={`flex items-center justify-between gap-2 rounded-md border px-2 py-1.5 text-xs ${
className={`flex items-center gap-2 rounded-md border px-2 py-1.5 text-xs transition-colors ${
isActive
? "border-primary/30 bg-primary/5"
: "border-border/60"
: "border-border/60 hover:bg-muted/40"
} ${canActivate ? "cursor-pointer" : ""} ${
running ? "" : "opacity-60"
}`}
onClick={() => {
if (canActivate) void onPick(c.id);
}}
onKeyDown={(e) => {
if (!canActivate) return;
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
void onPick(c.id);
}
}}
tabIndex={canActivate ? 0 : undefined}
role={canActivate ? "button" : undefined}
aria-pressed={isActive}
title={
canActivate
? "Use this container for the active thread"
: !running
? `Container is ${statusLabel}`
: undefined
}
>
<div className="flex min-w-0 flex-col">
<span className="truncate font-medium">
{c.name ?? "(unnamed)"}
{/* min-w-0 + truncate keeps long OpenAI container ids
from spilling under the trash button on narrow
settings sheets. */}
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<div className="flex min-w-0 items-center gap-1.5">
<span className="min-w-0 truncate font-medium">
{c.name ?? "(unnamed)"}
</span>
{isActive ? (
<span className="ml-1.5 text-[10px] font-normal uppercase tracking-wider text-primary">
· active
<span className="shrink-0 rounded-sm bg-primary/15 px-1 py-px text-[9px] font-medium uppercase tracking-wider text-primary">
Active
</span>
) : statusLabel ? (
<span className="shrink-0 rounded-sm bg-muted px-1 py-px text-[9px] font-medium uppercase tracking-wider text-muted-foreground">
{statusLabel}
</span>
) : null}
</span>
<span className="text-muted-foreground">
{c.id} · TTL{" "}
{c.expiresAfterMinutes ?? DEFAULT_TTL_MINUTES}m
</span>
</div>
<div
className="flex min-w-0 items-center gap-1.5 text-muted-foreground"
title={c.id}
>
<span className="min-w-0 truncate font-mono text-[11px]">
{shortContainerId(c.id)}
</span>
<span className="shrink-0 text-[10px] uppercase tracking-wider">
· {ttlMinutes}m
</span>
</div>
</div>
<Button
size="sm"
variant="ghost"
className="h-6 w-6 p-0 text-destructive"
onClick={() => void onDelete(c.id, c.name)}
className="h-6 w-6 shrink-0 p-0 text-muted-foreground hover:text-destructive"
onClick={(e) => {
e.stopPropagation();
setPendingDelete(c);
}}
aria-label={`Delete container ${c.name ?? c.id}`}
>
<TrashIcon className="size-3.5" />
@ -438,8 +550,7 @@ export function OpenAICodeExecSection({
</ul>
) : (
<p className="text-xs text-muted-foreground">
No saved containers yet. Use auto-create or create a named
one below.
None yet — one will be created on first send.
</p>
)}
</div>
@ -506,6 +617,43 @@ export function OpenAICodeExecSection({
New container
</Button>
)}
<AlertDialog
open={pendingDelete !== null}
onOpenChange={(nextOpen) => {
if (!nextOpen && deleting) return;
if (!nextOpen) setPendingDelete(null);
}}
>
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogTitle>
Delete{" "}
<span className="font-mono">
{pendingDelete?.name ?? "container"}
</span>
?
</AlertDialogTitle>
<AlertDialogDescription>
Threads using this container will fall back to auto-create on
their next turn. This cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
disabled={deleting}
onClick={(e) => {
e.preventDefault();
void confirmDelete();
}}
>
{deleting ? "Deleting…" : "Delete"}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}