+ {children}
+
+ );
+}
+
+type ImagePreviewProps = Omit
+ {!(loaded || error) && (
+ 
{
+ if (typeof src === "string") {
+ setLoadedSrc(src);
+ }
+ onLoad?.(e);
+ }}
+ onError={(e) => {
+ if (typeof src === "string") {
+ setErrorSrc(src);
+ }
+ onError?.(e);
+ }}
+ />
+ )}
+
+ );
+}
+
+function ImageFilename({
+ className,
+ children,
+ ...props
+}: ComponentProps<"span">) {
+ if (!children) {
+ return null;
+ }
+
+ return (
+
+ {children}
+
+ );
+}
+
+type ImageZoomProps = PropsWithChildren<{
+ src: string;
+ alt?: string;
+}>;
+
+function ImageZoom({ src, alt = "Image preview", children }: ImageZoomProps) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const handleOpen = () => setIsOpen(true);
+ const handleClose = () => setIsOpen(false);
+
+ useEffect(() => {
+ if (!isOpen) {
+ return;
+ }
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ setIsOpen(false);
+ }
+ };
+ document.addEventListener("keydown", handleKeyDown);
+ return () => document.removeEventListener("keydown", handleKeyDown);
+ }, [isOpen]);
+
+ useEffect(() => {
+ if (!isOpen) {
+ return;
+ }
+ const originalOverflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.body.style.overflow = originalOverflow;
+ };
+ }, [isOpen]);
+
+ return (
+ <>
+
+ {isOpen &&
+ typeof document !== "undefined" &&
+ createPortal(
+ ,
+ document.body,
+ )}
+
+ );
+}
+
+function ImageGenerating({ className }: { className?: string }) {
+ return (
+
+
+ )}
+ {error ? (
+
+
+ ) : (
+
+
+ );
+}
+
+function ImageContentFilterError({
+ className,
+ reason,
+}: {
+ className?: string;
+ reason?: string;
+}) {
+ return (
+
+
+ );
+}
+
+export type ImageActionsProps = {
+ part: ImageMessagePart;
+ /**
+ * Wire to your own generation call to show a regenerate button. The button
+ * renders only when this is set and the part carries a `prompt`.
+ */
+ onRegenerate?: () => void | PromiseImage could not be generated
+ {reason &&{reason}
} +
+
+
+ {onRegenerate &&
+ );
+}
+
+const ImageImpl: ImageMessagePartComponent = (props) => {
+ const { image, filename, status } = props;
+ const alt = filename || "Image content";
+
+ if (status?.type === "running") {
+ return (
+
Cache hits
- {formatNumber(st!.cache_n)}
+ {formatNumber(cacheHits)}
+
+
+ )}
+ {cacheWrites > 0 && (
+
+ Cache writes
+
+ {formatNumber(cacheWrites)}
)}
@@ -146,7 +168,7 @@ export const MessageTiming: FC<{
) : (
<>
- {/* Client-side metrics (safetensors fallback) */}
+ {/* Client-side metrics (safetensors + external provider fallback) */}
{timing.firstTokenTime !== undefined && (
First token
@@ -155,6 +177,22 @@ export const MessageTiming: FC<{
)}
+ {cacheHits > 0 && (
+
+ Cache hits
+
+ {formatNumber(cacheHits)}
+
+
+ )}
+ {cacheWrites > 0 && (
+
+ Cache writes
+
+ {formatNumber(cacheWrites)}
+
+
+ )}
Total
diff --git a/studio/frontend/src/components/assistant-ui/reasoning.tsx b/studio/frontend/src/components/assistant-ui/reasoning.tsx
index e4401cc12e..285b87d138 100644
--- a/studio/frontend/src/components/assistant-ui/reasoning.tsx
+++ b/studio/frontend/src/components/assistant-ui/reasoning.tsx
@@ -134,7 +134,7 @@ function ReasoningTrigger({
{active ? (
Thinking...
) : (
- Thought for {duration ?? 0} seconds
+ Thought for {duration ?? 0} {duration === 1 ? "second" : "seconds"}
)}
{
"url" in part &&
part.url
) {
+ const url = part.url as string;
+ const partId =
+ typeof (part as { id?: unknown }).id === "string"
+ ? ((part as { id: string }).id)
+ : url;
sources.push({
- url: part.url as string,
+ id: partId,
+ url,
title: (part as { title?: string }).title || "",
description: (part as { metadata?: { description?: string } })
.metadata?.description,
@@ -258,7 +270,7 @@ const SourcesGroup: FC = () => {
className="flex w-full flex-wrap gap-1 invisible absolute pointer-events-none"
>
{sources.map((source) => (
-
+
{source.title || extractDomain(source.url)}
@@ -270,7 +282,7 @@ const SourcesGroup: FC = () => {
{/* Visible container */}
);
@@ -293,8 +422,21 @@ const PendingAudioChip: FC = () => {
);
};
-const Composer: FC<{ disabled?: boolean }> = ({ disabled }) => {
- const { inputProps, isComposing, isComposingRef } = useImeComposerInputHandlers();
+const Composer: FC<{
+ disabled?: boolean;
+ threadId?: string | null;
+}> = ({ disabled, threadId }) => {
+ const aui = useAui();
+ const { overlay, closeOverlay } = useGeneratedImageOverlay();
+ const setImageToolsEnabled = useChatRuntimeStore(
+ (s) => s.setImageToolsEnabled,
+ );
+ const activeThreadId = useChatRuntimeStore((s) => s.activeThreadId);
+ const setPendingImageEditReference = useChatRuntimeStore(
+ (s) => s.setPendingImageEditReference,
+ );
+ const { inputProps, isComposing, isComposingRef } =
+ useImeComposerInputHandlers();
const composerText = useAuiState(({ composer }) => composer.text);
const hasAttachments = useAuiState(
({ composer }) => composer.attachments.length > 0,
@@ -304,22 +446,78 @@ const Composer: FC<{ disabled?: boolean }> = ({ disabled }) => {
(attachment) => attachment.status.type === "running",
),
);
- const hasPendingAudio = useChatRuntimeStore((s) => Boolean(s.pendingAudioName));
+ const hasPendingAudio = useChatRuntimeStore((s) =>
+ Boolean(s.pendingAudioName),
+ );
+ const referenceThreadId = threadId ?? activeThreadId ?? null;
const hasSendableContent =
composerText.trim().length > 0 || hasAttachments || hasPendingAudio;
+ const shouldBlockSend = useCallback(
+ () =>
+ !hasSendableContent || isComposingRef.current || hasPendingAttachments,
+ [hasPendingAttachments, hasSendableContent, isComposingRef],
+ );
const handleSubmit = useCallback(
- (event: FormEvent) => {
- if (
- disabled ||
- !hasSendableContent ||
- isComposingRef.current ||
- hasPendingAttachments
- ) {
+ (event: Parameters["onSubmit"]>>[0]) => {
+ if (disabled || shouldBlockSend()) {
event.preventDefault();
+ return;
+ }
+
+ if (overlay) {
+ const trimmed = composerText.trim();
+ if (!trimmed) {
+ event.preventDefault();
+ return;
+ }
+ if (!overlay.openaiImageGenerationCallId) {
+ event.preventDefault();
+ toast.error("This generated image cannot be edited", {
+ description:
+ "The original image reference is missing. Generate the image again, then retry the edit.",
+ });
+ closeOverlay();
+ return;
+ }
+ if ((overlay.threadId ?? null) !== referenceThreadId) {
+ event.preventDefault();
+ toast.error("This generated image belongs to another chat", {
+ description: "Open the original chat and retry the edit.",
+ });
+ closeOverlay();
+ return;
+ }
+ setImageToolsEnabled(true);
+ setPendingImageEditReference({
+ threadId: overlay.threadId ?? referenceThreadId,
+ openaiImageGenerationCallId: overlay.openaiImageGenerationCallId,
+ ...(overlay.openaiResponseId
+ ? { openaiResponseId: overlay.openaiResponseId }
+ : {}),
+ openaiReasoningItem: overlay.openaiReasoningItem,
+ });
+ flushResourcesSync(() => {
+ aui
+ .composer()
+ .setText(
+ `Use the selected generated image as the reference and apply this edit: ${trimmed}. Preserve everything else exactly.`,
+ );
+ });
+ closeOverlay();
}
},
- [disabled, hasPendingAttachments, hasSendableContent, isComposingRef],
+ [
+ aui,
+ closeOverlay,
+ composerText,
+ disabled,
+ overlay,
+ referenceThreadId,
+ setImageToolsEnabled,
+ setPendingImageEditReference,
+ shouldBlockSend,
+ ],
);
const composerContent = (
@@ -328,13 +526,15 @@ const Composer: FC<{ disabled?: boolean }> = ({ disabled }) => {
= ({ disabled }) => {
/>
- !hasSendableContent || isComposingRef.current || hasPendingAttachments
+ disabled ||
+ !hasSendableContent ||
+ isComposing ||
+ hasPendingAttachments
}
+ shouldBlockSend={shouldBlockSend}
/>
);
@@ -553,7 +754,6 @@ const ComposerAudioUpload: FC = () => {
);
};
-
const ReasoningToggle: FC = () => {
const modelLoaded = useChatRuntimeStore(
(s) => !!s.params.checkpoint && !s.modelLoading,
@@ -565,8 +765,12 @@ const ReasoningToggle: FC = () => {
const setReasoningEnabled = useChatRuntimeStore((s) => s.setReasoningEnabled);
const reasoningStyle = useChatRuntimeStore((s) => s.reasoningStyle);
const reasoningEffort = useChatRuntimeStore((s) => s.reasoningEffort);
- const supportsReasoningOff = useChatRuntimeStore((s) => s.supportsReasoningOff);
- const reasoningEffortLevels = useChatRuntimeStore((s) => s.reasoningEffortLevels);
+ const supportsReasoningOff = useChatRuntimeStore(
+ (s) => s.supportsReasoningOff,
+ );
+ const reasoningEffortLevels = useChatRuntimeStore(
+ (s) => s.reasoningEffortLevels,
+ );
const setReasoningEffort = useChatRuntimeStore((s) => s.setReasoningEffort);
const lastOpenRouterChosenModel = useChatRuntimeStore(
(s) => s.lastOpenRouterChosenModel,
@@ -619,7 +823,8 @@ const ReasoningToggle: FC = () => {
effectiveReasoningEnabled && reasoningEffort !== "none";
const disabled = !(modelLoaded && effectiveSupportsReasoning);
const formatEffortLabel = (level: typeof reasoningEffort): string => {
- if (level !== "xhigh") return level.charAt(0).toUpperCase() + level.slice(1);
+ if (level !== "xhigh")
+ return level.charAt(0).toUpperCase() + level.slice(1);
const normalized = externalSelection?.modelId?.trim().toLowerCase() ?? "";
if (
normalized.startsWith("claude-opus-4-6") ||
@@ -677,23 +882,25 @@ const ReasoningToggle: FC = () => {
{effectiveReasoningEffortLevels
.filter((level) => level !== "none")
.map((level) => (
- {
- setReasoningEffort(level);
- setReasoningEnabled(true);
- applyQwenThinkingParams(true);
- // Kimi's $web_search builtin forbids thinking, so
- // enabling thinking flips the Search pill off.
- if (isKimiExternal && toolsEnabled) {
- setToolsEnabled(false);
- }
- }}
- >
- {formatEffortLabel(level)}
- {effectiveReasoningVisualEnabled && reasoningEffort === level ? " \u2713" : ""}
-
- ))}
+ {
+ setReasoningEffort(level);
+ setReasoningEnabled(true);
+ applyQwenThinkingParams(true);
+ // Kimi's $web_search builtin forbids thinking, so
+ // enabling thinking flips the Search pill off.
+ if (isKimiExternal && toolsEnabled) {
+ setToolsEnabled(false);
+ }
+ }}
+ >
+ {formatEffortLabel(level)}
+ {effectiveReasoningVisualEnabled && reasoningEffort === level
+ ? " \u2713"
+ : ""}
+
+ ))}
);
@@ -808,8 +1015,7 @@ const WebSearchToggle: FC = () => {
? externalProviders.find((p) => p.id === externalSelection.providerId)
: undefined;
const isKimiExternal = selectedExternalProvider?.providerType === "kimi";
- const disabled =
- !modelLoaded || !(supportsTools || supportsBuiltinWebSearch);
+ const disabled = !modelLoaded || !(supportsTools || supportsBuiltinWebSearch);
return (
);
@@ -966,10 +1174,10 @@ const ToolStatusDisplay: FC = () => {
);
};
-const ComposerAction: FC<{ disabled?: boolean; blockSend?: () => boolean }> = ({
- disabled,
- blockSend,
-}) => {
+const ComposerAction: FC<{
+ disabled?: boolean;
+ shouldBlockSend?: () => boolean;
+}> = ({ disabled, shouldBlockSend }) => {
return (
diff --git a/studio/frontend/src/features/chat/index.ts b/studio/frontend/src/features/chat/index.ts
index 4726b11fcf..883dea3f3a 100644
--- a/studio/frontend/src/features/chat/index.ts
+++ b/studio/frontend/src/features/chat/index.ts
@@ -2,6 +2,14 @@
// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
export { ChatPage } from "./chat-page";
+export {
+ getInferenceStatus,
+ listGgufVariants,
+ listLocalModels,
+ loadModel,
+ type LocalModelInfo,
+} from "./api/chat-api";
+export type { GgufVariantDetail } from "./types/api";
export {
ChatSettingsPanel,
defaultInferenceParams,
diff --git a/studio/frontend/src/features/chat/presets/preset-policy.ts b/studio/frontend/src/features/chat/presets/preset-policy.ts
index ae8c1f41ae..4efbb74f11 100644
--- a/studio/frontend/src/features/chat/presets/preset-policy.ts
+++ b/studio/frontend/src/features/chat/presets/preset-policy.ts
@@ -248,7 +248,7 @@ interface BackendInferenceDefaults {
export interface BackendInferenceEnvelope {
is_gguf?: boolean;
context_length?: number | null;
- inference?: BackendInferenceDefaults;
+ inference?: BackendInferenceDefaults | null;
}
export function mergeBackendRecommendedInference({
diff --git a/studio/frontend/src/features/chat/provider-capabilities.ts b/studio/frontend/src/features/chat/provider-capabilities.ts
index da1d6e3431..5adc01ea2b 100644
--- a/studio/frontend/src/features/chat/provider-capabilities.ts
+++ b/studio/frontend/src/features/chat/provider-capabilities.ts
@@ -71,18 +71,95 @@ export function clampReasoningEffortToLevels(
}
/**
- * Output-token cap for any external provider request. Picked to stay below the
- * tightest declared limit across the providers we ship (Anthropic Claude Opus
- * tops out at 128k, GPT-5.x ~128k, Gemini 2.5 ~65k, DeepSeek 8k) while staying
- * well above what a typical chat reply needs. The local-model path is not
- * subject to this — local backends honour whatever the loaded context allows.
- *
- * If a user's stored maxTokens (e.g. carried over from a prior local-model
- * session with a 128k+ context) exceeds this, chat-adapter clamps the
- * outbound request so the provider does not 400 on it.
+ * Fallback cap for unknown providers / models. Prefer
+ * `getExternalMaxOutputTokens(providerType, modelId)` for the real cap.
*/
export const EXTERNAL_MAX_OUTPUT_TOKENS = 32768;
+/**
+ * Per-model max-output caps from each provider's docs:
+ * OpenAI: developers.openai.com/api/docs/models/gpt-5.5
+ * Anthropic: platform.claude.com/docs/en/about-claude/models
+ * Gemini: ai.google.dev/gemini-api/docs/models/gemini-3.1-pro-preview
+ * DeepSeek: api-docs.deepseek.com/quick_start/pricing (V4 family)
+ * Local-model path is unaffected.
+ */
+const EXTERNAL_MAX_OUTPUT_TOKENS_BY_MODEL: Array<{
+ providerType: string;
+ prefixes: readonly string[];
+ cap: number;
+}> = [
+ // OpenAI
+ { providerType: "openai", prefixes: ["gpt-5.5-pro", "gpt-5.5"], cap: 128000 },
+ { providerType: "openai", prefixes: ["gpt-5.4-pro", "gpt-5.4"], cap: 65536 },
+ { providerType: "openai", prefixes: ["gpt-5.3"], cap: 16384 },
+ // Anthropic
+ {
+ providerType: "anthropic",
+ prefixes: ["claude-opus-4-7"],
+ cap: 128000,
+ },
+ {
+ providerType: "anthropic",
+ prefixes: [
+ "claude-opus-4-6",
+ "claude-sonnet-4-6",
+ "claude-opus-4-5",
+ "claude-sonnet-4-5",
+ "claude-haiku-4-5",
+ ],
+ cap: 64000,
+ },
+ // Gemini
+ {
+ providerType: "gemini",
+ prefixes: ["gemini-3", "gemini-pro", "gemini-flash"],
+ cap: 65536,
+ },
+ // DeepSeek (V4: deepseek-chat / deepseek-reasoner alias V4-flash).
+ { providerType: "deepseek", prefixes: ["deepseek"], cap: 384000 },
+];
+
+/**
+ * Documented per-model output cap; unknown ids fall back to
+ * `EXTERNAL_MAX_OUTPUT_TOKENS` (32k). OpenRouter ids are
+ * `provider/model`; the prefix is stripped before matching.
+ */
+export function getExternalMaxOutputTokens(
+ providerType: string | null | undefined,
+ modelId: string | null | undefined,
+): number {
+ if (!providerType || !modelId) return EXTERNAL_MAX_OUTPUT_TOKENS;
+ const normalized = modelId.trim().toLowerCase();
+ if (!normalized) return EXTERNAL_MAX_OUTPUT_TOKENS;
+ const stripped =
+ providerType === "openrouter" && normalized.includes("/")
+ ? normalized.split("/").slice(-1)[0]
+ : normalized;
+ const effectiveProvider =
+ providerType === "openrouter"
+ ? _inferProviderFromOpenrouterId(normalized) ?? providerType
+ : providerType;
+ for (const entry of EXTERNAL_MAX_OUTPUT_TOKENS_BY_MODEL) {
+ if (entry.providerType !== effectiveProvider) continue;
+ if (entry.prefixes.some((prefix) => stripped.startsWith(prefix))) {
+ return entry.cap;
+ }
+ }
+ return EXTERNAL_MAX_OUTPUT_TOKENS;
+}
+
+function _inferProviderFromOpenrouterId(
+ normalizedId: string,
+): string | null {
+ // Map OpenRouter `provider/model` prefix to our internal providerType.
+ if (normalizedId.startsWith("openai/")) return "openai";
+ if (normalizedId.startsWith("anthropic/")) return "anthropic";
+ if (normalizedId.startsWith("google/")) return "gemini";
+ if (normalizedId.startsWith("deepseek/")) return "deepseek";
+ return null;
+}
+
/**
* Whether the external provider offers a built-in web-search tool that the
* model invokes server-side. When `true`, the chat composer's Search button
@@ -123,11 +200,9 @@ export function providerSupportsBuiltinWebSearch(
/**
* Whether the external provider exposes a server-side web_fetch tool
- * that retrieves a single URL (text or PDF) and emits a document block.
- * Only Anthropic ships one today (`web_fetch_20250910`); the chat
- * composer pairs it with the Search pill because the typical workflow
- * is "search returns URLs, fetch reads them" and the UI doesn't (yet)
- * expose web_fetch as an independent toggle.
+ * (single URL, text or PDF) emitting a document block. Anthropic-only
+ * today (`web_fetch_20250910` / `web_fetch_20260209`). Gates the
+ * composer's standalone Fetch pill, independent of Search.
*/
export function providerSupportsBuiltinWebFetch(
providerType: string | null | undefined,
@@ -135,6 +210,30 @@ export function providerSupportsBuiltinWebFetch(
return providerType === "anthropic";
}
+/**
+ * Whether the active provider + model supports Anthropic fast-mode
+ * (`speed: "fast"` + `fast-mode-2026-02-01` header). Opus 4.6 / 4.7
+ * only per https://platform.claude.com/docs/en/build-with-claude/fast-mode.
+ * Backend silently drops on unsupported models as a second defence.
+ */
+const ANTHROPIC_FAST_MODE_MODEL_PREFIXES = [
+ "claude-opus-4-7",
+ "claude-opus-4-6",
+] as const;
+
+export function providerSupportsFastMode(
+ providerType: string | null | undefined,
+ modelId: string | null | undefined,
+): boolean {
+ if (providerType !== "anthropic") return false;
+ if (!modelId) return false;
+ // Family boundary ("" or "-") required so IDs like "claude-opus-4-70"
+ // / "claude-opus-4-7b" do not match.
+ return ANTHROPIC_FAST_MODE_MODEL_PREFIXES.some(
+ (prefix) => modelId === prefix || modelId.startsWith(`${prefix}-`),
+ );
+}
+
/**
* Whether the selected external provider/model exposes a server-side
* code-execution tool. Two providers ship one today:
@@ -185,15 +284,21 @@ const OPENAI_CODE_EXECUTION_MODEL_PREFIXES = [
/**
* Strict check that a provider configuration points at OpenAI's
- * managed cloud (api.openai.com), as opposed to a custom OpenAI-compat
- * backend (ollama / llama.cpp / vLLM / generic "custom" preset). The
- * shell tool ONLY exists on OpenAI cloud; sending it to anything else
- * 400s the request. Mirror of the backend's
- * `is_openai_cloud = "api.openai.com" in self.base_url` guard.
+ * managed cloud (api.openai.com) or Azure OpenAI Foundry
+ * (*.openai.azure.com), as opposed to a custom OpenAI-compat backend
+ * (ollama / llama.cpp / vLLM / generic "custom" preset). The shell and
+ * image-generation tools only exist on cloud backends; sending them to
+ * anything else 400s the request. Mirror of the backend's
+ * `_is_openai_family_cloud` host check.
*/
function isOpenAICloudBaseUrl(baseUrl: string | null | undefined): boolean {
if (!baseUrl) return true; // No override → uses the default openai.com base.
- return baseUrl.trim().toLowerCase().includes("api.openai.com");
+ try {
+ const host = new URL(baseUrl).hostname.toLowerCase();
+ return host === "api.openai.com" || host.endsWith(".openai.azure.com");
+ } catch {
+ return false;
+ }
}
export function providerSupportsBuiltinCodeExecution(
diff --git a/studio/frontend/src/features/chat/runtime-provider.tsx b/studio/frontend/src/features/chat/runtime-provider.tsx
index d01383b309..21be5f6e3e 100644
--- a/studio/frontend/src/features/chat/runtime-provider.tsx
+++ b/studio/frontend/src/features/chat/runtime-provider.tsx
@@ -826,17 +826,24 @@ function useStudioRuntimeAdapters(): StudioRuntimeAdapters {
completionTokens: number;
totalTokens: number;
cachedTokens: number;
+ cacheWriteTokens?: number;
modelId?: string;
}
| undefined;
const store = useChatRuntimeStore.getState();
- if (
- savedUsage &&
- store.ggufContextLength &&
- savedUsage.totalTokens <= store.ggufContextLength &&
- (!savedUsage.modelId ||
- savedUsage.modelId === store.params.checkpoint)
- ) {
+ // Window check applies only when a local GGUF window is known;
+ // external providers have ggufContextLength === null.
+ const withinLocalLimit =
+ !store.ggufContextLength ||
+ (savedUsage?.totalTokens ?? 0) <= store.ggufContextLength;
+ // Legacy unscoped usage (no modelId) is only trusted when a
+ // known local window bounds the totals, so we can't misattribute
+ // an old local turn to a newly-selected external provider.
+ const modelMatches = savedUsage?.modelId
+ ? savedUsage.modelId === store.params.checkpoint
+ : typeof store.ggufContextLength === "number" &&
+ store.ggufContextLength > 0;
+ if (savedUsage && withinLocalLimit && modelMatches) {
store.setContextUsage(savedUsage);
}
diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx
index 246fd81510..ba4a897f63 100644
--- a/studio/frontend/src/features/chat/shared-composer.tsx
+++ b/studio/frontend/src/features/chat/shared-composer.tsx
@@ -21,7 +21,20 @@ import { isTauri } from "@/lib/api-base";
import { isMultimodalResponse } from "./types/api";
import { getImageInputUnavailableReason } from "./utils/image-input-support";
import { useAui } from "@assistant-ui/react";
-import { ArrowUpIcon, GlobeIcon, HeadphonesIcon, ImageIcon, LightbulbIcon, LightbulbOffIcon, MicIcon, PlusIcon, SquareIcon, XIcon } from "lucide-react";
+import {
+ ArrowUpIcon,
+ DownloadIcon,
+ GlobeIcon,
+ HeadphonesIcon,
+ LightbulbIcon,
+ LightbulbOffIcon,
+ MicIcon,
+ PlusIcon,
+ SquareIcon,
+ XIcon,
+} from "lucide-react";
+import { Image03Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
import { toast } from "@/lib/toast";
import { loadModel, validateModel } from "./api/chat-api";
import { parseExternalModelId, providerTypeSupportsVision } from "./external-providers";
@@ -34,6 +47,7 @@ import {
getExternalReasoningCapabilities,
providerSupportsBuiltinCodeExecution,
providerSupportsBuiltinImageGeneration,
+ providerSupportsBuiltinWebFetch,
} from "./provider-capabilities";
import {
type CompositionEvent,
@@ -336,6 +350,12 @@ export function SharedComposer({
const setImageToolsEnabled = useChatRuntimeStore(
(s) => s.setImageToolsEnabled,
);
+ const webFetchToolsEnabled = useChatRuntimeStore(
+ (s) => s.webFetchToolsEnabled,
+ );
+ const setWebFetchToolsEnabled = useChatRuntimeStore(
+ (s) => s.setWebFetchToolsEnabled,
+ );
const lastOpenRouterChosenModel = useChatRuntimeStore(
(s) => s.lastOpenRouterChosenModel,
);
@@ -426,6 +446,9 @@ export function SharedComposer({
effectiveExternalModelId,
selectedExternalProvider?.baseUrl,
);
+ const supportsBuiltinWebFetch = providerSupportsBuiltinWebFetch(
+ selectedExternalProvider?.providerType,
+ );
const searchDisabled =
!modelLoaded || !(supportsTools || supportsBuiltinWebSearch);
const codeDisabled =
@@ -437,6 +460,9 @@ export function SharedComposer({
// the pill row stays compact for providers without the capability.
const imageDisabled = !modelLoaded || !supportsBuiltinImageGeneration;
const showImagePill = supportsBuiltinImageGeneration;
+ // Fetch pill: Anthropic-only (web_fetch_20250910 / web_fetch_20260209).
+ const webFetchDisabled = !modelLoaded || !supportsBuiltinWebFetch;
+ const showWebFetchPill = supportsBuiltinWebFetch;
// Backwards-compatible alias for any other call site that may still
// reference `toolsDisabled` (rare; both pills used it before).
const toolsDisabled = codeDisabled;
@@ -1102,10 +1128,31 @@ export function SharedComposer({
imageToolsEnabled ? "Disable image generation" : "Enable image generation"
}
>
-
diff --git a/studio/frontend/src/features/recipe-studio/executions/tracker.ts b/studio/frontend/src/features/recipe-studio/executions/tracker.ts
index d83f662fcf..97e70c66c4 100644
--- a/studio/frontend/src/features/recipe-studio/executions/tracker.ts
+++ b/studio/frontend/src/features/recipe-studio/executions/tracker.ts
@@ -40,6 +40,11 @@ type TrackRecipeExecutionParams = {
onPreviewSuccess?: () => void;
};
+export type TrackRecipeExecutionResult = {
+ success: boolean;
+ terminal: boolean;
+};
+
function isTerminalStatus(status: RecipeExecutionStatus): boolean {
return status === "completed" || status === "error" || status === "cancelled";
}
@@ -53,7 +58,8 @@ function normalizeCompletedProgress(input: {
} {
const { latestExecution, rows } = input;
const progressTotal =
- typeof latestExecution.progress?.total === "number" && latestExecution.progress.total > 0
+ typeof latestExecution.progress?.total === "number" &&
+ latestExecution.progress.total > 0
? latestExecution.progress.total
: latestExecution.rows > 0
? latestExecution.rows
@@ -92,7 +98,7 @@ export async function trackRecipeExecution({
onUpsert,
onSetPreviewErrors,
onPreviewSuccess,
-}: TrackRecipeExecutionParams): Promise
{displayedSources.map((source) => (
-
);
};
-const ComposerAnimated: FC<{ disabled?: boolean }> = ({ disabled }) => {
+const ComposerAnimated: FC<{
+ disabled?: boolean;
+ threadId?: string | null;
+}> = ({ disabled, threadId }) => {
return (
-
@@ -1016,7 +1224,7 @@ const ComposerAction: FC<{ disabled?: boolean; blockSend?: () => boolean }> = ({
size="icon"
disabled={disabled}
onClick={(event) => {
- if (blockSend?.()) {
+ if (shouldBlockSend?.()) {
event.preventDefault();
}
}}
@@ -1284,7 +1492,11 @@ const UserActionBar: FC = () => {
-
(null);
+ const isPendingImage = !imagePart && status?.type === "running";
+
+ const promptOverflowMeasured = promptOverflow?.prompt === captionPrompt;
+ const promptCanExpand = promptOverflowMeasured
+ ? promptOverflow.canExpand
+ : false;
+ const promptExpanded = expandedCaptionPrompt === captionPrompt;
+
+ const updatePromptOverflow = useCallback(() => {
+ const captionElement = captionRef.current;
+ if (!captionElement || !captionPrompt) {
+ return;
}
- }, [isRunning, hasText, imageSrc]);
+ const computedStyle = window.getComputedStyle(captionElement);
+ const lineHeight = Number.parseFloat(computedStyle.lineHeight);
+ const collapsedHeight =
+ (Number.isFinite(lineHeight) ? lineHeight : 20) *
+ CAPTION_COLLAPSED_LINES;
+ const hasOverflow = captionElement.scrollHeight > collapsedHeight + 1;
+ setPromptOverflow((current) =>
+ current?.prompt === captionPrompt && current.canExpand === hasOverflow
+ ? current
+ : { prompt: captionPrompt, canExpand: hasOverflow },
+ );
+ }, [captionPrompt]);
+
+ useEffect(() => {
+ const captionElement = captionRef.current;
+ if (!captionElement || !captionPrompt) {
+ return;
+ }
+ const frame = window.requestAnimationFrame(updatePromptOverflow);
+ const resizeObserver =
+ typeof ResizeObserver === "undefined"
+ ? null
+ : new ResizeObserver(updatePromptOverflow);
+ resizeObserver?.observe(captionElement);
+ window.addEventListener("resize", updatePromptOverflow);
+ return () => {
+ window.cancelAnimationFrame(frame);
+ resizeObserver?.disconnect();
+ window.removeEventListener("resize", updatePromptOverflow);
+ };
+ }, [captionPrompt, updatePromptOverflow]);
+
+ const shouldClampPrompt =
+ (promptOverflowMeasured ? promptCanExpand : promptLikelyNeedsExpansion) &&
+ !promptExpanded;
const runningLabel = "Generating image…";
- const completedLabel = prompt
- ? prompt.length > 80
- ? `Generated image: ${prompt.slice(0, 80)}…`
- : `Generated image: ${prompt}`
- : "Generated image";
+ const completedLabel = formatGeneratedImageLabel(prompt);
+
+ const showPreview = () => {
+ if (!imagePart) {
+ return;
+ }
+ openOverlay({
+ image: imagePart.image,
+ title: imageTitle,
+ metadata: imageMetadata,
+ filename: imagePart.filename,
+ openaiImageGenerationCallId,
+ openaiResponseId,
+ openaiReasoningItem: parsedArgs.openai_reasoning_item,
+ });
+ };
+
+ const stopOverlayActionPropagation = (
+ event: MouseEvent,
+ ) => {
+ event.preventDefault();
+ event.stopPropagation();
+ };
+
+ const handleDownload = (event: MouseEvent) => {
+ stopOverlayActionPropagation(event);
+ if (imagePart) {
+ downloadImagePart(imagePart);
+ }
+ };
+
+ const handleEditClick = (event: MouseEvent) => {
+ stopOverlayActionPropagation(event);
+ showPreview();
+ };
+
+ if (isPendingImage) {
+ return (
+
@@ -102,21 +288,77 @@ const ImageGenerationToolUIImpl: ToolCallMessagePartComponent = ({
icon={ImageIcon}
/>
- {isRunning && !imageSrc ? (
-
- 
- {prompt ? (
-
- {prompt}
+ {imagePart ? (
+
+
+
) : null}
diff --git a/studio/frontend/src/components/assistant-ui/tool-ui-web-search.tsx b/studio/frontend/src/components/assistant-ui/tool-ui-web-search.tsx
index da4c0cbbb9..b9bda2e832 100644
--- a/studio/frontend/src/components/assistant-ui/tool-ui-web-search.tsx
+++ b/studio/frontend/src/components/assistant-ui/tool-ui-web-search.tsx
@@ -24,6 +24,22 @@ const RE_TITLE = /Title:\s*(.+)/;
const RE_URL = /URL:\s*(.+)/;
const RE_SNIPPET = /Snippet:\s*(.+)/s;
+/**
+ * Reject anything that is not a real http(s) URL. Web-search / web-fetch
+ * output is provider-controlled, so hostile ``javascript:`` / ``data:``
+ * lines must not reach the Source badge's .
+ */
+function isSafeHttpUrl(raw: string): boolean {
+ const value = raw.trim();
+ if (!value || /[\r\n]/.test(value)) return false;
+ try {
+ const parsed = new URL(value);
+ return parsed.protocol === "http:" || parsed.protocol === "https:";
+ } catch {
+ return false;
+ }
+}
+
/** Parse the backend's "Title: ...\nURL: ...\nSnippet: ...\n---" format into structured sources. */
function parseSearchResults(raw: string): ParsedSource[] {
if (!raw) {
@@ -35,13 +51,14 @@ function parseSearchResults(raw: string): ParsedSource[] {
const titleMatch = block.match(RE_TITLE);
const urlMatch = block.match(RE_URL);
const snippetMatch = block.match(RE_SNIPPET);
- if (titleMatch && urlMatch) {
- sources.push({
- title: titleMatch[1].trim(),
- url: urlMatch[1].trim(),
- snippet: snippetMatch?.[1]?.trim() ?? "",
- });
- }
+ if (!titleMatch || !urlMatch) continue;
+ const url = urlMatch[1].trim();
+ if (!isSafeHttpUrl(url)) continue;
+ sources.push({
+ title: titleMatch[1].trim(),
+ url,
+ snippet: snippetMatch?.[1]?.trim() ?? "",
+ });
}
return sources;
}
diff --git a/studio/frontend/src/features/chat/api/chat-adapter.ts b/studio/frontend/src/features/chat/api/chat-adapter.ts
index 0c557f1b01..ce59429762 100644
--- a/studio/frontend/src/features/chat/api/chat-adapter.ts
+++ b/studio/frontend/src/features/chat/api/chat-adapter.ts
@@ -1,7 +1,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
-import { getAuthToken } from "@/features/auth/session";
+import { getAuthToken } from "@/features/auth";
import { apiUrl } from "@/lib/api-base";
import { toast } from "@/lib/toast";
import type { MessageTiming, ToolCallMessagePart } from "@assistant-ui/core";
@@ -21,6 +21,7 @@ import { pickFriendlyContainerName } from "../lib/friendly-names";
import {
EXTERNAL_MAX_OUTPUT_TOKENS,
clampReasoningEffortToLevels,
+ getExternalMaxOutputTokens,
getExternalMinOutputTokens,
getExternalReasoningCapabilities,
getProviderCapabilities,
@@ -28,13 +29,19 @@ import {
providerSupportsBuiltinImageGeneration,
providerSupportsBuiltinWebFetch,
providerSupportsBuiltinWebSearch,
+ providerSupportsFastMode,
} from "../provider-capabilities";
-import { useChatRuntimeStore } from "../stores/chat-runtime-store";
+import {
+ type PendingImageEditReference,
+ useChatRuntimeStore,
+} from "../stores/chat-runtime-store";
import { useExternalProvidersStore } from "../stores/external-providers-store";
import { isMultimodalResponse } from "../types/api";
import type {
OpenAIChatCompletionsRequest,
+ OpenAIChatMessage,
OpenAIMessageContent,
+ OpenAIReasoningContentPart,
} from "../types/api";
import type { ChatModelSummary } from "../types/runtime";
import { getImageInputUnavailableReason } from "../utils/image-input-support";
@@ -70,6 +77,13 @@ interface ServerUsage {
prompt_tokens: number;
completion_tokens: number;
total_tokens: number;
+ // External prompt-cache fields (see _build_usage_chunk in
+ // external_provider.py). cache_creation is Anthropic-only.
+ prompt_tokens_details?: {
+ cached_tokens?: number;
+ };
+ cache_creation_input_tokens?: number;
+ cache_read_input_tokens?: number;
}
/** Server-side timing data from llama-server's timings object. */
@@ -143,6 +157,91 @@ async function updateStoredChatThreadEventually(
}
}
+/**
+ * Return ``raw`` when it is a safe-to-navigate http(s) URL, or "" otherwise.
+ * Rejects non-string input, CR/LF (header injection), and non-http(s)
+ * schemes (``javascript:`` / ``data:`` / ``vbscript:``) so provider /
+ * tool-controlled strings cannot land in an .
+ */
+function isSafeNavigableSourceUrl(raw: unknown): string {
+ if (typeof raw !== "string") return "";
+ const value = raw.trim();
+ if (!value || /[\r\n]/.test(value)) return "";
+ try {
+ const parsed = new URL(value);
+ if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+ return value;
+ }
+ } catch {
+ // Fall through.
+ }
+ return "";
+}
+
+/** Convert an Anthropic document citation dict into a Sources-panel source. */
+function documentCitationToSource(
+ cit: Record,
+ fallbackIdx: number,
+): {
+ type: "source";
+ sourceType: "url";
+ id: string;
+ url: string;
+ title: string;
+ metadata?: { description: string };
+} | null {
+ const source =
+ typeof cit.source === "string" && cit.source ? cit.source : "";
+ const docTitle =
+ (typeof cit.document_title === "string" && cit.document_title) ||
+ (typeof cit.title === "string" && cit.title) ||
+ "";
+ const docIndex =
+ typeof cit.document_index === "number" ? cit.document_index : undefined;
+ // Only treat ``source`` as a navigable URL when it is real http(s);
+ // search_result_location can carry a free-form id (e.g. ``kb-doc-42``)
+ // or a hostile ``javascript:`` / ``data:`` / ``vbscript:`` string.
+ // Fall back to a stable doc anchor otherwise.
+ const url =
+ isSafeNavigableSourceUrl(source) || `#anthropic-doc-${docIndex ?? fallbackIdx}`;
+ const title = docTitle || source || `Document ${fallbackIdx + 1}`;
+ const cited =
+ typeof cit.cited_text === "string" ? cit.cited_text.trim() : "";
+ // Trim the cited snippet so the Sources panel stays scannable.
+ const description =
+ cited.length > 240 ? `${cited.slice(0, 240)}...` : cited;
+ // Anthropic numbers inline [N] per citation, not per source URL.
+ // Fold citation type + position-bearing fields into the id so two
+ // distinct citations on the same source (or two search_result_locations
+ // with different search_result_index) keep separate Sources entries.
+ const citationType =
+ typeof cit.type === "string" ? String(cit.type) : "";
+ const positionParts = [
+ cit.search_result_index,
+ cit.start_char_index,
+ cit.end_char_index,
+ cit.start_page_number,
+ cit.end_page_number,
+ cit.start_block_index,
+ cit.end_block_index,
+ ]
+ .filter((v) => typeof v === "number")
+ .map((v) => String(v))
+ .join(":");
+ const idAnchor = positionParts
+ ? `${citationType}:${positionParts}`
+ : `${citationType}:${fallbackIdx}`;
+ const id = `${url}#${idAnchor}`;
+ return {
+ type: "source" as const,
+ sourceType: "url" as const,
+ id,
+ url,
+ title,
+ ...(description ? { metadata: { description } } : {}),
+ };
+}
+
/** Parse "Title: ...\nURL: ...\nSnippet: ..." blocks into source content parts. */
function parseSourcesFromResult(raw: string): {
type: "source";
@@ -167,7 +266,11 @@ function parseSourcesFromResult(raw: string): {
const urlMatch = block.match(/URL:\s*(.+)/);
const snippetMatch = block.match(/Snippet:\s*(.+)/);
if (titleMatch && urlMatch) {
- const url = urlMatch[1].trim();
+ // Drop blocks whose ``URL:`` is not safe http(s); provider/tool
+ // output is attacker-controllable so a hostile ``javascript:`` /
+ // ``data:`` line must not reach the Sources panel .
+ const url = isSafeNavigableSourceUrl(urlMatch[1]);
+ if (!url) continue;
const snippet = snippetMatch?.[1]?.trim();
sources.push({
type: "source" as const,
@@ -302,37 +405,30 @@ function collectImageParts(
message: RunMessage,
): Array<{ type: "image_url"; image_url: { url: string } }> {
const parts: Array<{ type: "image_url"; image_url: { url: string } }> = [];
+ const pushImagePart = (part: { type: string }) => {
+ if (part.type !== "image" || !("image" in part)) {
+ return;
+ }
+ const src = (part as { image: string }).image;
+ if (!src) {
+ return;
+ }
+ parts.push({
+ type: "image_url",
+ image_url: {
+ url: src.startsWith("data:") ? src : `data:image/png;base64,${src}`,
+ },
+ });
+ };
for (const part of message.content ?? []) {
- if (part.type === "image" && "image" in part) {
- const src = (part as { image: string }).image;
- if (src) {
- parts.push({
- type: "image_url",
- image_url: {
- url: src.startsWith("data:") ? src : `data:image/png;base64,${src}`,
- },
- });
- }
- }
+ pushImagePart(part);
}
if ("attachments" in message && (message.attachments?.length ?? 0) > 0) {
for (const attachment of message.attachments ?? []) {
for (const part of attachment.content ?? []) {
- if (part.type === "image" && "image" in part) {
- const src = (part as { image: string }).image;
- if (src) {
- parts.push({
- type: "image_url",
- image_url: {
- url: src.startsWith("data:")
- ? src
- : `data:image/png;base64,${src}`,
- },
- });
- }
- }
+ pushImagePart(part);
}
}
}
@@ -340,6 +436,78 @@ function collectImageParts(
return parts;
}
+function normalizeOpenAIReasoningItem(
+ value: unknown,
+): OpenAIReasoningContentPart | null {
+ if (!value || typeof value !== "object") {
+ return null;
+ }
+ const item = value as Record;
+ if (item.type !== "reasoning" || typeof item.id !== "string" || !item.id) {
+ return null;
+ }
+ const summary = Array.isArray(item.summary)
+ ? item.summary.flatMap((part) => {
+ if (!part || typeof part !== "object") {
+ return [];
+ }
+ const summaryPart = part as Record;
+ return summaryPart.type === "summary_text" &&
+ typeof summaryPart.text === "string"
+ ? [{ type: "summary_text" as const, text: summaryPart.text }]
+ : [];
+ })
+ : [];
+ const normalized: OpenAIReasoningContentPart = {
+ type: "reasoning",
+ id: item.id,
+ summary,
+ };
+ if (
+ item.status === "in_progress" ||
+ item.status === "completed" ||
+ item.status === "incomplete"
+ ) {
+ normalized.status = item.status;
+ }
+ return normalized;
+}
+
+function toOpenAIImageEditReferenceMessage(
+ reference: PendingImageEditReference,
+): OpenAIChatMessage | null {
+ if (!reference.openaiImageGenerationCallId) {
+ return null;
+ }
+ const content: Exclude = [];
+ const reasoningItem = normalizeOpenAIReasoningItem(
+ reference.openaiReasoningItem,
+ );
+ if (reasoningItem) {
+ content.push(reasoningItem);
+ }
+ content.push({
+ type: "image_generation_call",
+ id: reference.openaiImageGenerationCallId,
+ ...(reference.openaiResponseId
+ ? { response_id: reference.openaiResponseId }
+ : {}),
+ });
+ return { role: "assistant", content };
+}
+
+// Refusal flag stamped on assistant metadata when the backend emits the
+// `anthropic_refusal` _toolEvent. We drop the refused pair from the next
+// request body (Anthropic guidance: leaving refusals in context keeps
+// refusing). Metadata (not text) prevents content from spoofing a reset.
+function isAnthropicRefusalMessage(message: RunMessage): boolean {
+ if (message.role !== "assistant") return false;
+ const metadata = (message as { metadata?: unknown }).metadata as
+ | { custom?: Record }
+ | undefined;
+ return metadata?.custom?.anthropicRefusal === true;
+}
+
function toOpenAIMessage(message: RunMessage): {
role: "system" | "user" | "assistant";
content: OpenAIMessageContent;
@@ -360,16 +528,27 @@ function toOpenAIMessage(message: RunMessage): {
/data:audio\/[a-z0-9.+-]+;base64,[A-Za-z0-9+/=]+/g,
"[audio]",
);
+ if (isAnthropicRefusalMessage(message)) {
+ // Prune refused assistant turn from outbound history; the
+ // rendered transcript still shows the user-visible notice.
+ return null;
+ }
}
const imageParts = collectImageParts(message);
if (imageParts.length > 0) {
return {
role: message.role,
- content: [{ type: "text", text: textContent }, ...imageParts],
+ content: [
+ ...(textContent ? [{ type: "text" as const, text: textContent }] : []),
+ ...imageParts,
+ ],
};
}
+ if (!textContent) {
+ return null;
+ }
return { role: message.role, content: textContent };
}
@@ -804,17 +983,52 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
// the user switches chats while waiting for model load / auto-load.
const resolvedThreadId =
(unstable_threadId ?? runtime.activeThreadId) || undefined;
+ const resolvedThreadKey = resolvedThreadId ?? null;
+ const pendingImageEditReferenceForRun = runtime.pendingImageEditReference;
+ const selectedImageEditReference =
+ (pendingImageEditReferenceForRun?.threadId ?? null) ===
+ resolvedThreadKey
+ ? pendingImageEditReferenceForRun
+ : null;
+ const clearSelectedImageEditReference = () => {
+ if (!selectedImageEditReference) {
+ return;
+ }
+ const store = useChatRuntimeStore.getState();
+ const pending = store.pendingImageEditReference;
+ if (
+ pending?.openaiImageGenerationCallId ===
+ selectedImageEditReference.openaiImageGenerationCallId &&
+ pending.openaiResponseId ===
+ selectedImageEditReference.openaiResponseId &&
+ (pending.threadId ?? null) ===
+ (selectedImageEditReference.threadId ?? null)
+ ) {
+ store.clearPendingImageEditReference();
+ }
+ };
// Wait for in-progress model load to finish before inferring
if (runtime.modelLoading) {
toast.info("Waiting for model to finish loading…");
- await waitForModelReady(abortSignal);
+ try {
+ await waitForModelReady(abortSignal);
+ } catch (error) {
+ clearSelectedImageEditReference();
+ throw error;
+ }
}
if (!useChatRuntimeStore.getState().params.checkpoint) {
// Auto-load the smallest downloaded model
- const { loaded, blockedByTrustRemoteCode } =
- await autoLoadSmallestModel();
+ let loaded: boolean;
+ let blockedByTrustRemoteCode: boolean;
+ try {
+ ({ loaded, blockedByTrustRemoteCode } = await autoLoadSmallestModel());
+ } catch (error) {
+ clearSelectedImageEditReference();
+ throw error;
+ }
if (!loaded) {
toast.error(
blockedByTrustRemoteCode
@@ -826,6 +1040,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
: "Pick a model in the top bar, then retry.",
},
);
+ clearSelectedImageEditReference();
throw new Error("Load a model first.");
}
}
@@ -833,7 +1048,13 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
// Re-read store after potential auto-load / model ready wait
runtime = useChatRuntimeStore.getState();
const { params } = runtime;
- const { supportsTools, toolsEnabled, codeToolsEnabled, imageToolsEnabled } = runtime;
+ const {
+ supportsTools,
+ toolsEnabled,
+ codeToolsEnabled,
+ imageToolsEnabled,
+ webFetchToolsEnabled,
+ } = runtime;
const externalSelection = parseExternalModelId(params.checkpoint);
const isExternalRequest = externalSelection !== null;
if (
@@ -844,6 +1065,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
description:
"Turn on Enable connections in Settings → Connections to use hosted models.",
});
+ clearSelectedImageEditReference();
throw new Error("Connections disabled.");
}
const externalProvider = isExternalRequest
@@ -859,6 +1081,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
toast.error("Connection not found.", {
description: "Open Settings → Connections and add it again.",
});
+ clearSelectedImageEditReference();
throw new Error("Connection not found.");
}
// Local providers (llama.cpp / vLLM / Ollama) allow an empty key — only block hosted providers.
@@ -869,36 +1092,34 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
toast.error("Missing API key for selected connection.", {
description: "Open Settings → Connections and set the API key again.",
});
+ clearSelectedImageEditReference();
throw new Error("Missing connection API key.");
}
- const webSearchEnabledForThisTurn =
- Boolean(
- externalProvider &&
- toolsEnabled &&
- providerSupportsBuiltinWebSearch(externalProvider.providerType),
- );
- const codeExecEnabledForThisTurn =
- Boolean(
- externalProvider &&
- externalSelection &&
- codeToolsEnabled &&
- providerSupportsBuiltinCodeExecution(
- externalProvider.providerType,
- externalSelection.modelId,
- externalProvider.baseUrl,
- ),
- );
- // web_fetch shares the Search pill with web_search (no separate
- // UI toggle), so it follows toolsEnabled. Anthropic is the only
- // provider that ships it today; on others providerSupportsBuiltinWebFetch
- // returns false and this stays inert.
- const webFetchEnabledForThisTurn =
- Boolean(
- externalProvider &&
- toolsEnabled &&
- providerSupportsBuiltinWebFetch(externalProvider.providerType),
- );
+ const webSearchEnabledForThisTurn = Boolean(
+ externalProvider &&
+ toolsEnabled &&
+ providerSupportsBuiltinWebSearch(externalProvider.providerType),
+ );
+ const codeExecEnabledForThisTurn = Boolean(
+ externalProvider &&
+ externalSelection &&
+ codeToolsEnabled &&
+ providerSupportsBuiltinCodeExecution(
+ externalProvider.providerType,
+ externalSelection.modelId,
+ externalProvider.baseUrl,
+ ),
+ );
+ // Fetch pill is independent of Search (Anthropic bills web_fetch
+ // separately from web_search). Sourced from `webFetchToolsEnabled`;
+ // on providers without web_fetch the toggle is forced off in
+ // chat-page's runtime setState.
+ const webFetchEnabledForThisTurn = Boolean(
+ externalProvider &&
+ webFetchToolsEnabled &&
+ providerSupportsBuiltinWebFetch(externalProvider.providerType),
+ );
const providerShipsWebFetch = Boolean(
externalProvider &&
providerSupportsBuiltinWebFetch(externalProvider.providerType),
@@ -918,11 +1139,58 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
),
);
- const outboundMessages = messages
+ if (selectedImageEditReference && !imageGenerationEnabledForThisTurn) {
+ clearSelectedImageEditReference();
+ toast.error("Image editing is unavailable", {
+ description:
+ "Select an OpenAI image-generation model, then retry the edit.",
+ });
+ throw new Error("Image generation edit unavailable.");
+ }
+
+ // Two-pass build: a refused assistant turn also drops the user
+ // prompt that triggered it (leaving it in context re-triggers
+ // the classifier). Refusal flag rides assistant
+ // metadata.custom.anthropicRefusal, set out-of-band from the
+ // backend _toolEvent.
+ const survivingMessages: RunMessage[] = [];
+ for (const message of messages) {
+ if (isAnthropicRefusalMessage(message)) {
+ const last = survivingMessages.at(-1);
+ if (last && last.role === "user") {
+ survivingMessages.pop();
+ }
+ continue;
+ }
+ survivingMessages.push(message);
+ }
+
+ const outboundMessages = survivingMessages
.map(toOpenAIMessage)
.filter((message): message is NonNullable =>
Boolean(message),
);
+ if (selectedImageEditReference) {
+ const referenceMessage = toOpenAIImageEditReferenceMessage(
+ selectedImageEditReference,
+ );
+ if (!referenceMessage) {
+ clearSelectedImageEditReference();
+ toast.error("This generated image cannot be edited", {
+ description:
+ "The original image reference is missing. Generate the image again, then retry the edit.",
+ });
+ throw new Error("Generated image edit reference missing.");
+ }
+ let insertAt = outboundMessages.length;
+ for (let i = outboundMessages.length - 1; i >= 0; i -= 1) {
+ if (outboundMessages[i]?.role === "user") {
+ insertAt = i;
+ break;
+ }
+ }
+ outboundMessages.splice(insertAt, 0, referenceMessage);
+ }
const safeSystemPrompt =
typeof params.systemPrompt === "string" ? params.systemPrompt : "";
@@ -941,24 +1209,51 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
const webLabel = providerShipsWebFetch
? "web search or web fetch"
: "web search";
- if (!webSearchEnabledForThisTurn && !codeExecEnabledForThisTurn) {
+ // Treat search and fetch as a single "any web tool" axis so
+ // the guard only warns when neither pill is on; checking
+ // webSearchEnabledForThisTurn alone mis-fired when only Fetch
+ // was on and suppressed live web_fetch calls.
+ const anyWebEnabledForThisTurn =
+ webSearchEnabledForThisTurn || webFetchEnabledForThisTurn;
+ if (
+ !anyWebEnabledForThisTurn &&
+ !codeExecEnabledForThisTurn &&
+ !imageGenerationEnabledForThisTurn
+ ) {
disabledToolGuard =
- `You do not have ${webLabel} or code execution tools in this conversation. ` +
+ `You do not have ${webLabel}, code execution, or image generation tools in this conversation. ` +
"Answer from your own knowledge. " +
- "If a request genuinely requires tool use, live data fetch or running code, " +
+ "If a request genuinely requires tool use, live data fetch, running code, or image generation, " +
"inform the user that you do not have access to these capabilities. " +
"Do not return tool-call syntax inside your response.";
- } else if (!webSearchEnabledForThisTurn) {
+ } else if (!anyWebEnabledForThisTurn && !codeExecEnabledForThisTurn) {
+ disabledToolGuard =
+ `You do not have ${webLabel} or code execution tools in this conversation. ` +
+ "You may still use image generation tools when they are available and useful. " +
+ "If a request genuinely requires live data fetch or running code, " +
+ "inform the user that you do not have access to these capabilities. " +
+ "Do not return tool-call syntax inside your response.";
+ } else if (!anyWebEnabledForThisTurn) {
+ const availableTools = [
+ codeExecEnabledForThisTurn ? "code execution" : null,
+ imageGenerationEnabledForThisTurn ? "image generation" : null,
+ ].filter(Boolean);
disabledToolGuard =
`You do not have ${webLabel} tools in this conversation. ` +
- "You may still use code execution tools when they are available and useful. " +
+ (availableTools.length > 0
+ ? `You may still use ${availableTools.join(" and ")} tools when they are available and useful. `
+ : "") +
"If a request genuinely requires live data fetch or web search tool use, " +
"inform the user that you do not have access to these capabilities. " +
"Do not return tool-call syntax inside your response.";
} else if (!codeExecEnabledForThisTurn) {
+ const availableTools = [
+ webLabel,
+ imageGenerationEnabledForThisTurn ? "image generation" : null,
+ ].filter(Boolean);
disabledToolGuard =
"You do not have code execution tools in this conversation. " +
- `You may still use ${webLabel} tools when they are available and useful. ` +
+ `You may still use ${availableTools.join(" and ")} tools when they are available and useful. ` +
"If a request genuinely requires running code or code execution tool use, " +
"inform the user that you do not have access to these capabilities. " +
"Do not return tool-call syntax inside your response.";
@@ -988,8 +1283,10 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
});
}
}
- const imageBase64 = findLatestUserImageBase64(messages);
- const audioBase64 = findLatestUserAudioBase64(messages);
+ // Scan post-prune history so a refused user turn's image/audio
+ // doesn't gate or mis-attribute the next non-refused turn.
+ const imageBase64 = findLatestUserImageBase64(survivingMessages);
+ const audioBase64 = findLatestUserAudioBase64(survivingMessages);
// Block when ANY image is in the outbound payload (current or
// prior turns) and the loaded model can't process images. Keeps
@@ -1018,6 +1315,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
const gatedThreadKey = resolvedThreadId || "__default";
runtime.setThreadRunning(gatedThreadKey, true);
runtime.setThreadRunning(gatedThreadKey, false);
+ clearSelectedImageEditReference();
throw new Error(imageGateReason);
}
}
@@ -1025,7 +1323,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
if (audioBase64) {
const audioName = runtime.pendingAudioName;
if (audioName) {
- const lastUserMsg = [...messages]
+ const lastUserMsg = [...survivingMessages]
.reverse()
.find((m) => m.role === "user");
if (lastUserMsg) sentAudioNames.set(lastUserMsg.id, audioName);
@@ -1136,6 +1434,32 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
// Tool call content parts — accumulated and yielded cumulatively.
// result is set directly on the tool-call part when tool_end arrives.
const toolCallParts: ToolCallMessagePart[] = [];
+ const orderAssistantContent = (
+ textParts: ReturnType,
+ ) => {
+ const imageToolParts = toolCallParts.filter(
+ (part) => part.toolName === "image_generation",
+ );
+ const otherToolParts = toolCallParts.filter(
+ (part) => part.toolName !== "image_generation",
+ );
+ return [...otherToolParts, ...textParts, ...imageToolParts];
+ };
+ // Anthropic document_citations tool_event payload, converted to
+ // Sources-panel source parts at end-of-stream so the inline [N]
+ // markers have matching entries.
+ const documentCitationParts: Array<{
+ type: "source";
+ sourceType: "url";
+ id: string;
+ url: string;
+ title: string;
+ metadata?: { description: string };
+ }> = [];
+ // Latched on the `anthropic_refusal` tool event; stamped onto the
+ // final assistant metadata as `custom.anthropicRefusal` to drive
+ // the history-prune above.
+ let anthropicRefusalSeen = false;
let serverMetadata: {
usage?: ServerUsage;
timings?: ServerTimings;
@@ -1314,8 +1638,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
) {
void updateStoredChatThreadEventually(t.id, {
openaiCodeExecContainerId: null,
- })
- .catch(() => {});
+ }).catch(() => {});
continue;
}
openaiCodeExecContainerId = t.openaiCodeExecContainerId;
@@ -1359,8 +1682,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
openaiCodeExecContainerId = created.id;
void updateStoredChatThreadEventually(resolvedThreadId, {
openaiCodeExecContainerId: created.id,
- })
- .catch(() => {});
+ }).catch(() => {});
} catch {
// Fall back to backend's container_auto path on
// failure — keeps the chat moving; the next turn
@@ -1382,18 +1704,17 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
...(externalCapabilities?.topP !== false
? { top_p: params.topP }
: {}),
- // Clamp to the cross-provider output cap so a maxTokens value
- // carried over from a local-model session does not blow past
- // provider limits (e.g. Claude Opus 400s on >128k). Also
- // floor to the provider's documented minimum — Kimi's
- // thinking models need >=16k or the response truncates
- // before the answer fits alongside reasoning_content.
+ // Floor at the provider's documented min (Kimi thinking
+ // needs >=16k); clamp at the per-model max.
max_tokens: Math.min(
Math.max(
params.maxTokens,
getExternalMinOutputTokens(externalProvider?.providerType),
),
- EXTERNAL_MAX_OUTPUT_TOKENS,
+ getExternalMaxOutputTokens(
+ externalProvider?.providerType,
+ externalSelection?.modelId,
+ ),
),
// Only forward sampling knobs the provider actually accepts; the
// backend's external-provider proxy is param-permissive and would
@@ -1419,13 +1740,8 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
enable_tools: true,
enabled_tools: [
...(webSearchEnabledForThisTurn ? ["web_search"] : []),
- // Pair web_fetch with the Search pill on any
- // provider that ships it (Anthropic today). The
- // common workflow is "search returns URLs, fetch
- // reads them"; without web_fetch the model can
- // surface a citation but cannot quote from the
- // page body, which is the whole point of the
- // tool. There is no separate UI toggle yet.
+ // web_fetch has its own Fetch pill, independent
+ // of Search. Anthropic-only today.
...(webFetchEnabledForThisTurn ? ["web_fetch"] : []),
...(codeExecEnabledForThisTurn ? ["code_execution"] : []),
// OpenAI Responses-API only: `image_generation`
@@ -1473,11 +1789,23 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
// attaches `cache_control.ttl` when the value is one of
// "5m" / "1h" (see external_provider.py near line 1375),
// so unknown values are a no-op end-to-end.
- ...(supportsProviderPromptCacheTtl(externalProvider.providerType) &&
+ ...(supportsProviderPromptCacheTtl(
+ externalProvider.providerType,
+ ) &&
(externalProvider.enablePromptCaching ?? true) &&
isPromptCacheTtl(externalProvider.promptCacheTtl)
? { prompt_cache_ttl: externalProvider.promptCacheTtl }
: {}),
+ // Anthropic fast mode (Opus 4.6 / 4.7 only); backend
+ // silently drops on unsupported models as a second
+ // line of defence.
+ ...(params.fastMode &&
+ providerSupportsFastMode(
+ externalProvider.providerType,
+ externalSelection.modelId,
+ )
+ ? { fast_mode: true }
+ : {}),
...(externalReasoningCaps.supportsReasoning
? externalReasoningCaps.reasoningStyle === "reasoning_effort"
? externalReasoningEnabled
@@ -1541,10 +1869,15 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
let retriedWithRefreshedKey = false;
while (true) {
try {
- const stream = streamChatCompletions(
- await buildRequestPayload(retriedWithRefreshedKey),
- abortSignal,
- );
+ let requestPayload: OpenAIChatCompletionsRequest;
+ try {
+ requestPayload = await buildRequestPayload(retriedWithRefreshedKey);
+ } catch (error) {
+ clearSelectedImageEditReference();
+ throw error;
+ }
+ clearSelectedImageEditReference();
+ const stream = streamChatCompletions(requestPayload, abortSignal);
for await (const chunk of stream) {
// Handle tool status events
@@ -1583,6 +1916,27 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
}
continue;
}
+ if (toolEvent.type === "document_citations") {
+ // Convert Anthropic citations_delta footnotes into
+ // Sources-panel entries matching the inline [N] markers.
+ const cits = toolEvent.citations;
+ if (Array.isArray(cits)) {
+ cits.forEach((entry, idx) => {
+ if (!entry || typeof entry !== "object") return;
+ const part = documentCitationToSource(
+ entry as Record,
+ idx,
+ );
+ if (
+ part &&
+ !documentCitationParts.some((p) => p.id === part.id)
+ ) {
+ documentCitationParts.push(part);
+ }
+ });
+ }
+ continue;
+ }
if (toolEvent.type === "container_invalidated") {
if (resolvedThreadId) {
const field =
@@ -1591,11 +1945,16 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
: "openaiCodeExecContainerId";
void updateStoredChatThreadEventually(resolvedThreadId, {
[field]: null,
- })
- .catch(() => {});
+ }).catch(() => {});
}
continue;
}
+ if (toolEvent.type === "anthropic_refusal") {
+ // Latch the backend refusal signal so the final
+ // message metadata can drive the prune.
+ anthropicRefusalSeen = true;
+ continue;
+ }
if (toolEvent.type === "tool_start") {
const id =
(toolEvent.tool_call_id as string) ||
@@ -1630,6 +1989,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
size?: string;
quality?: string;
background?: string;
+ prompt?: string;
};
const imageB64 = toolEvent.image_b64 as string | undefined;
if (
@@ -1651,6 +2011,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
size: toolEvent.size as string | undefined,
quality: toolEvent.quality as string | undefined,
background: toolEvent.background as string | undefined,
+ prompt: toolEvent.prompt as string | undefined,
};
} else if (imgIdx !== -1) {
const text = rawResult.slice(0, imgIdx);
@@ -1668,16 +2029,29 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
} else {
parsedResult = rawResult;
}
+ const nextArgs =
+ toolEvent.arguments &&
+ typeof toolEvent.arguments === "object"
+ ? (toolEvent.arguments as ToolCallMessagePart["args"])
+ : undefined;
+ const mergedArgs = nextArgs
+ ? { ...(toolCallParts[idx].args ?? {}), ...nextArgs }
+ : toolCallParts[idx].args;
toolCallParts[idx] = {
...toolCallParts[idx],
+ args: mergedArgs,
+ argsText: mergedArgs
+ ? JSON.stringify(mergedArgs)
+ : toolCallParts[idx].argsText,
result: parsedResult,
};
}
}
- // Yield cumulative state so tool UI updates (tools first, text after)
+ // Yield cumulative state so tool UI updates. Search/code tools stay
+ // before the text, while generated images sit after the answer.
const textParts = parseAssistantContent(cumulativeText);
yield {
- content: [...toolCallParts, ...textParts],
+ content: orderAssistantContent(textParts),
metadata: {
timing: buildTiming(
streamStartTime,
@@ -1825,7 +2199,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
if (parts.length > 0 || toolCallParts.length > 0) {
yield {
- content: [...toolCallParts, ...parts],
+ content: orderAssistantContent(parts),
metadata: {
timing: buildTiming(
streamStartTime,
@@ -1881,18 +2255,31 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
const finalTokPerSec = meta?.timings?.predicted_per_second;
const serverPromptEvalTime = meta?.timings?.prompt_ms;
- // Update context usage in store if we got valid server data
+ // Prefer llama-server timings; fall back to provider usage envelope.
+ const cachedTokens =
+ meta?.timings?.cache_n ??
+ meta?.usage?.prompt_tokens_details?.cached_tokens ??
+ meta?.usage?.cache_read_input_tokens ??
+ 0;
+ // Anthropic-only (billed at the write premium).
+ const cacheWriteTokens = meta?.usage?.cache_creation_input_tokens ?? 0;
+
+ // Gate on the captured checkpoint still being active so a late
+ // completion from provider A doesn't populate the bar after the
+ // user switched to provider B mid-stream.
if (
meta?.usage &&
typeof meta.usage.prompt_tokens === "number" &&
typeof meta.usage.completion_tokens === "number" &&
- typeof meta.usage.total_tokens === "number"
+ typeof meta.usage.total_tokens === "number" &&
+ useChatRuntimeStore.getState().params.checkpoint === params.checkpoint
) {
useChatRuntimeStore.getState().setContextUsage({
promptTokens: meta.usage.prompt_tokens,
completionTokens: meta.usage.completion_tokens,
totalTokens: meta.usage.total_tokens,
- cachedTokens: meta.timings?.cache_n ?? 0,
+ cachedTokens,
+ cacheWriteTokens,
});
}
@@ -1908,21 +2295,24 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
yield {
content: [
- ...toolCallParts,
- ...parseAssistantContent(cumulativeText),
+ ...orderAssistantContent(parseAssistantContent(cumulativeText)),
...sourceParts,
+ ...documentCitationParts,
],
metadata: {
timing: finalTiming,
custom: {
reasoningDuration,
+ // Persisted refusal flag driving the two-pass prune.
+ anthropicRefusal: anthropicRefusalSeen || undefined,
serverTimings: meta?.timings ?? undefined,
contextUsage: meta?.usage
? {
promptTokens: meta.usage.prompt_tokens,
completionTokens: meta.usage.completion_tokens,
totalTokens: meta.usage.total_tokens,
- cachedTokens: meta.timings?.cache_n ?? 0,
+ cachedTokens,
+ cacheWriteTokens,
modelId: params.checkpoint,
}
: undefined,
diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index ce02b0da18..1783a08281 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -57,6 +57,7 @@ import {
getProviderCapabilities,
providerSupportsBuiltinCodeExecution,
providerSupportsBuiltinImageGeneration,
+ providerSupportsBuiltinWebFetch,
providerSupportsBuiltinWebSearch,
} from "./provider-capabilities";
import { ChatRuntimeProvider } from "./runtime-provider";
@@ -71,6 +72,7 @@ import {
CHAT_CODE_TOOLS_ENABLED_KEY,
CHAT_IMAGE_TOOLS_ENABLED_KEY,
CHAT_TOOLS_ENABLED_KEY,
+ CHAT_WEB_FETCH_TOOLS_ENABLED_KEY,
loadOptionalBool,
useChatRuntimeStore,
} from "./stores/chat-runtime-store";
@@ -779,6 +781,9 @@ export function ChatPage(): ReactElement {
selection.modelId,
provider?.baseUrl,
);
+ const supportsBuiltinWebFetch = providerSupportsBuiltinWebFetch(
+ provider?.providerType,
+ );
// Kimi's k2.6/k2.5 default to thinking enabled on the server side
// (per https://platform.kimi.ai/docs/models). Mirror that default
// in the UI so the Think pill comes up clicked when the user picks
@@ -801,6 +806,9 @@ export function ChatPage(): ReactElement {
const storedImageToolsEnabled = loadOptionalBool(
CHAT_IMAGE_TOOLS_ENABLED_KEY,
);
+ const storedWebFetchToolsEnabled = loadOptionalBool(
+ CHAT_WEB_FETCH_TOOLS_ENABLED_KEY,
+ );
const nextToolsEnabled = supportsBuiltinWebSearch
? isKimi
? false
@@ -834,6 +842,7 @@ export function ChatPage(): ReactElement {
supportsBuiltinWebSearch,
supportsBuiltinCodeExecution,
supportsBuiltinImageGeneration,
+ supportsBuiltinWebFetch,
toolsEnabled: nextToolsEnabled,
codeToolsEnabled: supportsBuiltinCodeExecution
? (storedCodeToolsEnabled ?? false)
@@ -841,6 +850,10 @@ export function ChatPage(): ReactElement {
imageToolsEnabled: supportsBuiltinImageGeneration
? (storedImageToolsEnabled ?? false)
: false,
+ // Default Fetch off (Anthropic bills per fetch); deliberate opt-in.
+ webFetchToolsEnabled: supportsBuiltinWebFetch
+ ? (storedWebFetchToolsEnabled ?? false)
+ : false,
});
}, [externalProvidersForChat, inferenceParams.checkpoint]);
const canCompare = useMemo(() => {
@@ -1008,6 +1021,9 @@ export function ChatPage(): ReactElement {
selectedExternal?.modelId,
selectedProvider?.baseUrl,
);
+ const supportsBuiltinWebFetch = providerSupportsBuiltinWebFetch(
+ selectedProvider?.providerType,
+ );
// See sibling useEffect above: Kimi's k2.x default to thinking
// enabled, so the Think pill comes up clicked. Search pill stays
// off by default; mutual exclusion flips them via the composer.
@@ -1026,6 +1042,9 @@ export function ChatPage(): ReactElement {
const storedImageToolsEnabled = loadOptionalBool(
CHAT_IMAGE_TOOLS_ENABLED_KEY,
);
+ const storedWebFetchToolsEnabled = loadOptionalBool(
+ CHAT_WEB_FETCH_TOOLS_ENABLED_KEY,
+ );
const nextToolsEnabled = supportsBuiltinWebSearch
? isKimi
? false
@@ -1037,6 +1056,10 @@ export function ChatPage(): ReactElement {
ggufMaxContextLength: null,
ggufNativeContextLength: null,
activeNativePathToken: null,
+ // Clear previous-model counters; the relaxed external-provider
+ // render gate would otherwise show stale stats until the next
+ // completion overwrites them.
+ contextUsage: null,
supportsReasoning: reasoningCaps.supportsReasoning,
reasoningAlwaysOn: reasoningCaps.reasoningAlwaysOn,
reasoningStyle: reasoningCaps.reasoningStyle,
@@ -1063,6 +1086,7 @@ export function ChatPage(): ReactElement {
supportsBuiltinWebSearch,
supportsBuiltinCodeExecution,
supportsBuiltinImageGeneration,
+ supportsBuiltinWebFetch,
toolsEnabled: nextToolsEnabled,
codeToolsEnabled: supportsBuiltinCodeExecution
? (storedCodeToolsEnabled ?? false)
@@ -1070,6 +1094,9 @@ export function ChatPage(): ReactElement {
imageToolsEnabled: supportsBuiltinImageGeneration
? (storedImageToolsEnabled ?? false)
: false,
+ webFetchToolsEnabled: supportsBuiltinWebFetch
+ ? (storedWebFetchToolsEnabled ?? false)
+ : false,
...(stillOnOpenRouterFree ? {} : { lastOpenRouterChosenModel: null }),
});
return;
@@ -1161,7 +1188,9 @@ export function ChatPage(): ReactElement {
if (!saved) return;
viewBeforeCompareRef.current = null;
navigate({ to: "/chat", search: saved });
- // Restore context usage from the active thread's last assistant message.
+ // Restore usage from the last assistant message, but only if it
+ // matches the currently active checkpoint. Without this guard the
+ // relaxed render gate would show stale stats from another model.
const threadId =
saved.thread ?? useChatRuntimeStore.getState().activeThreadId;
if (threadId) {
@@ -1175,7 +1204,29 @@ export function ChatPage(): ReactElement {
const usage = metadata?.contextUsage as ReturnType<
typeof useChatRuntimeStore.getState
>["contextUsage"];
- if (usage) useChatRuntimeStore.getState().setContextUsage(usage);
+ if (!usage) return;
+ const store = useChatRuntimeStore.getState();
+ const activeCheckpoint = store.params.checkpoint;
+ const usageModelId =
+ (usage as { modelId?: unknown }).modelId;
+ // Scope by modelId when present; reject if no active checkpoint
+ // (model-scoped usage cannot be attributed to "nothing").
+ if (typeof usageModelId === "string" && usageModelId) {
+ if (!activeCheckpoint || usageModelId !== activeCheckpoint) {
+ return;
+ }
+ }
+ // For local turns, also require the restored count to fit in
+ // the active window. Skip when unknown (external provider).
+ const limit = store.ggufContextLength;
+ if (
+ typeof limit === "number" &&
+ limit > 0 &&
+ (usage.totalTokens ?? 0) > limit
+ ) {
+ return;
+ }
+ store.setContextUsage(usage);
})
.catch((error) => {
if (!isExpectedBackgroundChatStorageError(error)) {
@@ -1491,11 +1542,13 @@ export function ChatPage(): ReactElement {
) : null}
+ {label}
+
+ );
}
const ImageGenerationToolUIImpl: ToolCallMessagePartComponent = ({
@@ -53,6 +140,7 @@ const ImageGenerationToolUIImpl: ToolCallMessagePartComponent = ({
result,
status,
}) => {
+ const { openOverlay } = useGeneratedImageOverlay();
const parsedArgs = (args as ImageGenerationArgs) ?? {};
const prompt = parsedArgs.prompt ?? "";
const isRunning = status?.type === "running";
@@ -66,33 +154,131 @@ const ImageGenerationToolUIImpl: ToolCallMessagePartComponent = ({
const imageSrc = imageResult?.image_b64
? `data:${mime};base64,${imageResult.image_b64}`
: null;
+ const imageTitle =
+ imageResult?.prompt?.trim() || prompt.trim() || "Generated image";
+ const captionPrompt = imageResult?.prompt?.trim() || prompt.trim();
+ const promptLikelyNeedsExpansion = captionPrompt.length > 220;
+ const imageMetadata = [imageResult?.size, imageResult?.quality, mime]
+ .filter(Boolean)
+ .join(" · ");
+ const openaiImageGenerationCallId =
+ typeof parsedArgs.openai_image_generation_call_id === "string"
+ ? parsedArgs.openai_image_generation_call_id
+ : undefined;
+ const openaiResponseId =
+ typeof parsedArgs.openai_response_id === "string"
+ ? parsedArgs.openai_response_id
+ : undefined;
+ const imagePart: GeneratedImagePart | null = imageSrc
+ ? {
+ type: "image",
+ image: imageSrc,
+ filename: imageFilenameFromPrompt(prompt, mime),
+ }
+ : null;
- // Collapse the card once the model has resumed streaming prose
- // after the image. Mirrors CodeExecutionToolUI so the inline image
- // doesn't collapse mid-stream and the user can click to re-expand.
- const hasText = useAuiState(({ message }) =>
- message.content.some(
- (p) =>
- p.type === "text" &&
- "text" in p &&
- (p as { text: string }).text.length > 0,
- ),
- );
const [open, setOpen] = useState(true);
- useEffect(() => {
- if (isRunning) {
- setOpen(true);
- } else if (hasText && !imageSrc) {
- setOpen(false);
+ const [expandedCaptionPrompt, setExpandedCaptionPrompt] = useState<
+ string | null
+ >(null);
+ const [promptOverflow, setPromptOverflow] = useState<{
+ prompt: string;
+ canExpand: boolean;
+ } | null>(null);
+ const captionRef = useRef
+ {loadingDots}
+
+
+
+ );
+ }
return (
-
- ) : imageSrc ? (
-
+ 
+
+
+
+ {captionPrompt ? (
+
+
+
+
+
+ {captionPrompt}
+
+ {promptCanExpand ? (
+
+ ) : null}
- {view.mode === "single" && ggufContextLength && contextUsage ? (
+ {view.mode === "single" && contextUsage ? (
s.activeThreadId);
const openAiApiKeyForSection = activeExternalProvider
? getExternalProviderApiKey(activeExternalProvider.id) || null
@@ -1152,6 +1160,28 @@ export function ChatSettingsPanel({
) : null}
+ {showFastModeControl ? (
+
+
+ ) : null}
) : null}
@@ -1280,7 +1310,10 @@ export function ChatSettingsPanel({
}
max={
isExternalModel
- ? EXTERNAL_MAX_OUTPUT_TOKENS
+ ? getExternalMaxOutputTokens(
+ externalProviderType,
+ externalSelection?.modelId,
+ )
: isGguf && ggufContextLength
? ggufContextLength
: 32768
diff --git a/studio/frontend/src/features/chat/components/context-usage-bar.tsx b/studio/frontend/src/features/chat/components/context-usage-bar.tsx
index 91bdd35caa..e15a3e0b4f 100644
--- a/studio/frontend/src/features/chat/components/context-usage-bar.tsx
+++ b/studio/frontend/src/features/chat/components/context-usage-bar.tsx
@@ -28,37 +28,66 @@ function getSeverityColor(percent: number): {
export const ContextUsageBar: FC<{
used: number;
- total: number;
+ // null on external providers (no known window); bar then hides the ratio.
+ total?: number | null;
cached?: number;
+ // Anthropic-only (billed at the write premium).
+ cacheWrites?: number;
promptTokens?: number;
completionTokens?: number;
className?: string;
-}> = ({ used, total, cached, promptTokens, completionTokens, className }) => {
- if (total <= 0) return null;
+}> = ({
+ used,
+ total,
+ cached,
+ cacheWrites,
+ promptTokens,
+ completionTokens,
+ className,
+}) => {
+ const hasKnownLimit = typeof total === "number" && total > 0;
+ const hasUsageDetails =
+ promptTokens !== undefined ||
+ completionTokens !== undefined ||
+ (cached !== undefined && cached > 0) ||
+ (cacheWrites !== undefined && cacheWrites > 0);
- const percent = Math.min((used / total) * 100, 100);
- const severity = getSeverityColor(percent);
+ // Nothing to show: no limit and no per-turn counters.
+ if (!hasKnownLimit && used <= 0 && !hasUsageDetails) return null;
+
+ const percent = hasKnownLimit
+ ? Math.min((used / (total as number)) * 100, 100)
+ : null;
+ const severity = getSeverityColor(percent ?? 0);
return (
+
+ Fast mode
+
+
+ Beta. Up to 2.5x higher output tokens per second on
+ Claude Opus 4.6 and 4.7 at 6x standard Opus pricing.
+ Switching between fast and standard invalidates the
+ prompt cache and is incompatible with the Priority
+ service tier.
+
+
+
-
- Context usage
-
- {percent.toFixed(1)}%
-
-
+ {hasKnownLimit && percent !== null ? (
+
+ Context usage
+
+ {percent.toFixed(1)}%
+
+
+ ) : null}
{promptTokens !== undefined && (
Prompt tokens
@@ -98,20 +129,32 @@ export const ContextUsageBar: FC<{
)}
+ {cacheWrites !== undefined && cacheWrites > 0 && (
+
+ Cache writes
+
+ {formatTokenCountFull(cacheWrites)}
+
+
+ )}
- Total
+
+ {hasKnownLimit ? "Total" : "Total tokens"}
+
- {formatTokenCountFull(used)} / {formatTokenCountFull(total)}
+ {hasKnownLimit
+ ? `${formatTokenCountFull(used)} / ${formatTokenCountFull(total as number)}`
+ : formatTokenCountFull(used)}
- {percent > 85 && (
+ {hasKnownLimit && percent !== null && percent > 85 ? (
Close to the context limit. Generation will stop at 100%.
Increase Context Length in
the chat Settings panel to keep going.
- )}
+ ) : null}
{dictationSupported && (
diff --git a/studio/frontend/src/features/chat/stores/chat-runtime-store.ts b/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
index a00b53a44c..a71e4127a2 100644
--- a/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
+++ b/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
@@ -14,7 +14,9 @@ import {
DEFAULT_INFERENCE_PARAMS,
type InferenceParams,
} from "../types/runtime";
-import { isExternalModelId } from "../external-providers";
+import { isExternalModelId, parseExternalModelId } from "../external-providers";
+import { getExternalMaxOutputTokens } from "../provider-capabilities";
+import { useExternalProvidersStore } from "./external-providers-store";
import {
loadChatSettingsWithLegacyImport,
savePersistedChatSettingsPatch,
@@ -25,6 +27,8 @@ export const CHAT_REASONING_ENABLED_KEY = "unsloth_chat_reasoning_enabled";
export const CHAT_TOOLS_ENABLED_KEY = "unsloth_chat_tools_enabled";
export const CHAT_CODE_TOOLS_ENABLED_KEY = "unsloth_chat_code_tools_enabled";
export const CHAT_IMAGE_TOOLS_ENABLED_KEY = "unsloth_chat_image_tools_enabled";
+export const CHAT_WEB_FETCH_TOOLS_ENABLED_KEY =
+ "unsloth_chat_web_fetch_tools_enabled";
// External provider selection is encoded into `params.checkpoint` as
// `external::::`. PersistedChatSettings deliberately
@@ -62,6 +66,12 @@ function saveLastExternalCheckpoint(value: string | null): void {
}
export type ReasoningStyle = "enable_thinking" | "reasoning_effort";
+export type PendingImageEditReference = {
+ threadId: string | null;
+ openaiImageGenerationCallId: string;
+ openaiResponseId?: string;
+ openaiReasoningItem?: unknown;
+};
export type ReasoningEffort =
| "none"
| "minimal"
@@ -262,9 +272,21 @@ type ChatRuntimeStore = {
* receive the tool because their runtime cannot dispatch it.
*/
supportsBuiltinImageGeneration: boolean;
+ /**
+ * Whether the active external provider exposes a server-side
+ * web_fetch tool (Anthropic's `web_fetch_20250910` /
+ * `web_fetch_20260209`). Gates the composer's Fetch pill,
+ * independent of Search.
+ */
+ supportsBuiltinWebFetch: boolean;
toolsEnabled: boolean;
codeToolsEnabled: boolean;
imageToolsEnabled: boolean;
+ /**
+ * Fetch pill state, independent of `toolsEnabled` (Search). Only
+ * consulted when `providerSupportsBuiltinWebFetch` is true.
+ */
+ webFetchToolsEnabled: boolean;
toolStatus: string | null;
generatingStatus: string | null;
autoHealToolCalls: boolean;
@@ -286,11 +308,14 @@ type ChatRuntimeStore = {
settingsPanelOpen: boolean;
pendingAudioBase64: string | null;
pendingAudioName: string | null;
+ pendingImageEditReference: PendingImageEditReference | null;
contextUsage: {
promptTokens: number;
completionTokens: number;
totalTokens: number;
cachedTokens: number;
+ // Anthropic-only; optional so pre-cache-stats persisted entries load.
+ cacheWriteTokens?: number;
} | null;
modelLoading: boolean;
activeNativePathToken: string | null;
@@ -324,6 +349,7 @@ type ChatRuntimeStore = {
setToolsEnabled: (enabled: boolean, options?: { persist?: boolean }) => void;
setCodeToolsEnabled: (enabled: boolean) => void;
setImageToolsEnabled: (enabled: boolean) => void;
+ setWebFetchToolsEnabled: (enabled: boolean) => void;
setToolStatus: (status: string | null) => void;
setGeneratingStatus: (status: string | null) => void;
setAutoHealToolCalls: (enabled: boolean) => void;
@@ -336,6 +362,10 @@ type ChatRuntimeStore = {
setChatTemplateOverride: (template: string | null) => void;
setPendingAudio: (base64: string, name: string) => void;
clearPendingAudio: () => void;
+ setPendingImageEditReference: (
+ reference: PendingImageEditReference | null,
+ ) => void;
+ clearPendingImageEditReference: () => void;
setContextUsage: (usage: ChatRuntimeStore["contextUsage"]) => void;
};
@@ -377,6 +407,7 @@ const PERSISTED_INFERENCE_PARAM_KEYS = [
"maxTokens",
"systemPrompt",
"trustRemoteCode",
+ "fastMode",
] as const satisfies readonly PersistedInferenceParamKey[];
const SCALAR_SETTING_KEYS = [
@@ -564,9 +595,11 @@ export const useChatRuntimeStore = create((set, get) => ({
supportsBuiltinWebSearch: false,
supportsBuiltinCodeExecution: false,
supportsBuiltinImageGeneration: false,
+ supportsBuiltinWebFetch: false,
toolsEnabled: loadBool(CHAT_TOOLS_ENABLED_KEY, false),
codeToolsEnabled: loadBool(CHAT_CODE_TOOLS_ENABLED_KEY, false),
imageToolsEnabled: loadBool(CHAT_IMAGE_TOOLS_ENABLED_KEY, false),
+ webFetchToolsEnabled: loadBool(CHAT_WEB_FETCH_TOOLS_ENABLED_KEY, false),
toolStatus: null,
generatingStatus: null,
autoHealToolCalls: true,
@@ -587,6 +620,7 @@ export const useChatRuntimeStore = create((set, get) => ({
settingsPanelOpen: false,
pendingAudioBase64: null,
pendingAudioName: null,
+ pendingImageEditReference: null,
contextUsage: null,
modelLoading: false,
activeNativePathToken: null,
@@ -640,7 +674,14 @@ export const useChatRuntimeStore = create((set, get) => ({
if (state.settingsHydrated && hasKeys(changedParams)) {
saveSettingsPatch({ inferenceParams: changedParams });
}
- return { params };
+ // Mirror setCheckpoint: the local model load path can mutate
+ // params.checkpoint via setParams() before setCheckpoint runs,
+ // leaving stale per-turn counters under the new checkpoint.
+ const checkpointChanged = state.params.checkpoint !== params.checkpoint;
+ return {
+ params,
+ ...(checkpointChanged ? { contextUsage: null } : {}),
+ };
}),
setCustomPresets: (customPresets) =>
set(() => {
@@ -704,12 +745,37 @@ export const useChatRuntimeStore = create((set, get) => ({
// mount, and a stale persisted local id would race against the
// freshly-loaded model. See LAST_EXTERNAL_CHECKPOINT_KEY notes.
saveLastExternalCheckpoint(isExternalModelId(modelId) ? modelId : null);
+ // Clear stale per-turn usage when the model changes; the relaxed
+ // external-provider render gate would otherwise show old counters
+ // until the next completion overwrites them.
+ const checkpointChanged = state.params.checkpoint !== modelId;
+ // Clamp maxTokens to the new model's cap on switch into an
+ // external model so a value carried over from a prior local
+ // session does not render above the slider's max.
+ let nextMaxTokens = state.params.maxTokens;
+ if (checkpointChanged && isExternalModelId(modelId)) {
+ const parsed = parseExternalModelId(modelId);
+ const provider = parsed
+ ? useExternalProvidersStore
+ .getState()
+ .providers.find((p) => p.id === parsed.providerId)
+ : null;
+ const cap = getExternalMaxOutputTokens(
+ provider?.providerType,
+ parsed?.modelId,
+ );
+ if (nextMaxTokens > cap) {
+ nextMaxTokens = cap;
+ }
+ }
return {
params: {
...state.params,
checkpoint: modelId,
+ maxTokens: nextMaxTokens,
},
activeGgufVariant: ggufVariant ?? null,
+ ...(checkpointChanged ? { contextUsage: null } : {}),
};
}),
setActiveThreadId: (activeThreadId) =>
@@ -744,9 +810,11 @@ export const useChatRuntimeStore = create((set, get) => ({
supportsBuiltinWebSearch: false,
supportsBuiltinCodeExecution: false,
supportsBuiltinImageGeneration: false,
+ supportsBuiltinWebFetch: false,
toolsEnabled: false,
codeToolsEnabled: false,
imageToolsEnabled: false,
+ webFetchToolsEnabled: false,
toolStatus: null,
kvCacheDtype: null,
loadedKvCacheDtype: null,
@@ -759,6 +827,7 @@ export const useChatRuntimeStore = create((set, get) => ({
defaultChatTemplate: null,
chatTemplateOverride: null,
loadedChatTemplateOverride: null,
+ pendingImageEditReference: null,
}));
},
setReasoningEnabled: (reasoningEnabled, options) =>
@@ -806,6 +875,11 @@ export const useChatRuntimeStore = create((set, get) => ({
saveBool(CHAT_IMAGE_TOOLS_ENABLED_KEY, imageToolsEnabled);
return { imageToolsEnabled };
}),
+ setWebFetchToolsEnabled: (webFetchToolsEnabled) =>
+ set(() => {
+ saveBool(CHAT_WEB_FETCH_TOOLS_ENABLED_KEY, webFetchToolsEnabled);
+ return { webFetchToolsEnabled };
+ }),
setToolStatus: (toolStatus) => set({ toolStatus }),
setGeneratingStatus: (generatingStatus) => set({ generatingStatus }),
setAutoHealToolCalls: (autoHealToolCalls) =>
@@ -845,5 +919,9 @@ export const useChatRuntimeStore = create((set, get) => ({
set({ pendingAudioBase64: base64, pendingAudioName: name }),
clearPendingAudio: () =>
set({ pendingAudioBase64: null, pendingAudioName: null }),
+ setPendingImageEditReference: (pendingImageEditReference) =>
+ set({ pendingImageEditReference }),
+ clearPendingImageEditReference: () =>
+ set({ pendingImageEditReference: null }),
setContextUsage: (contextUsage) => set({ contextUsage }),
}));
diff --git a/studio/frontend/src/features/chat/types/api.ts b/studio/frontend/src/features/chat/types/api.ts
index 1e6bcf8b87..5238875b71 100644
--- a/studio/frontend/src/features/chat/types/api.ts
+++ b/studio/frontend/src/features/chat/types/api.ts
@@ -143,6 +143,7 @@ export interface UnloadModelRequest {
export interface InferenceStatusResponse {
active_model: string | null;
+ model_identifier?: string | null;
is_vision: boolean;
is_gguf?: boolean;
gguf_variant?: string | null;
@@ -158,7 +159,7 @@ export interface InferenceStatusResponse {
min_p?: number;
presence_penalty?: number;
trust_remote_code?: boolean;
- };
+ } | null;
requires_trust_remote_code?: boolean;
supports_reasoning?: boolean;
reasoning_style?: "enable_thinking" | "reasoning_effort";
@@ -192,12 +193,31 @@ export interface AudioGenerationResponse {
}>;
}
-export type OpenAIMessageContent =
- | string
- | Array<
- | { type: "text"; text: string }
- | { type: "image_url"; image_url: { url: string } }
- >;
+export type OpenAIReasoningSummaryPart = {
+ type: "summary_text";
+ text: string;
+};
+
+export type OpenAIReasoningContentPart = {
+ type: "reasoning";
+ id: string;
+ summary: OpenAIReasoningSummaryPart[];
+ status?: "in_progress" | "completed" | "incomplete";
+};
+
+export type OpenAIImageGenerationCallContentPart = {
+ type: "image_generation_call";
+ id: string;
+ response_id?: string;
+};
+
+export type OpenAIMessageContentPart =
+ | { type: "text"; text: string }
+ | { type: "image_url"; image_url: { url: string } }
+ | OpenAIReasoningContentPart
+ | OpenAIImageGenerationCallContentPart;
+
+export type OpenAIMessageContent = string | OpenAIMessageContentPart[];
export interface OpenAIChatMessage {
role: "system" | "user" | "assistant";
@@ -262,6 +282,12 @@ export interface OpenAIChatCompletionsRequest {
* the Anthropic provider with `code_execution` in `enabled_tools`.
*/
anthropic_code_exec_container_id?: string | null;
+ /**
+ * Anthropic fast-mode toggle. Opus 4.6 / 4.7 only; backend drops
+ * silently on every other model + provider. See
+ * https://platform.claude.com/docs/en/build-with-claude/fast-mode
+ */
+ fast_mode?: boolean | null;
}
export interface OpenAIChatDelta {
diff --git a/studio/frontend/src/features/chat/types/runtime.ts b/studio/frontend/src/features/chat/types/runtime.ts
index 2967584653..4c44ee1e9c 100644
--- a/studio/frontend/src/features/chat/types/runtime.ts
+++ b/studio/frontend/src/features/chat/types/runtime.ts
@@ -14,6 +14,12 @@ export interface InferenceParams {
checkpoint: string;
/** Allow loading models with custom code (e.g. NVIDIA Nemotron). Only enable for repos you trust. */
trustRemoteCode?: boolean;
+ /**
+ * Anthropic fast-mode toggle. Opus 4.6 / 4.7 only; higher OTPS at
+ * 6x standard Opus pricing. Default false.
+ * https://platform.claude.com/docs/en/build-with-claude/fast-mode
+ */
+ fastMode?: boolean;
}
export const DEFAULT_INFERENCE_PARAMS: InferenceParams = {
@@ -28,6 +34,7 @@ export const DEFAULT_INFERENCE_PARAMS: InferenceParams = {
systemPrompt: "",
checkpoint: "",
trustRemoteCode: false,
+ fastMode: false,
};
export interface ChatModelSummary {
diff --git a/studio/frontend/src/features/chat/utils/chat-settings-storage.ts b/studio/frontend/src/features/chat/utils/chat-settings-storage.ts
index e07e1ddb1d..4e93a20bff 100644
--- a/studio/frontend/src/features/chat/utils/chat-settings-storage.ts
+++ b/studio/frontend/src/features/chat/utils/chat-settings-storage.ts
@@ -140,6 +140,11 @@ function sanitizeInferenceParams(
if (typeof value.trustRemoteCode === "boolean") {
params.trustRemoteCode = value.trustRemoteCode;
}
+ // Mirror trustRemoteCode handling so the toggle survives reload
+ // and the /api/chat/settings round-trip.
+ if (typeof value.fastMode === "boolean") {
+ params.fastMode = value.fastMode;
+ }
return hasKeys(params) ? params : undefined;
}
diff --git a/studio/frontend/src/features/recipe-studio/components/inline/inline-model.tsx b/studio/frontend/src/features/recipe-studio/components/inline/inline-model.tsx
index 16e99f4fae..1d98d18b56 100644
--- a/studio/frontend/src/features/recipe-studio/components/inline/inline-model.tsx
+++ b/studio/frontend/src/features/recipe-studio/components/inline/inline-model.tsx
@@ -3,6 +3,7 @@
import { Input } from "@/components/ui/input";
import type { ReactElement } from "react";
+import { LocalRecipeModelSelector } from "../../dialogs/models/local-recipe-model-selector";
import type { ModelConfig, ModelProviderConfig } from "../../types";
import { InlineField } from "./inline-field";
@@ -32,7 +33,9 @@ export function InlineModel(props: InlineModelProps): ReactElement {
className="nodrag h-8 w-full text-xs"
placeholder="https://api.example.com/v1"
value={props.config.endpoint}
- onChange={(event) => props.onUpdate({ endpoint: event.target.value })}
+ onChange={(event) =>
+ props.onUpdate({ endpoint: event.target.value })
+ }
/>
@@ -53,23 +56,32 @@ export function InlineModel(props: InlineModelProps): ReactElement {
}
// model_config branch - mirror the local-aware provider sync from the
- // dialog path so inline edits do not leave stale "local" placeholders
- // on external providers and fill the placeholder when switching to local.
+ // dialog path so inline edits clear stale local-only metadata without
+ // synthesizing the legacy "local" placeholder.
const localNames = props.localProviderNames ?? new Set();
const modelConfig = props.config;
- const handleProviderChange = (nextProvider: string) => {
- const isLocal = localNames.has(nextProvider);
- if (isLocal && !modelConfig.model.trim()) {
- props.onUpdate({ provider: nextProvider, model: "local" });
- return;
- }
- if (!isLocal && modelConfig.model === "local") {
- props.onUpdate({ provider: nextProvider, model: "" });
- return;
- }
- props.onUpdate({ provider: nextProvider });
- };
const isLinkedToLocal = localNames.has(modelConfig.provider);
+ const handleProviderChange = (nextProvider: string) => {
+ const nextIsLocal = localNames.has(nextProvider);
+ if (isLinkedToLocal !== nextIsLocal) {
+ props.onUpdate({
+ provider: nextProvider,
+ model: "",
+ // biome-ignore lint/style/useNamingConvention: api schema
+ gguf_variant: undefined,
+ });
+ return;
+ }
+ props.onUpdate({
+ provider: nextProvider,
+ ...(nextIsLocal
+ ? {}
+ : {
+ // biome-ignore lint/style/useNamingConvention: api schema
+ gguf_variant: undefined,
+ }),
+ });
+ };
return (
@@ -149,15 +187,28 @@ export function GithubCrawlerEasyView({
@@ -82,12 +94,38 @@ export function InlineModel(props: InlineModelProps): ReactElement {
/>
- props.onUpdate({ model: event.target.value })}
- />
+ {isLinkedToLocal ? (
+
+ props.onUpdate({
+ model,
+ // biome-ignore lint/style/useNamingConvention: api schema
+ gguf_variant: variant ?? undefined,
+ })
+ }
+ />
+ ) : (
+
+ props.onUpdate({
+ model: event.target.value,
+ // biome-ignore lint/style/useNamingConvention: api schema
+ gguf_variant: undefined,
+ })
+ }
+ />
+ )}
void;
+ inputId?: string;
+ disabled?: boolean;
+ compact?: boolean;
+ className?: string;
+};
+
+function normalizeForSearch(value: string): string {
+ return value.toLowerCase().replace(/[\s_.-]/g, "");
+}
+
+function hasGgufSuffix(value: string | null | undefined): boolean {
+ return GGUF_SUFFIX_PATTERN.test(value ?? "");
+}
+
+function getModelLabel(model: LocalModelInfo): string {
+ return model.model_id?.trim() || model.display_name || model.id;
+}
+
+function isDirectGguf(model: LocalModelInfo): boolean {
+ return model.path.toLowerCase().endsWith(".gguf");
+}
+
+function isExpandableGguf(model: LocalModelInfo): boolean {
+ return (
+ !isDirectGguf(model) &&
+ (hasGgufSuffix(model.id) ||
+ hasGgufSuffix(model.display_name) ||
+ hasGgufSuffix(model.model_id))
+ );
+}
+
+function sourceLabel(model: LocalModelInfo): string {
+ switch (model.source) {
+ case "models_dir":
+ return "Models";
+ case "hf_cache":
+ return "HF cache";
+ case "lmstudio":
+ return "LM Studio";
+ case "custom":
+ return "Custom folder";
+ default:
+ return "Local";
+ }
+}
+
+type SelectedModelSummary = {
+ label: string;
+ source: string;
+ isGguf: boolean;
+};
+
+function getSelectedModelSummary(
+ value: string,
+ selectedModel: LocalModelInfo | null,
+ ggufVariant?: string | null,
+): SelectedModelSummary {
+ if (!selectedModel) {
+ return {
+ label: value,
+ source: "Local model",
+ isGguf: Boolean(ggufVariant),
+ };
+ }
+
+ return {
+ label: getModelLabel(selectedModel),
+ source: sourceLabel(selectedModel),
+ isGguf: isDirectGguf(selectedModel) || isExpandableGguf(selectedModel),
+ };
+}
+
+function LocalGgufVariantList({
+ repoId,
+ selectedVariant,
+ onSelect,
+}: {
+ repoId: string;
+ selectedVariant?: string | null;
+ onSelect: (variant: string) => void;
+}): ReactElement {
+ const [variants, setVariants] = useState(null);
+ const [defaultVariant, setDefaultVariant] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ listGgufVariants(repoId)
+ .then((response) => {
+ if (cancelled) {
+ return;
+ }
+ setVariants(response.variants);
+ setDefaultVariant(response.default_variant);
+ })
+ .catch((err) => {
+ if (cancelled) {
+ return;
+ }
+ setError(
+ err instanceof Error ? err.message : "Failed to load variants.",
+ );
+ })
+ .finally(() => {
+ if (!cancelled) {
+ setLoading(false);
+ }
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [repoId]);
+
+ const sortedVariants = useMemo(() => {
+ if (!variants) {
+ return null;
+ }
+ return [...variants].sort((a, b) => {
+ if (a.quant === defaultVariant) {
+ return -1;
+ }
+ if (b.quant === defaultVariant) {
+ return 1;
+ }
+ if (a.downloaded !== b.downloaded) {
+ return a.downloaded ? -1 : 1;
+ }
+ return a.quant.localeCompare(b.quant);
+ });
+ }, [defaultVariant, variants]);
+
+ if (loading) {
+ return (
+ (
+ function SelectorTrigger(
+ {
+ value,
+ selectedModel,
+ ggufVariant,
+ inputId,
+ disabled,
+ compact,
+ className,
+ ...triggerProps
+ },
+ ref,
+ ): ReactElement {
+ const selected = getSelectedModelSummary(value, selectedModel, ggufVariant);
+
+ return (
+
+ );
+ },
+);
+
+function LocalModelRow({
+ model,
+ selected,
+ expanded,
+ probing,
+ ggufVariant,
+ onSelectModel,
+ onSelectVariant,
+}: {
+ model: LocalModelInfo;
+ selected: boolean;
+ expanded: boolean;
+ probing: boolean;
+ ggufVariant?: string | null;
+ onSelectModel: (model: LocalModelInfo) => void;
+ onSelectVariant: (modelId: string, variant: string) => void;
+}): ReactElement {
+ const expandable = isExpandableGguf(model);
+ const directGguf = isDirectGguf(model);
+
+ return (
+ ([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [expandedModelId, setExpandedModelId] = useState(null);
+ const [probingVariantModelId, setProbingVariantModelId] = useState<
+ string | null
+ >(null);
+ const [refreshKey, setRefreshKey] = useState(0);
+
+ const requestModelRefresh = useCallback(() => {
+ setLoading(true);
+ setError(null);
+ setRefreshKey((key) => key + 1);
+ }, []);
+
+ const handleOpenChange = useCallback(
+ (nextOpen: boolean) => {
+ setOpen(nextOpen);
+ if (nextOpen) {
+ requestModelRefresh();
+ }
+ },
+ [requestModelRefresh],
+ );
+
+ useEffect(() => {
+ if (!open || refreshKey < 0) {
+ return;
+ }
+ let cancelled = false;
+ listLocalModels()
+ .then((response) => {
+ if (cancelled) {
+ return;
+ }
+ setModels(response.models);
+ })
+ .catch((err) => {
+ if (cancelled) {
+ return;
+ }
+ setError(
+ err instanceof Error ? err.message : "Failed to list local models.",
+ );
+ })
+ .finally(() => {
+ if (!cancelled) {
+ setLoading(false);
+ }
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [open, refreshKey]);
+
+ const selectedModel = useMemo(
+ () => models.find((model) => model.id === value) ?? null,
+ [models, value],
+ );
+
+ const filteredModels = useMemo(() => {
+ const needle = normalizeForSearch(query.trim());
+ if (!needle) {
+ return models;
+ }
+ return models.filter((model) => {
+ const haystack = normalizeForSearch(
+ `${model.id} ${model.display_name} ${model.model_id ?? ""} ${model.path}`,
+ );
+ return haystack.includes(needle);
+ });
+ }, [models, query]);
+
+ const selectModel = useCallback(
+ async (model: LocalModelInfo) => {
+ if (isExpandableGguf(model)) {
+ setExpandedModelId((current) =>
+ current === model.id ? null : model.id,
+ );
+ return;
+ }
+ if (!isDirectGguf(model)) {
+ setProbingVariantModelId(model.id);
+ try {
+ const response = await listGgufVariants(model.id);
+ if (response.variants.length > 0) {
+ setExpandedModelId(model.id);
+ return;
+ }
+ } catch {
+ // Non-GGUF local models commonly have no variant endpoint. Fall
+ // through to regular selection so users can still choose them.
+ } finally {
+ setProbingVariantModelId(null);
+ }
+ }
+ onChange(model.id, null);
+ setOpen(false);
+ },
+ [onChange],
+ );
+
+ const selectVariant = useCallback(
+ (modelId: string, variant: string) => {
+ onChange(modelId, variant);
+ setOpen(false);
+ },
+ [onChange],
+ );
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/studio/frontend/src/features/recipe-studio/dialogs/models/model-config-dialog.tsx b/studio/frontend/src/features/recipe-studio/dialogs/models/model-config-dialog.tsx
index 368ae08acb..68f912bc57 100644
--- a/studio/frontend/src/features/recipe-studio/dialogs/models/model-config-dialog.tsx
+++ b/studio/frontend/src/features/recipe-studio/dialogs/models/model-config-dialog.tsx
@@ -1,12 +1,12 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
+import { Checkbox } from "@/components/ui/checkbox";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
-import { Checkbox } from "@/components/ui/checkbox";
import {
Combobox,
ComboboxContent,
@@ -22,6 +22,7 @@ import type { ModelConfig } from "../../types";
import { CollapsibleSectionTriggerButton } from "../shared/collapsible-section-trigger";
import { FieldLabel } from "../shared/field-label";
import { NameField } from "../shared/name-field";
+import { LocalRecipeModelSelector } from "./local-recipe-model-selector";
type ModelConfigDialogProps = {
config: ModelConfig;
@@ -45,6 +46,7 @@ export function ModelConfigDialog({
const maxTokensId = `${config.id}-max-tokens`;
const timeoutId = `${config.id}-timeout`;
const extraBodyId = `${config.id}-inference-extra-body`;
+ const skipHealthCheckId = `${config.id}-skip-health-check`;
const providerAnchorRef = useRef(null);
const providerInputRef = useRef(config.provider);
// Sync providerInputRef with the current provider value. Updating a ref in
@@ -61,16 +63,25 @@ export function ModelConfigDialog({
onUpdate({ [key]: value } as Partial);
};
- // Apply provider selection while keeping the local-provider model autofill
- // consistent across both dropdown selection and free-typed + blur input.
+ // Apply provider selection while clearing model identifiers that only make
+ // sense for the previous provider locality.
const applyProviderChange = (selectedProvider: string) => {
- const isLocal = localProviderNames.has(selectedProvider);
- if (isLocal && !config.model.trim()) {
- onUpdate({ provider: selectedProvider, model: "local" });
+ const nextIsLocal = localProviderNames.has(selectedProvider);
+ if (isLinkedToLocal !== nextIsLocal) {
+ onUpdate({
+ provider: selectedProvider,
+ model: "",
+ // biome-ignore lint/style/useNamingConvention: api schema
+ gguf_variant: undefined,
+ });
return;
}
- if (!isLocal && config.model === "local") {
- onUpdate({ provider: selectedProvider, model: "" });
+ if (!nextIsLocal) {
+ onUpdate({
+ provider: selectedProvider,
+ // biome-ignore lint/style/useNamingConvention: api schema
+ gguf_variant: undefined,
+ });
return;
}
updateField("provider", selectedProvider);
@@ -88,8 +99,8 @@ export function ModelConfigDialog({
Set up one reusable model choice for your AI steps
+
+ );
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ if (!sortedVariants || sortedVariants.length === 0) {
+ return (
+
+ No GGUF quantizations found for this model.
+
+ );
+ }
+
+ return (
+
+
+ );
+}
+
+type SelectorTriggerProps = ComponentPropsWithoutRef<"button"> & {
+ value: string;
+ selectedModel: LocalModelInfo | null;
+ ggufVariant?: string | null;
+ inputId?: string;
+ disabled: boolean;
+ compact: boolean;
+ className?: string;
+};
+
+const SelectorTrigger = forwardRef
+ Quantization
+
+
+ {sortedVariants.map((variant) => {
+ const selected = selectedVariant === variant.quant;
+ return (
+
+ );
+ })}
+
+
+
+ {expanded ? (
+ onSelectVariant(model.id, variant)}
+ />
+ ) : null}
+
+ );
+}
+
+function LocalModelResults({
+ loading,
+ error,
+ models,
+ value,
+ ggufVariant,
+ expandedModelId,
+ probingVariantModelId,
+ onRefresh,
+ onSelectModel,
+ onSelectVariant,
+}: {
+ loading: boolean;
+ error: string | null;
+ models: LocalModelInfo[];
+ value: string;
+ ggufVariant?: string | null;
+ expandedModelId: string | null;
+ probingVariantModelId: string | null;
+ onRefresh: () => void;
+ onSelectModel: (model: LocalModelInfo) => void;
+ onSelectVariant: (modelId: string, variant: string) => void;
+}): ReactElement {
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (models.length === 0) {
+ return (
+ {error}
+ +
+
+ );
+ }
+
+ return (
+ No local models found.
++ Download a model or add a scan folder from Chat, then refresh this + list. +
+ + Open Chat model picker + +
+ {models.map((model) => (
+
+ );
+}
+
+export function LocalRecipeModelSelector({
+ value,
+ ggufVariant,
+ onChange,
+ inputId,
+ disabled = false,
+ compact = false,
+ className,
+}: LocalRecipeModelSelectorProps): ReactElement {
+ const [open, setOpen] = useState(false);
+ const [query, setQuery] = useState("");
+ const [models, setModels] = useState
+
+
+
+
+
+ setQuery(event.target.value)}
+ placeholder="Filter local models"
+ className="h-8 flex-1"
+ autoFocus={true}
+ />
+
+
+ event.stopPropagation()}
+ >
+
+ - Choose the provider connection, enter the exact model ID, then save any - generation defaults you want to reuse. + Choose the provider connection, enter the exact model ID, then save + any generation defaults you want to reuse.
@@ -144,15 +155,48 @@ export function ModelConfigDialog({
+ onUpdate({
+ model,
+ // biome-ignore lint/style/useNamingConvention: api schema
+ gguf_variant: variant ?? undefined,
+ })
+ }
+ />
+ ) : (
+
+ onUpdate({
+ model: event.target.value,
+ // biome-ignore lint/style/useNamingConvention: api schema
+ gguf_variant: undefined,
+ })
+ }
+ />
+ )}
+ {isLinkedToLocal ? (
+
+ Recipes will load this model automatically. GGUF quantization is + saved with the preset. +
+ ) : null}
@@ -250,8 +294,12 @@ export function ModelConfigDialog({
}
/>
-