From 7d2adb90d2c4ce791707a028041ddd432abd34b0 Mon Sep 17 00:00:00 2001
From: Darren Shepherd <darren@acorn.io>
Date: Fri, 10 Jan 2025 16:41:41 -0700
Subject: [PATCH] chore: refinements of tools/terminals in user ui

---
 pkg/api/handlers/tools.go                     | 16 ++++
 pkg/invoke/invoker.go                         | 14 ++--
 ui/user/src/app.css                           |  4 +
 ui/user/src/lib/components/Editors.svelte     |  2 +-
 ui/user/src/lib/components/tasks/Runs.svelte  | 10 ++-
 .../src/lib/components/terminal/Env.svelte    | 62 +++++++++++++++
 .../components/{ => terminal}/Terminal.svelte | 41 ++++++++--
 ui/user/src/lib/components/tool/Env.svelte    |  6 +-
 ui/user/src/lib/components/tool/Params.svelte | 50 ++++++++-----
 ui/user/src/lib/components/tool/Tool.svelte   | 75 +++++++++++++++++--
 ui/user/src/lib/services/chat/operations.ts   | 11 +++
 ui/user/tailwind.config.ts                    |  6 +-
 12 files changed, 251 insertions(+), 46 deletions(-)
 create mode 100644 ui/user/src/lib/components/terminal/Env.svelte
 rename ui/user/src/lib/components/{ => terminal}/Terminal.svelte (65%)

diff --git a/pkg/api/handlers/tools.go b/pkg/api/handlers/tools.go
index 9325527bb..153d5e931 100644
--- a/pkg/api/handlers/tools.go
+++ b/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,6 +180,10 @@ 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)
 	}
 
@@ -181,6 +191,12 @@ func (t *ToolHandler) Test(req api.Context) error {
 		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
diff --git a/pkg/invoke/invoker.go b/pkg/invoke/invoker.go
index bc11015fe..8ee079117 100644
--- a/pkg/invoke/invoker.go
+++ b/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(),
-			})
 		}
 	}()
 
diff --git a/ui/user/src/app.css b/ui/user/src/app.css
index f6558bc23..4fe128692 100644
--- a/ui/user/src/app.css
+++ b/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;
 }
diff --git a/ui/user/src/lib/components/Editors.svelte b/ui/user/src/lib/components/Editors.svelte
index 936fb13e2..e68e5d843 100644
--- a/ui/user/src/lib/components/Editors.svelte
+++ b/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';
 
diff --git a/ui/user/src/lib/components/tasks/Runs.svelte b/ui/user/src/lib/components/tasks/Runs.svelte
index ea4fe181a..a1fb57cf0 100644
--- a/ui/user/src/lib/components/tasks/Runs.svelte
+++ b/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>
diff --git a/ui/user/src/lib/components/terminal/Env.svelte b/ui/user/src/lib/components/terminal/Env.svelte
new file mode 100644
index 000000000..83735a513
--- /dev/null
+++ b/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>
diff --git a/ui/user/src/lib/components/Terminal.svelte b/ui/user/src/lib/components/terminal/Terminal.svelte
similarity index 65%
rename from ui/user/src/lib/components/Terminal.svelte
rename to ui/user/src/lib/components/terminal/Terminal.svelte
index 0c18fd735..c9c21d6d6 100644
--- a/ui/user/src/lib/components/Terminal.svelte
+++ b/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 {
diff --git a/ui/user/src/lib/components/tool/Env.svelte b/ui/user/src/lib/components/tool/Env.svelte
index 9a02e1966..c9f6596cb 100644
--- a/ui/user/src/lib/components/tool/Env.svelte
+++ b/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
 						>
diff --git a/ui/user/src/lib/components/tool/Params.svelte b/ui/user/src/lib/components/tool/Params.svelte
index f42785856..93625caa1 100644
--- a/ui/user/src/lib/components/tool/Params.svelte
+++ b/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}
diff --git a/ui/user/src/lib/components/tool/Tool.svelte b/ui/user/src/lib/components/tool/Tool.svelte
index c73d065f2..f56bf34b4 100644
--- a/ui/user/src/lib/components/tool/Tool.svelte
+++ b/ui/user/src/lib/components/tool/Tool.svelte
@@ -44,6 +44,7 @@ console.log(\`Your message \${process.env.MSG}\`);
 	let saved: AssistantTool = $state({ ...blankTool });
 	let dirty = $derived.by(() => JSON.stringify(tool) !== JSON.stringify(saved));
 	let params: { key: string; value: string }[] = $state([]);
+	let input: { key: string; value: string }[] = $state([]);
 	let envs: { key: string; value: string; editing: string }[] = $state([]);
 	let requestDelete = $state(false);
 	let loaded = load();
@@ -55,6 +56,7 @@ console.log(\`Your message \${process.env.MSG}\`);
 		buffer: ''
 	});
 	let testOutput = $state<Promise<{ output: string }>>();
+	let dialog: HTMLDialogElement;
 
 	$effect(() => {
 		const item = EditorService.items.find((item) => item.id === id);
@@ -65,6 +67,19 @@ console.log(\`Your message \${process.env.MSG}\`);
 		}
 	});
 
+	$effect(() => {
+		for (let i = 0; i < params.length; i++) {
+			if (input.length <= i) {
+				input.push({ key: params[i].key, value: '' });
+			} else if (input[i].key !== params[i].key) {
+				input[i].key = params[i].key;
+			}
+		}
+		if (input.length > params.length) {
+			input.splice(params.length);
+		}
+	});
+
 	async function deleteTool() {
 		requestDelete = false;
 		if (!id) {
@@ -87,17 +102,22 @@ console.log(\`Your message \${process.env.MSG}\`);
 		await load();
 	}
 
-	function test() {
+	function test(checkModal: boolean) {
+		if (checkModal && !testOutput && params.length > 0) {
+			dialog.showModal();
+			return;
+		}
 		testOutput = ChatService.testTool(
 			$currentAssistant.id,
 			tool,
-			{
-				msg: 'hi'
-			},
+			Object.fromEntries(input.map(({ key, value }) => [key, value])),
 			{
 				env: toMap(envs)
 			}
 		);
+		if (!checkModal) {
+			dialog.close();
+		}
 	}
 
 	async function cancel() {
@@ -205,7 +225,14 @@ console.log(\`Your message \${process.env.MSG}\`);
 					/>
 				{/if}
 			</div>
-			<button onclick={test} class="mt-3 self-end rounded-3xl bg-blue p-3 px-6"> Test </button>
+			<button
+				onclick={() => {
+					test(true);
+				}}
+				class="mt-3 self-end rounded-3xl bg-blue p-3 px-6 text-white"
+			>
+				Test</button
+			>
 		</div>
 
 		{#if testOutput}
@@ -215,12 +242,15 @@ console.log(\`Your message \${process.env.MSG}\`);
 						<X class="h-5 w-5" />
 					</button>
 				</div>
-				<h4 class="text-xl font-semibold">Test</h4>
+				<h4 class="text-xl font-semibold">Output</h4>
+				<Params bind:params={input} input />
 				<div class="whitespace-pre-wrap font-mono text-sm">
 					{#await testOutput}
 						Running...
 					{:then output}
-						{output.output}
+						<div class="whitespace-pre-wrap rounded-3xl bg-white p-5 font-mono dark:bg-black">
+							{output.output}
+						</div>
 					{:catch error}
 						{error}
 					{/await}
@@ -289,9 +319,40 @@ console.log(\`Your message \${process.env.MSG}\`);
 	{/await}
 </div>
 
+<dialog
+	bind:this={dialog}
+	class="w-11/12 max-w-[1000px] rounded-3xl dark:bg-gray-950 dark:text-gray-50"
+>
+	<div class="relative flex flex-col p-5">
+		<div class="absolute right-0 top-0 flex p-5">
+			<button
+				onclick={() => {
+					dialog.close();
+				}}
+			>
+				<X class="h-5 w-5" />
+			</button>
+		</div>
+		<h4 class="mb-2 text-xl font-semibold">Input</h4>
+		<Params bind:params={input} autofocus input />
+		<button
+			onclick={() => test(false)}
+			class="mt-3 self-end rounded-3xl bg-blue p-3 px-6 text-white"
+		>
+			Run</button
+		>
+	</div>
+</dialog>
+
 <Confirm
 	msg="Are you sure you want to delete this tool?"
 	show={requestDelete}
 	oncancel={() => (requestDelete = false)}
 	onsuccess={() => deleteTool()}
 />
+
+<style lang="postcss">
+	dialog::backdrop {
+		@apply bg-black bg-opacity-60;
+	}
+</style>
diff --git a/ui/user/src/lib/services/chat/operations.ts b/ui/user/src/lib/services/chat/operations.ts
index e563b3cd6..6d95e7539 100644
--- a/ui/user/src/lib/services/chat/operations.ts
+++ b/ui/user/src/lib/services/chat/operations.ts
@@ -296,6 +296,17 @@ export async function getToolEnv(assistant: string, tool: string): Promise<Recor
 	return (await doGet(`/assistants/${assistant}/tools/${tool}/env`)) as Record<string, string>;
 }
 
+export async function getAssistantEnv(assistant: string): Promise<Record<string, string>> {
+	return (await doGet(`/assistants/${assistant}/env`)) as Record<string, string>;
+}
+
+export async function saveAssistantEnv(
+	assistant: string,
+	env: Record<string, string>
+): Promise<Record<string, string>> {
+	return (await doPut(`/assistants/${assistant}/env`, env)) as Record<string, string>;
+}
+
 export async function saveToolEnv(
 	assistant: string,
 	tool: string,
diff --git a/ui/user/tailwind.config.ts b/ui/user/tailwind.config.ts
index 1ba03239f..fb454b39e 100644
--- a/ui/user/tailwind.config.ts
+++ b/ui/user/tailwind.config.ts
@@ -88,7 +88,11 @@ export default {
 				'920': `hsl(0, 0, ${grayBase + 8})`,
 				'930': `hsl(0, 0, ${grayBase + 7})`,
 				'940': `hsl(0, 0, ${grayBase + 6})`,
-				'950': `hsl(0, 0, ${grayBase + 5})`
+				'950': `hsl(0, 0, ${grayBase + 5})`,
+				'960': `hsl(0, 0, ${grayBase + 4})`,
+				'970': `hsl(0, 0, ${grayBase + 3})`,
+				'980': `hsl(0, 0, ${grayBase + 2})`,
+				'990': `hsl(0, 0, ${grayBase + 1})`
 			},
 			blue: {
 				DEFAULT: '#4f7ef3',