windmill-components 1.596.1 → 1.613.0

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -4,7 +4,7 @@ import { Button, Drawer, DrawerContent } from '../../../common';
 import { base } from '../../../../base';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
 import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
-import { emptySchema } from '../../../../utils';
+import { emptySchema, sendUserToast } from '../../../../utils';
 import { getContext, tick, untrack } from 'svelte';
 import { workspaceStore } from '../../../../stores';
 import { createEventDispatcher } from 'svelte';
@@ -13,17 +13,23 @@ import { computeFields } from './utils';
 import { inferArgs, loadSchema } from '../../../../infer';
 import AppRunButton from './AppRunButton.svelte';
 import { getScriptByPath } from '../../../../scripts';
-import { sendUserToast } from '../../../../toast';
 import { autoPlacement } from '@floating-ui/core';
 import { ExternalLink, Eye, GitFork, Pen, RefreshCw, Trash } from 'lucide-svelte';
 import { get } from 'svelte/store';
 import RunButton from '../../../RunButton.svelte';
 import Popover from '../../../meltComponents/Popover.svelte';
+import ScriptEditorDrawer from '../../../flows/content/ScriptEditorDrawer.svelte';
+import FlowEditorDrawer from '../../../flows/content/FlowEditorDrawer.svelte';
+import { ScriptService } from '../../../../gen';
 let { runnable = $bindable(), fields = $bindable(), id, rawApps = false, isLoading = false, onRun = async () => { }, onCancel = async () => { } } = $props();
 const viewerContext = getContext('AppViewerContext');
 let drawerFlowViewer = $state(undefined);
 let flowPath = $state('');
 let notFound = $state(false);
+// Key to force re-mounting of viewer components (bypasses FlowModuleScript cache)
+let refreshKey = $state(0);
+let scriptEditorDrawer = $state(undefined);
+let flowEditorDrawer = $state(undefined);
 const dispatch = createEventDispatcher();
 async function refreshScript(runnable) {
     try {
@@ -74,6 +80,33 @@ async function fork(path) {
         }
     });
 }
+async function openScriptEditor(path) {
+    try {
+        const script = await ScriptService.getScriptByPath({
+            workspace: $workspaceStore,
+            path
+        });
+        scriptEditorDrawer?.openDrawer(script.hash, () => {
+            // Increment refreshKey to force re-mounting of FlowModuleScript (bypasses cache)
+            refreshKey++;
+            // Refresh the schema
+            lastRunnable = undefined;
+            refresh(runnable);
+        });
+    }
+    catch (e) {
+        sendUserToast(`Failed to load script: ${e}`, true);
+    }
+}
+function openFlowEditor(path) {
+    flowEditorDrawer?.openDrawer(path, () => {
+        // Increment refreshKey to force re-mounting of FlowPathViewer (bypasses cache)
+        refreshKey++;
+        // Refresh the schema
+        lastRunnable = undefined;
+        refresh(runnable);
+    });
+}
 let lastRunnable = undefined;
 function refresh(runnable) {
     if (deepEqual(runnable, lastRunnable)) {
@@ -102,6 +135,28 @@ $effect(() => {
 	</DrawerContent>
 </Drawer>
 
+<ScriptEditorDrawer
+	bind:this={scriptEditorDrawer}
+	on:save={() => {
+		// Increment refreshKey to force re-mounting of FlowModuleScript (bypasses cache)
+		refreshKey++
+		// Refresh the schema
+		lastRunnable = undefined
+		refresh(runnable)
+	}}
+/>
+
+<FlowEditorDrawer
+	bind:this={flowEditorDrawer}
+	on:save={() => {
+		// Increment refreshKey to force re-mounting of FlowPathViewer (bypasses cache)
+		refreshKey++
+		// Refresh the schema
+		lastRunnable = undefined
+		refresh(runnable)
+	}}
+/>
+
 <div class="p-2 h-full flex flex-col gap-2">
 	<div class="flex flex-row-reverse w-full gap-2">
 		{#if !rawApps}
@@ -115,7 +170,10 @@ $effect(() => {
 			size="xs"
 			startIcon={{ icon: RefreshCw }}
 			on:click={async () => {
-				sendUserToast('Refreshing inputs')
+				sendUserToast('Getting latest script version at that path')
+				// Increment refreshKey to force re-mounting of viewer components (bypasses cache)
+				refreshKey++
+				lastRunnable = undefined
 				refresh(runnable)
 				if (viewerContext) {
 					viewerContext.stateId.update((x) => x + 1)
@@ -149,10 +207,12 @@ $effect(() => {
 				variant="default"
 				size="xs"
 				startIcon={{ icon: Pen }}
-				endIcon={{ icon: ExternalLink }}
-				target="_blank"
-				href="{base}/flows/edit/{runnable.path}?nodraft=true">Edit</Button
+				on:click={() => {
+					openFlowEditor(runnable.path)
+				}}
 			>
+				Edit
+			</Button>
 			<Button
 				variant="default"
 				size="xs"
@@ -164,6 +224,16 @@ $effect(() => {
 				Details
 			</Button>
 		{:else}
+			<Button
+				size="xs"
+				variant="default"
+				startIcon={{ icon: Pen }}
+				on:click={() => {
+					openScriptEditor(runnable.path)
+				}}
+			>
+				Edit
+			</Button>
 			<Button
 				size="xs"
 				variant="default"
@@ -216,7 +286,7 @@ $effect(() => {
 		/>
 	</div>
 	<div class="w-full grow overflow-y-auto">
-		{#key viewerContext?.stateId ? get(viewerContext.stateId) : 0}
+		{#key `${viewerContext?.stateId ? get(viewerContext.stateId) : 0}-${refreshKey}`}
 			{#if notFound}
 				<div class="text-red-400"
 					>{runnable.runType} not found at {runnable.path} in workspace {$workspaceStore}</div

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { ConnectedAppInput, RowAppInput, RunnableByPath, StaticAppInput, UserAppInput } from '../../inputType';
+import type { ConnectedAppInput, RowAppInput, RunnableByPath, StaticAppInput, UserAppInput, CtxAppInput } from '../../inputType';
 interface Props {
     runnable: RunnableByPath;
-    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput> | undefined;
+    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | CtxAppInput> | undefined;
     id: string;
     rawApps?: boolean;
     isLoading?: boolean;

package/package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from '../../../../common';
-import { type AppInputs, type RunnableByName } from '../../inputType';
+import { type AppInputs, type RunnableByName, type CtxInput } from '../../inputType';
 import type { GridItem, HiddenRunnable } from '../../types';
 export interface AppScriptsList {
     inline: {
@@ -13,6 +13,6 @@ export interface AppScriptsList {
         transformer: boolean;
     }[];
 }
-export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): {};
+export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs | Record<string, CtxInput | AppInputs[string]>): {};
 export declare function getAppScripts(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): AppScriptsList;
 export declare function createScriptFromInlineScript(id: string, runnable: HiddenRunnable | RunnableByName, workspace: string, appPath: string): Promise<void>;

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -4,6 +4,7 @@ import { isRunnableByName, isRunnableByPath } from '../../inputType';
 import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
 // When the schema is loaded, we need to update the inputs spec
 // in order to render the inputs the component panel
+// Note: fields can include CtxInput for raw apps
 export function computeFields(schema, defaultUserInput, fields) {
     let schemaCopy = JSON.parse(JSON.stringify(schema));
     const result = {};
@@ -19,7 +20,15 @@ export function computeFields(schema, defaultUserInput, fields) {
             result[key] = newInput;
         }
         else {
-            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
+            // Preserve ctx inputs (used in raw apps) - they have { type: 'ctx', ctx: 'property' } syntax
+            if (oldInput.type === 'ctx') {
+                result[key] = oldInput;
+            }
+            else if (oldInput.fieldType === undefined) {
+                // For raw app inputs without fieldType, preserve the input but add the fieldType from schema
+                result[key] = Object.assign({}, oldInput, { fieldType: newInput.fieldType });
+            }
+            else if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
                 newInput.format !== oldInput.format ||
                 newInput.subFieldType !== oldInput.subFieldType ||
                 // An input became a select

package/package/components/apps/inputType.d.ts

@@ -50,6 +50,10 @@ export type EvalInputV2 = {
     onDemandOnly?: boolean;
     allowUserResources?: boolean;
 };
+export type CtxInput = {
+    type: 'ctx';
+    ctx: 'username' | 'email' | 'groups' | 'workspace' | 'author';
+};
 export type RowInput = {
     type: 'row';
     column: string;
@@ -83,7 +87,7 @@ export type RunnableByName = {
 };
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type RunnableWithFields = Runnable & {
-    fields?: Record<string, StaticAppInput | UserAppInput>;
+    fields?: Record<string, StaticAppInput | UserAppInput | CtxInput>;
 };
 export type ResultInput = {
     runnable: Runnable;
@@ -166,6 +170,7 @@ export type UploadAppInput = Extract<AppInput, {
 export type UploadS3AppInput = Extract<AppInput, {
     type: 'uploadS3';
 }>;
+export type CtxAppInput = CtxInput;
 export type RichAppInput = AppInput | {
     type: 'oneOf';
     oneOf: string[];

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -235,9 +235,9 @@ $effect(() => {
 });
 </script>
 
-<div class="flex flex-col items-center gap-10 2xl:gap-1 2xl:flex-row mt-4 xl:mt-0">
+<div class="flex flex-col items-center gap-2 2xl:flex-row mt-4 xl:mt-0 pr-2">
 	{#if $workspaceStore == 'admins'}
-		<div class="flex gap-1 relative w-full">
+		<div class="flex gap-1 relative">
 			<span class="text-xs absolute font-semibold text-emphasis -top-4">Scope</span>
 			<ToggleButtonGroup
 				selected={scope ?? 'admins'}
@@ -268,7 +268,7 @@ $effect(() => {
 			</ToggleButtonGroup>
 		</div>
 	{/if}
-	<div class="flex gap-1 relative w-full">
+	<div class="flex relative">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">From</span>
 		<input type="text" value={after ?? 'From'} disabled />
 		<CalendarPicker
@@ -284,7 +284,7 @@ $effect(() => {
 			}}
 		/>
 	</div>
-	<div class="flex gap-1 relative w-full">
+	<div class="flex relative">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">To</span>
 		<input type="text" value={before ?? 'To'} disabled />
 		<CalendarPicker
@@ -301,12 +301,10 @@ $effect(() => {
 		/>
 	</div>
 
-	<div class="flex gap-1 relative w-full">
+	<div class="flex relative">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Username</span>
 		<Select
 			bind:value={username}
-			class="w-full"
-			disablePortal
 			RightIcon={ChevronDown}
 			items={usernames
 				? [
@@ -322,41 +320,35 @@ $effect(() => {
 				: []}
 		/>
 	</div>
-	<div class="flex gap-1 relative w-full">
+	<div class="flex relative">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Resource</span>
 
 		<Select
-			disablePortal
 			onCreateItem={(r) => (resources.value?.push(r), (resource = r))}
 			createText="Press enter to use this value"
 			bind:value={resource}
 			items={safeSelectItems(['all', ...(resources.value ?? [])])}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
-			class="w-full"
 		/>
 	</div>
 
-	<div class="flex gap-1 relative w-full">
+	<div class="flex relative">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Operation</span>
 
 		<Select
-			disablePortal
 			bind:value={operation}
 			items={['all', ...Object.values(operations)].map((r) => ({ value: r, label: r }))}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
-			class="w-full"
 		/>
 	</div>
 
-	<div class="flex gap-1 relative w-full">
+	<div class="flex relative">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Action</span>
 
 		<Select
-			class="w-full"
 			bind:value={actionKind}
-			disablePortal
 			RightIcon={ChevronDown}
 			items={[
 				{ value: 'all', label: 'all' },
@@ -368,7 +360,7 @@ $effect(() => {
 		/>
 	</div>
 
-	<div class="flex flex-row gap-1">
+	<div class="flex flex-row">
 		<Button
 			variant="subtle"
 			on:click={() => {

package/package/components/auditLogs/AuditLogsFilters.svelte.d.ts

@@ -14,6 +14,6 @@ interface Props {
     scope?: undefined | 'all_workspaces' | 'instance';
     loading?: boolean;
 }
-declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "logs" | "before" | "after" | "loading" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "scope">;
+declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "logs" | "before" | "after" | "loading" | "perPage" | "hasMore" | "scope" | "pageIndex" | "actionKind">;
 type AuditLogsFilters = ReturnType<typeof AuditLogsFilters>;
 export default AuditLogsFilters;

package/package/components/common/button/model.js

@@ -136,7 +136,7 @@ export var ButtonType;
     };
     // New unified sizing system
     ButtonType.UnifiedSizingClasses = {
-        xs: 'px-1',
+        xs: 'px-2',
         sm: 'px-2', // Regular horizontal padding
         md: 'px-4',
         lg: 'px-6'

package/package/components/common/calendarPicker/CalendarPicker.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CalendarPicker: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;
-    date: string | undefined;
+    date: string | null | undefined;
     label: string;
     useDropdown?: boolean | undefined;
     clearable?: boolean | undefined;

package/package/components/common/languageIcons/TypeScript.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">"use strict";
-let { width = 16, height = 16, ...rest } = $props();
+let { width = 16, height = 16, size = undefined, ...rest } = $props();
+const derivedWidth = $derived(size ? size : width);
+const derivedHeight = $derived(size ? size : height);
 </script>
 
 <svg
-	{width}
-	{height}
+	width={derivedWidth}
+	height={derivedHeight}
 	{...rest}
 	viewBox="0 0 17 16"
 	fill="none"

package/package/components/common/languageIcons/TypeScript.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     width?: number;
     height?: number;
+    size?: number;
     [key: string]: any;
 }
 declare const TypeScript: import("svelte").Component<Props, {}, "">;

package/package/components/common/modal/Modal.svelte

@@ -54,7 +54,7 @@ function fadeFast(node) {
 				<div
 					onclick={stopPropagation(bubble('click'))}
 					class={twMerge(
-						'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						'relative transform overflow-hidden rounded-md bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
 						c,
 						open
 							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
@@ -67,9 +67,9 @@ function fadeFast(node) {
 						>
 					{/if}
 					<div class="flex">
-						<div class="ml-4 text-left flex-1">
+						<div class="text-left flex-1">
 							<div class="flex flex-row items-center justify-between">
-								<h3>{title}</h3>
+								<h3 class="text-emphasis text-lg font-semibold">{title}</h3>
 								{@render settings?.()}
 							</div>
 

package/package/components/copilot/autocomplete/Autocompletor.js

@@ -6,6 +6,7 @@ import { FIM_MAX_TOKENS, getModelContextWindow } from '../lib';
 import { setGlobalCSS } from '../shared';
 import { get } from 'svelte/store';
 import { copilotInfo } from '../../../aiStore';
+import { getTypeScriptWorker } from '@codingame/monaco-vscode-standalone-typescript-language-features';
 // max ratio of completions to context window
 const COMPLETIONS_MAX_RATIO = 0.1;
 // hard limit to max number of completions to fetch details for, to avoid performance overhead
@@ -128,7 +129,7 @@ export class Autocompletor {
                     ]
                 };
             },
-            disposeInlineCompletions: () => { },
+            disposeInlineCompletions: () => { }
         });
         this.#cursorDisposable = editor.onDidChangeCursorPosition(async (e) => {
             deletionsCues.clear();
@@ -230,7 +231,7 @@ export class Autocompletor {
     async #getTsCompletions(model, position, afterDot) {
         try {
             const offs = model.getOffsetAt(position);
-            const workerFactory = await languages.typescript.getTypeScriptWorker();
+            const workerFactory = await getTypeScriptWorker();
             const worker = await workerFactory(model.uri);
             const info = await worker.getCompletionsAtPosition(model.uri.toString(), offs);
             let entries = [];

package/package/components/copilot/chat/AIButtonStyle.d.ts

@@ -1 +1 @@
-export declare function AIBtnClasses(state?: 'default' | 'selected' | 'green'): string;
+export declare function AIBtnClasses(state?: 'default' | 'selected' | 'green' | 'accent'): string;

package/package/components/copilot/chat/AIButtonStyle.js

@@ -2,7 +2,8 @@ export function AIBtnClasses(state = 'default') {
     return twMerge(['selected', 'default'].includes(state) ? 'text-ai !border-ai/20 hover:bg-ai/15' : '', {
         default: '',
         selected: 'bg-ai/10',
-        green: 'bg-green-50 hover:bg-green-50 dark:bg-green-400/15 dark:hover:bg-green-400/15 text-green-800 border-green-200 dark:border-green-300/60 dark:text-green-400'
+        green: 'bg-green-50 hover:bg-green-50 dark:bg-green-400/15 dark:hover:bg-green-400/15 text-green-800 border-green-200 dark:border-green-300/60 dark:text-green-400',
+        accent: 'dark:bg-magenta-900 bg-magenta-600 text-white hover:bg-magenta-700 dark:hover:bg-magenta-950'
     }[state]);
 }
 import { twMerge } from 'tailwind-merge';

package/package/components/copilot/chat/AIChat.svelte

@@ -75,7 +75,9 @@ $effect(() => {
 		() => aiChatManager.contextManager.getSelectedContext(),
 		(sc) => aiChatManager.contextManager.setSelectedContext(sc)
 	}
-	availableContext={aiChatManager.contextManager.getAvailableContext()}
+	availableContext={aiChatManager.mode === AIMode.APP
+		? aiChatManager.getAppAvailableContext()
+		: aiChatManager.contextManager.getAvailableContext()}
 	messages={aiChatManager.currentReply
 		? [
 				...aiChatManager.displayMessages,

package/package/components/copilot/chat/AIChatDisplay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import AIChatMessage from './AIChatMessage.svelte';
 import {} from 'svelte';
-import { CheckIcon, HistoryIcon, Loader2, Plus, X, XIcon } from 'lucide-svelte';
+import { CheckIcon, Code2, FileCode, HistoryIcon, Loader2, MousePointer2, Plus, Square, TextSelect, X, XIcon } from 'lucide-svelte';
 import Button from '../../common/button/Button.svelte';
 import Popover from '../../meltComponents/Popover.svelte';
 import {} from './shared';
@@ -45,6 +45,13 @@ $effect(() => {
     };
 });
 const isLastMessageTool = $derived(messages.length > 0 && messages[messages.length - 1].role === 'tool');
+// Get app context for display when in APP mode
+const appContext = $derived.by(() => {
+    if (aiChatManager.mode !== AIMode.APP || !aiChatManager.appAiChatHelpers) {
+        return undefined;
+    }
+    return aiChatManager.appAiChatHelpers.getSelectedContext();
+});
 </script>
 
 <div class="flex flex-col h-full">
@@ -160,9 +167,10 @@ const isLastMessageTool = $derived(messages.length > 0 && messages[messages.leng
 		{#if aiChatManager.loading}
 			<div class="absolute -top-10 w-full flex flex-row justify-center">
 				<Button
-					startIcon={{ icon: Loader2, classes: 'animate-spin' }}
+					startIcon={{ icon: Square }}
 					size="xs"
 					variant="default"
+					btnClasses="bg-surface hover:bg-surface-selected"
 					on:click={() => {
 						cancel()
 					}}
@@ -217,10 +225,87 @@ const isLastMessageTool = $derived(messages.length > 0 && messages[messages.leng
 						<Markdown md={disabledMessage} />
 					</div>
 				{:else}
-					<div class="flex flex-row gap-2 min-w-0 flex-wrap items-center">
+					<div class="flex flex-row gap-x-1.5 min-w-0 flex-wrap items-center">
 						<ChatMode />
-						<DatatableCreationPolicy />
+						{#if aiChatManager.mode === AIMode.APP}
+							<DatatableCreationPolicy />
+						{/if}
 						<ProviderModelSelector />
+
+						{#if aiChatManager.mode === AIMode.APP && appContext && (appContext.type !== 'none' || appContext.inspectorElement || appContext.codeSelection)}
+							{#if appContext.type === 'frontend' && appContext.frontendPath && !appContext.selectionExcluded}
+								<div
+									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-2xs"
+									title={appContext.frontendPath}
+								>
+									<FileCode class="w-3 h-3" />
+									<span class="truncate max-w-[80px]">{appContext.frontendPath}</span>
+									<button
+										class="hover:bg-blue-200 dark:hover:bg-blue-800/50 rounded p-0.5 -mr-0.5"
+										onclick={() => appContext.toggleSelectionExcluded?.()}
+										title="Exclude from prompt"
+									>
+										<X class="w-2.5 h-2.5" />
+									</button>
+								</div>
+							{:else if appContext.type === 'backend' && appContext.backendKey && !appContext.selectionExcluded}
+								<div
+									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-2xs"
+									title={appContext.backendKey}
+								>
+									<Code2 class="w-3 h-3" />
+									<span class="truncate max-w-[80px]">{appContext.backendKey}</span>
+									<button
+										class="hover:bg-green-200 dark:hover:bg-green-800/50 rounded p-0.5 -mr-0.5"
+										onclick={() => appContext.toggleSelectionExcluded?.()}
+										title="Exclude from prompt"
+									>
+										<X class="w-2.5 h-2.5" />
+									</button>
+								</div>
+							{/if}
+							{#if appContext.inspectorElement}
+								<div
+									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-2xs"
+									title={appContext.inspectorElement.path}
+								>
+									<MousePointer2 class="w-3 h-3" />
+									<span class="truncate max-w-[60px]">
+										{appContext.inspectorElement.tagName.toLowerCase()}{appContext.inspectorElement
+											.id
+											? `#${appContext.inspectorElement.id}`
+											: ''}{appContext.inspectorElement.className
+											? `.${appContext.inspectorElement.className.split(' ')[0]}`
+											: ''}
+									</span>
+									<button
+										class="hover:bg-purple-200 dark:hover:bg-purple-800/50 rounded p-0.5 -mr-0.5"
+										onclick={() => appContext.clearInspector?.()}
+										title="Clear element selection"
+									>
+										<X class="w-2.5 h-2.5" />
+									</button>
+								</div>
+							{/if}
+							{#if appContext.codeSelection}
+								<div
+									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-2xs"
+									title={`${appContext.codeSelection.source}: lines ${appContext.codeSelection.startLine}-${appContext.codeSelection.endLine}`}
+								>
+									<TextSelect class="w-3 h-3" />
+									<span class="truncate max-w-[80px]">
+										L{appContext.codeSelection.startLine}-{appContext.codeSelection.endLine}
+									</span>
+									<button
+										class="hover:bg-amber-200 dark:hover:bg-amber-800/50 rounded p-0.5 -mr-0.5"
+										onclick={() => appContext.clearCodeSelection?.()}
+										title="Clear code selection"
+									>
+										<X class="w-2.5 h-2.5" />
+									</button>
+								</div>
+							{/if}
+						{/if}
 					</div>
 				{/if}
 			</div>