chore: refinements of tools/terminals in user ui

pkg/api/handlers/tools.go

@@ -163,8 +163,14 @@ func (t *ToolHandler) Test(req api.Context) error {
 		return err
 	}
 
+	var (
+		envNameList []string
+		envNameSeen = map[string]struct{}{}
+	)
 	var envList []string
 	for k, v := range env {
+		envNameList = append(envNameList, k)
+		envNameSeen[k] = struct{}{}
 		envList = append(envList, k+"="+v)
 	}
 
@@ -174,13 +180,23 @@ func (t *ToolHandler) Test(req api.Context) error {
 	}
 
 	for k, v := range input.Env {
+		if _, ok := envNameSeen[k]; !ok {
+			envNameList = append(envNameList, k)
+			envNameSeen[k] = struct{}{}
+		}
 		envList = append(envList, k+"="+v)
 	}
 
 	if input.Tool != nil {
 		tool.Spec.Manifest = input.Tool.ToolManifest
 	}
 
+	if tool.Spec.Manifest.Name == "" {
+		tool.Spec.Manifest.Name = "test"
+	}
+
+	tool.Spec.Envs = envNameList
+
 	tools, err := render.CustomTool(req.Context(), req.Storage, tool)
 	if err != nil {
 		return err

pkg/invoke/invoker.go

@@ -453,13 +453,20 @@ func (i *Invoker) createRun(ctx context.Context, c kclient.WithWatch, thread *v1
 
 func (i *Invoker) Resume(ctx context.Context, c kclient.WithWatch, thread *v1.Thread, run *v1.Run) (err error) {
 	defer func() {
+		if err != nil {
+			i.events.SubmitProgress(run, types.Progress{
+				RunID: run.Name,
+				Time:  types.NewTime(time.Now()),
+				Error: err.Error(),
+			})
+		}
 		i.events.Done(run)
 		time.AfterFunc(20*time.Second, func() {
 			i.events.ClearProgress(run)
 		})
 	}()
 
-	if run.Name != "" {
+	if !isEphemeral(run) {
 		thread, err = wait.For(ctx, c, thread, func(thread *v1.Thread) (bool, error) {
 			if thread.Spec.Abort {
 				return false, fmt.Errorf("thread was aborted while waiting for workspace")
@@ -836,11 +843,6 @@ func (i *Invoker) stream(ctx context.Context, c kclient.WithWatch, prevThreadNam
 		retErr = i.saveState(ctx, c, prevThreadName, thread, run, runResp, retErr)
 		if retErr != nil {
 			log.Errorf("failed to save state: %v", retErr)
-			i.events.SubmitProgress(run, types.Progress{
-				RunID: run.Name,
-				Time:  types.NewTime(time.Now()),
-				Error: retErr.Error(),
-			})
 		}
 	}()
 

ui/user/src/app.css

@@ -6,6 +6,10 @@
 	@apply min-h-10 min-w-10 rounded-lg p-2.5 text-sm text-gray hover:bg-gray-100 focus:outline-none dark:text-gray-400 dark:hover:bg-gray-700;
 }
 
+.icon-default {
+	@apply h-5 w-5 text-gray;
+}
+
 body {
 	@apply bg-white text-black dark:bg-black dark:text-gray-50;
 }

ui/user/src/lib/components/Editors.svelte

@@ -10,7 +10,7 @@
 	import Image from '$lib/components/editor/Image.svelte';
 	import { CheckSquare, Table as TableIcon, Image as ImageIcon, Wrench } from 'lucide-svelte';
 	import { isImage } from '$lib/image';
-	import Terminal from '$lib/components/Terminal.svelte';
+	import Terminal from '$lib/components/terminal/Terminal.svelte';
 	import { term } from '$lib/stores';
 	import Tool from '$lib/components/tool/Tool.svelte';
 

ui/user/src/lib/components/tasks/Runs.svelte

@@ -144,9 +144,9 @@
 		<table class="w-full text-left">
 			<thead class="font-semibold">
 				<tr>
-					<th> Start </th>
-					<th> Input </th>
-					<th> Duration </th>
+					<th> Start</th>
+					<th> Input</th>
+					<th> Duration</th>
 					<th></th>
 				</tr>
 			</thead>
@@ -246,4 +246,8 @@
 	th {
 		@apply p-1.5;
 	}
+
+	dialog::backdrop {
+		@apply bg-black bg-opacity-60;
+	}
 </style>

ui/user/src/lib/components/terminal/Env.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Env from '$lib/components/tool/Env.svelte';
+	import { ChatService } from '$lib/services';
+	import { currentAssistant } from '$lib/stores';
+	import { masked } from '$lib/components/tool/Env.svelte';
+
+	let dialog: HTMLDialogElement;
+	let envs: { key: string; value: string; editing: string }[] = $state([]);
+	let error = $state('');
+
+	export async function show() {
+		const newEnvs = await ChatService.getAssistantEnv($currentAssistant.id);
+		envs = Object.entries(newEnvs).map(([key, value]) => ({ key, value, editing: masked }));
+		envs.push({ key: '', value: '', editing: '' });
+		error = '';
+		dialog.showModal();
+	}
+
+	async function save() {
+		const newEnv = envs.reduce(
+			(acc, { key, value }) => {
+				if (key) {
+					acc[key] = value;
+				}
+				return acc;
+			},
+			{} as Record<string, string>
+		);
+		try {
+			await ChatService.saveAssistantEnv($currentAssistant.id, newEnv);
+		} catch (e) {
+			error = e.toString();
+			return;
+		}
+		dialog.close();
+	}
+
+	onMount(() => {
+		show();
+	});
+</script>
+
+<dialog
+	bind:this={dialog}
+	class="w-full max-w-3xl rounded-3xl bg-gray-50 text-black dark:bg-gray-950 dark:text-gray-50"
+>
+	<Env {envs} />
+	{#if error}
+		<p class="p-5 text-sm text-red-500">{error}</p>
+	{/if}
+	<div class="flex w-full items-center justify-end gap-2 p-5">
+		<button class="p-3 px-6" onclick={() => dialog.close()}> Cancel </button>
+		<button class="rounded-3xl bg-blue p-3 px-6 text-white" onclick={() => save()}> Save </button>
+	</div>
+</dialog>
+
+<style lang="postcss">
+	dialog::backdrop {
+		@apply bg-black bg-opacity-60;
+	}
+</style>

ui/user/src/lib/components/Terminal.svelte → ui/user/src/lib/components/terminal/Terminal.svelte

@@ -3,15 +3,22 @@
 	import '@xterm/xterm/css/xterm.css';
 	import { currentAssistant } from '$lib/stores';
 	import { RefreshCcw } from 'lucide-svelte';
+	import { term } from '$lib/stores';
+	import Env from '$lib/components/terminal/Env.svelte';
 
 	let terminalContainer: HTMLElement;
 	let close: () => void;
 	let connectState = $state('disconnected');
+	let envDialog: ReturnType<typeof Env>;
 
 	onDestroy(() => close?.());
 
 	onMount(connect);
 
+	function closeTerm() {
+		term.open = false;
+	}
+
 	async function connect() {
 		const { Terminal } = await import('@xterm/xterm');
 		const { FitAddon } = await import('@xterm/addon-fit');
@@ -77,21 +84,39 @@
 </script>
 
 <div class="flex h-full w-full flex-col">
-	{#if connectState !== 'connected'}
-		<div class="flex items-center gap-2 self-end">
-			<span class="capitalize">{connectState}</span>
+	<div class="relative flex-1 rounded-3xl bg-gray-950 p-5">
+		<div class="absolute inset-x-0 top-0 z-10 mx-1 flex items-center justify-end gap-2 p-5">
 			{#if connectState === 'disconnected'}
-				<button class="icon-button" onclick={connect}>
-					<RefreshCcw class="h-4 w-4" />
+				<button onclick={connect}>
+					<RefreshCcw class="icon-default" />
 				</button>
+				<div class="flex-1"></div>
 			{/if}
+			<button
+				class="px-1 py-0.5 font-mono text-gray hover:bg-gray hover:text-white"
+				onclick={() => {
+					envDialog.show();
+				}}>$ENV_VARS</button
+			>
+			<span
+				class="font-mono uppercase"
+				class:text-red-400={connectState === 'disconnected'}
+				class:animate-pulse={connectState === 'connecting'}
+				class:text-gray={connectState === 'connected'}>{connectState}</span
+			>
+			<button
+				onclick={closeTerm}
+				class="ms-4 font-mono text-gray hover:text-black hover:dark:text-white"
+			>
+				X
+			</button>
 		</div>
-	{/if}
-	<div class="flex-1 rounded-3xl bg-gray-950 p-5">
-		<div bind:this={terminalContainer}></div>
+		<div class="m-2" bind:this={terminalContainer}></div>
 	</div>
 </div>
 
+<Env bind:this={envDialog} />
+
 <style lang="postcss">
 	:global {
 		.xterm > div {

ui/user/src/lib/components/tool/Env.svelte

@@ -26,8 +26,8 @@
 		<table class="w-full text-left">
 			<thead>
 				<tr>
-					<th>Name</th>
-					<th>Value</th>
+					<th class="w-1/4">Name</th>
+					<th class="w-full">Value</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -36,7 +36,7 @@
 						<td
 							><input
 								bind:value={env.key}
-								placeholder="Enter name"
+								placeholder="eg. SAMPLE_KEY"
 								class="ast bg-gray-50 outline-none dark:bg-gray-950"
 							/></td
 						>

ui/user/src/lib/components/tool/Params.svelte

@@ -4,24 +4,34 @@
 
 	interface Props {
 		params: { key: string; value: string }[];
+		input?: boolean;
+		autofocus?: boolean;
 	}
 
-	let { params = $bindable([]) }: Props = $props();
+	let { params = $bindable([]), input, autofocus = false }: Props = $props();
 </script>
 
-<div class="flex flex-col gap-4 rounded-3xl bg-gray-50 p-5 dark:bg-gray-950">
+<div class="flex flex-col gap-4 rounded-3xl bg-gray-50 dark:bg-gray-950" class:p-5={!input}>
 	<div class="flex">
-		<h4 class="flex-1 text-xl font-semibold">Arguments</h4>
-		<button onclick={() => params.push({ key: '', value: '' })}>
-			<Plus class="h-5 w-5" />
-		</button>
+		{#if !input}
+			<h4 class="flex-1 text-xl font-semibold">Arguments</h4>
+		{/if}
+		{#if !input}
+			<button onclick={() => params.push({ key: '', value: '' })}>
+				<Plus class="h-5 w-5" />
+			</button>
+		{/if}
 	</div>
 	{#if params.length !== 0}
 		<table class="w-full table-auto text-left">
 			<thead>
 				<tr>
-					<th>Name</th>
-					<th>Description</th>
+					<th class="w-1/4">Name</th>
+					{#if input}
+						<th class="w-full">Value</th>
+					{:else}
+						<th class="w-full">Description</th>
+					{/if}
 				</tr>
 			</thead>
 			<tbody>
@@ -30,22 +40,28 @@
 						<td
 							><input
 								bind:value={param.key}
+								readonly={input}
 								placeholder="Enter name"
-								class="ast bg-gray-50 outline-none dark:bg-gray-950"
+								class="me-1 rounded-lg px-2 py-1 outline-none focus:ring-2 focus:ring-blue focus:ring-opacity-50 {input
+									? 'bg-gray-50 dark:bg-gray-950'
+									: 'bg-gray-100 dark:bg-gray-900'}"
 							/></td
 						>
-						<td
-							><textarea
+						<td class="flex items-center">
+							<textarea
 								use:autoHeight
-								class="resize-none bg-gray-50 outline-none dark:bg-gray-950"
+								class="w-full resize-none rounded-lg bg-gray-100 p-1 px-2 outline-none focus:ring-2 focus:ring-blue focus:ring-opacity-50 dark:bg-gray-900"
 								rows="1"
+								{autofocus}
 								bind:value={param.value}
-							></textarea></td
-						>
+							></textarea>
+						</td>
 						<td>
-							<button onclick={() => params.splice(i, 1)}>
-								<Minus class="h-5 w-5" />
-							</button>
+							{#if !input}
+								<button onclick={() => params.splice(i, 1)}>
+									<Minus class="h-5 w-5" />
+								</button>
+							{/if}
 						</td>
 					</tr>
 				{/each}