@gradio/core 1.0.0-dev.3 → 1.0.0

package/CHANGELOG.md

@@ -1,4 +1,35 @@
 # @gradio/core
+## 1.0.0
+
+### Features
+
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix browser component tests
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix Walkthrough component
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Pass component props as input
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Rename show_api
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Copy as markdown button in API docs
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Deprecate sketch
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Remove SSE transport from MCP docs
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Be able to update visibility programmatically
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix Reload Mode in 6.0
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix render status
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix statustracker for generating outputs
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - clean up some console logs
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - S5 df take3
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix status tracker iterative image
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix show_progress not being respected
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Api docs bug fix and some enhancements to the page
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix textbox updates
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Ensure `show_error` is always respected
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - fix: Using root instead of mcp_server_url for file upload config docs
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix Chatbot autoscroll
+- [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix vibe editor on 6.0
+
+### Fixes
+
+
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fixed several hardcoded UI labels in the chat_interface that did not implement i18n.
 
 ## 1.0.0-dev.3
 

package/dist/src/Blocks.svelte

@@ -67,7 +67,8 @@
 		search_params,
 		render_complete = false,
 		ready = $bindable(false),
-		reload_count = $bindable(0)
+		reload_count = $bindable(0),
+		add_new_message = $bindable()
 	}: {
 		root: string;
 		components: ComponentMeta[];
@@ -95,6 +96,7 @@
 		render_complete: boolean;
 		ready: boolean;
 		reload_count: number;
+		add_new_message: (title: string, message: string, type: string) => void;
 	} = $props();
 
 	components.forEach((comp) => {
@@ -173,11 +175,14 @@
 	}
 
 	let api_calls: Payload[] = $state([]);
+	let last_api_call: Payload | null = $state(null);
 	// We need a callback to add to api_calls from the DependencyManager
 	// We can't update a state variable from inside the DependencyManager because
 	// svelte won't see it and won't update the UI.
 	let add_to_api_calls = (payload: Payload): void => {
-		api_calls = [...api_calls, payload];
+		last_api_call = payload;
+		if (!api_recorder_visible) return;
+		api_calls = [...api_calls, last_api_call];
 	};
 
 	let dep_manager = new DependencyManager(
@@ -228,7 +233,7 @@
 	let ApiDocs: ComponentType<ApiDocsInterface> | null = null;
 	let ApiRecorder: ComponentType<ApiRecorderInterface> | null = null;
 	let Settings: ComponentType<SettingsInterface> | null = null;
-	let VibeEditor: ComponentType | null = null;
+	let VibeEditor: any = $state(null);
 
 	async function loadApiDocs(): Promise<void> {
 		if (!ApiDocs || !ApiRecorder) {
@@ -312,6 +317,8 @@
 		});
 	}
 
+	add_new_message = new_message;
+
 	let _error_id = -1;
 
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
@@ -387,6 +394,10 @@
 			dep_manager.dispatch_load_events();
 		});
 
+		if (vibe_mode) {
+			void loadVibeEditor();
+		}
+
 		return () => {
 			mut.disconnect();
 			res.disconnect();
@@ -520,6 +531,7 @@
 					{space_id}
 					{api_calls}
 					{username}
+					{last_api_call}
 				/>
 			</div>
 		</div>
@@ -554,6 +566,10 @@
 			</div>
 		</div>
 	{/if}
+
+	{#if vibe_mode && VibeEditor}
+		<svelte:component this={VibeEditor} {app} {root} />
+	{/if}
 </div>
 
 {#if messages}

package/dist/src/Blocks.svelte.d.ts

@@ -28,7 +28,8 @@ type $$ComponentProps = {
     render_complete: boolean;
     ready: boolean;
     reload_count: number;
+    add_new_message: (title: string, message: string, type: string) => void;
 };
-declare const Blocks: import("svelte").Component<$$ComponentProps, {}, "ready" | "reload_count">;
+declare const Blocks: import("svelte").Component<$$ComponentProps, {}, "ready" | "reload_count" | "add_new_message">;
 type Blocks = ReturnType<typeof Blocks>;
 export default Blocks;

package/dist/src/api_docs/ApiDocs.svelte

@@ -29,6 +29,7 @@
 	export let space_id: string | null;
 	export let root_node: ComponentMeta;
 	export let username: string | null;
+	export let last_api_call: Payload | null = null;
 
 	const js_docs =
 		"https://www.gradio.app/guides/getting-started-with-the-js-client";
@@ -54,6 +55,20 @@
 	export let api_calls: Payload[] = [];
 	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
 
+	$: sorted_dependencies = (() => {
+		const valid = dependencies.filter(
+			(dep) =>
+				dep.api_visibility === "public" &&
+				info?.named_endpoints?.["/" + dep.api_name]
+		);
+		if (info && last_api_call) {
+			const mostRecent = valid.find((dep) => dep.id === last_api_call.fn_index);
+			const others = valid.filter((dep) => dep.id !== last_api_call.fn_index);
+			return mostRecent ? [mostRecent, ...others] : valid;
+		}
+		return valid;
+	})();
+
 	function set_query_param(key: string, value: string) {
 		const url = new URL(window.location.href);
 		url.searchParams.set(key, value);
@@ -407,6 +422,7 @@
 							{file_data_present}
 							{mcp_docs}
 							{analytics}
+							{root}
 							bind:config_snippets
 						/>
 					</div>
@@ -465,8 +481,8 @@
 				{/if}
 
 				<div class:hidden={current_language === "mcp"}>
-					{#each dependencies as dependency}
-						{#if dependency.api_visibility === "public" && info.named_endpoints["/" + dependency.api_name]}
+					{#each sorted_dependencies as dependency}
+						{#if info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
 									endpoint_parameters={info.named_endpoints[
@@ -482,6 +498,7 @@
 										"/" + dependency.api_name
 									].description}
 									{analytics}
+									{last_api_call}
 									bind:markdown_code_snippets
 								/>
 

package/dist/src/api_docs/ApiDocs.svelte.d.ts

@@ -21,6 +21,7 @@ declare const ApiDocs: $$__sveltets_2_IsomorphicComponent<{
     space_id: string | null;
     root_node: ComponentMeta;
     username: string | null;
+    last_api_call?: Payload | null;
     api_calls?: Payload[];
 }, {
     close: CustomEvent<any>;

package/dist/src/api_docs/ApiRecorder.svelte

@@ -4,9 +4,6 @@
 
 	export let api_calls: Payload[] = [];
 	export let dependencies: Dependency[];
-
-	$: console.log("API CALLS UPDATED:", api_calls);
-	$: console.log("DEPENDENCIES:", dependencies);
 </script>
 
 <div id="api-recorder">

package/dist/src/api_docs/CodeSnippet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ComponentMeta, Dependency } from "../types";
+	import type { ComponentMeta, Dependency, Payload } from "../types";
 	import CopyButton from "./CopyButton.svelte";
 	import { represent_value, is_potentially_nested_file_data } from "./utils";
 	import { Block } from "@gradio/atoms";
@@ -24,6 +24,7 @@
 	export let api_description: string | null = null;
 	export let analytics: Record<string, any>;
 	export let markdown_code_snippets: Record<string, Record<string, string>>;
+	export let last_api_call: Payload | null = null;
 
 	let python_code: HTMLElement;
 	let js_code: HTMLElement;
@@ -41,6 +42,27 @@
 	$: normalised_api_prefix = api_prefix ? api_prefix : "/";
 	$: normalised_root = root.replace(/\/$/, "");
 
+	$: is_most_recently_used = last_api_call?.fn_index === dependency.id;
+
+	$: actual_data =
+		is_most_recently_used && last_api_call?.data
+			? last_api_call.data.filter((d) => typeof d !== "undefined")
+			: null;
+
+	function getParameterValue(param: any, index: number): any {
+		if (
+			is_most_recently_used &&
+			actual_data &&
+			actual_data[index] !== undefined
+		) {
+			return actual_data[index];
+		}
+		return param.parameter_has_default !== undefined &&
+			param.parameter_has_default
+			? param.parameter_default
+			: param.example_input;
+	}
+
 	$: markdown_code_snippets[
 		dependency.api_name as keyof typeof markdown_code_snippets
 	] = {
@@ -55,6 +77,8 @@
 		api_name={dependency.api_name}
 		description={api_description}
 		{analytics}
+		{last_api_call}
+		dependency_id={dependency.id}
 	/>
 	<div class:hidden={current_language !== "python"}>
 		<Block>
@@ -71,14 +95,16 @@ client = Client(<span class="token string">"{space_id || root}"</span
 						>{#if username !== null}, auth=("{username}", **password**){/if})
 result = client.<span class="highlight">predict</span
 						>(<!--
--->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
+-->{#each endpoint_parameters as param, i}<!--
 		-->
-	{parameter_name
-								? parameter_name + "="
+	{param.parameter_name
+								? param.parameter_name + "="
 								: ""}<span
+								class:recent-value={is_most_recently_used &&
+									actual_data?.[i] !== undefined}
 								>{represent_value(
-									parameter_has_default ? parameter_default : example_input,
-									python_type.type,
+									getParameterValue(param, i),
+									param.python_type.type,
 									"py"
 								)}</span
 							>,{/each}<!--
@@ -112,22 +138,26 @@ result = client.<span class="highlight">predict</span
 	const result = await client.predict(<span class="api-name"
 							>"/{dependency.api_name}"</span
 						>, &lbrace; <!--
-	-->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
-			-->{#if blob_components.includes(component)}<!--
+	-->{#each endpoint_parameters as param, i}<!--
+			-->{#if blob_components.includes(param.component)}<!--
 		-->
 					<span
 									class="example-inputs"
-									>{parameter_name}: example{component}</span
+									>{param.parameter_name}: example{param.component}</span
 								>, <!--
 			--><span class="desc"><!--
 			--></span
 								><!--
 			-->{:else}<!--
 		-->		
-			<span class="example-inputs"
-									>{parameter_name}: {represent_value(
-										example_input,
-										python_type.type,
+			<span
+									class="example-inputs {is_most_recently_used &&
+									actual_data?.[i] !== undefined
+										? 'recent-value'
+										: ''}"
+									>{param.parameter_name}: {represent_value(
+										getParameterValue(param, i),
+										param.python_type.type,
 										"js"
 									)}</span
 								>, <!--
@@ -151,13 +181,18 @@ result = client.<span class="highlight">predict</span
 
 				<div bind:this={bash_post_code}>
 					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
-	"data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
+	"data": [{#each endpoint_parameters as param, i}
 							<!-- 
-	-->{represent_value(
-								example_input,
-								python_type.type,
-								"bash"
-							)}{#if i < endpoint_parameters.length - 1},
+	--><span
+								class={is_most_recently_used && actual_data?.[i] !== undefined
+									? "recent-value"
+									: ""}
+								>{represent_value(
+									getParameterValue(param, i),
+									param.python_type.type,
+									"bash"
+								)}</span
+							>{#if i < endpoint_parameters.length - 1},
 							{/if}
 						{/each}
 	]{"}"}' \
@@ -211,6 +246,15 @@ result = client.<span class="highlight">predict</span
 		color: var(--color-accent);
 	}
 
+	.recent-value {
+		color: #fd7b00;
+		background: #fff4e6;
+		border: 1px solid #ffd9b3;
+		border-radius: var(--radius-sm);
+		padding: 1px 4px;
+		font-weight: var(--weight-medium);
+	}
+
 	.hidden {
 		display: none;
 	}

package/dist/src/api_docs/CodeSnippet.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Dependency } from "../types";
+import type { Dependency, Payload } from "../types";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -23,6 +23,7 @@ declare const CodeSnippet: $$__sveltets_2_IsomorphicComponent<{
     api_description?: string | null;
     analytics: Record<string, any>;
     markdown_code_snippets: Record<string, Record<string, string>>;
+    last_api_call?: Payload | null;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/src/api_docs/EndpointDetail.svelte

@@ -1,30 +1,45 @@
 <script lang="ts">
+	import type { Payload } from "../types";
 	export let api_name: string | null = null;
 	export let description: string | null = null;
 	export let analytics: Record<string, any>;
+	export let last_api_call: Payload | null = null;
+	export let dependency_id: number | null = null;
 	import { format_latency, get_color_from_success_rate } from "./utils";
+	import PercentileChart from "./PercentileChart.svelte";
 
 	const success_rate = api_name ? analytics[api_name]?.success_rate : 0;
 	const color = get_color_from_success_rate(success_rate);
+	$: is_most_recently_used = last_api_call?.fn_index === dependency_id;
 </script>
 
 <h3>
 	API name:
 	<span class="post">{"/" + api_name}</span>
-	<span class="desc">{description}</span>
-	{#if analytics && api_name && analytics[api_name]}
-		<span class="analytics">
-			Total requests: {analytics[api_name].total_requests} (<span style={color}
-				>{Math.round(success_rate * 100)}%</span
-			>
-			successful) &nbsp;|&nbsp; p50/p90/p99:
-			{format_latency(analytics[api_name].process_time_percentiles["50th"])}
-			/
-			{format_latency(analytics[api_name].process_time_percentiles["90th"])}
-			/
-			{format_latency(analytics[api_name].process_time_percentiles["99th"])}
-		</span>
-	{/if}
+	<span class="desc">
+		{description}
+		{#if analytics && api_name && analytics[api_name]}
+			{@const endpoint_analytics = analytics[api_name]}
+			{@const p50 = endpoint_analytics.process_time_percentiles["50th"]}
+			{@const p90 = endpoint_analytics.process_time_percentiles["90th"]}
+			{@const p99 = endpoint_analytics.process_time_percentiles["99th"]}
+			<span class="analytics-inline">
+				<span class="analytics-content">
+					<span class="analytics-text-wrapper">
+						{endpoint_analytics.total_requests} requests ({Math.round(
+							success_rate * 100
+						)}% successful, p50: {format_latency(p50)})
+					</span>
+					<div class="analytics-tooltip">
+						<PercentileChart {p50} {p90} {p99} />
+					</div>
+				</span>
+				{#if is_most_recently_used}
+					<span class="most-recently-used">Most recently used</span>
+				{/if}
+			</span>
+		{/if}
+	</span>
 </h3>
 
 <style>
@@ -46,14 +61,55 @@
 		font-weight: var(--weight-semibold);
 	}
 
-	.analytics {
+	.analytics-inline {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--size-2);
+		margin-left: var(--size-2);
 		color: var(--body-text-color-subdued);
-		margin-top: var(--size-1);
+	}
+
+	.analytics-content {
+		position: relative;
+		display: inline-block;
+	}
+
+	.analytics-text-wrapper {
+		cursor: help;
+	}
+
+	.analytics-tooltip {
+		position: absolute;
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-bottom: var(--size-2);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.2s ease;
+		z-index: 1000;
+	}
+
+	.analytics-content:hover .analytics-tooltip {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.most-recently-used {
+		display: inline-block;
+		color: #fd7b00;
+		background: #fff4e6;
+		border: 1px solid #ffd9b3;
+		border-radius: var(--radius-sm);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-medium);
+		white-space: nowrap;
 	}
 
 	.desc {
 		color: var(--body-text-color);
 		font-size: var(--text-lg);
-		margin-top: var(--size-1);
+		margin-left: var(--size-2);
 	}
 </style>

package/dist/src/api_docs/EndpointDetail.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Payload } from "../types";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -15,6 +16,8 @@ declare const EndpointDetail: $$__sveltets_2_IsomorphicComponent<{
     api_name?: string | null;
     description?: string | null;
     analytics: Record<string, any>;
+    last_api_call?: Payload | null;
+    dependency_id?: number | null;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/src/api_docs/MCPSnippet.svelte

@@ -3,9 +3,11 @@
 	import CopyButton from "./CopyButton.svelte";
 	import { Tool, Prompt, Resource } from "@gradio/icons";
 	import { format_latency, get_color_from_success_rate } from "./utils";
+	import PercentileChart from "./PercentileChart.svelte";
 
 	export let mcp_server_active: boolean;
 	export let mcp_server_url_streamable: string;
+	export let root: string;
 	export let tools: Tool[];
 	export let all_tools: Tool[] = [];
 	export let selected_tools: Set<string> = new Set();
@@ -69,7 +71,7 @@
 					"gradio[mcp]",
 					"gradio",
 					"upload-mcp",
-					mcp_server_url_streamable,
+					root,
 					"<UPLOAD_DIRECTORY>"
 				]
 			};
@@ -218,34 +220,19 @@
 									: "⚠︎ No description provided in function docstring"}
 							</span>
 							{#if analytics[tool.meta.endpoint_name]}
-								<span
-									class="tool-analytics"
-									style="color: var(--body-text-color-subdued); margin-left: 1em;"
-								>
-									Total requests: {analytics[tool.meta.endpoint_name]
-										.total_requests}
-									<span style={color}
-										>({Math.round(success_rate * 100)}% successful)</span
+								{@const endpoint_analytics = analytics[tool.meta.endpoint_name]}
+								{@const p50 =
+									endpoint_analytics.process_time_percentiles["50th"]}
+								<div class="tool-analytics-wrapper" style="margin-left: 1em;">
+									<span
+										class="tool-analytics"
+										style="color: var(--body-text-color-subdued);"
 									>
-									&nbsp;|&nbsp; p50/p90/p99:
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"50th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"90th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"99th"
-										]
-									)}
-								</span>
+										{endpoint_analytics.total_requests} requests ({Math.round(
+											success_rate * 100
+										)}% successful, p50: {format_latency(p50)})
+									</span>
+								</div>
 							{/if}
 						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
@@ -354,10 +341,16 @@
 {/if}
 
 <style>
+	.tool-analytics-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+
 	.tool-analytics {
 		font-size: 0.95em;
 		color: var(--body-text-color-subdued);
 	}
+
 	.transport-selection {
 		margin-bottom: var(--size-4);
 	}

package/dist/src/api_docs/MCPSnippet.svelte.d.ts

@@ -14,6 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const MCPSnippet: $$__sveltets_2_IsomorphicComponent<{
     mcp_server_active: boolean;
     mcp_server_url_streamable: string;
+    root: string;
     tools: {
         name: string;
         description: string;