feedback

Author: sfierro

…t_id]/[task_id]/create_spec/+page.svelte …t_id]/[task_id]/define_spec/+page.svelteapp/web_ui/src/routes/(app)/specs/[project_id]/[task_id]/create_spec/+page.svelte renamed to app/web_ui/src/routes/(app)/specs/[project_id]/[task_id]/define_spec/+page.svelte app/web_ui/src/routes/(app)/specs/[project_id]/[task_id]/create_spec/+page.svelte renamed to app/web_ui/src/routes/(app)/specs/[project_id]/[task_id]/define_spec/+page.svelte

@@ -41,15 +41,28 @@
   // Get field configs for the current spec_type
   $: field_configs = spec_field_configs[spec_type] || []
 
+  let loading = false
+  let loading_error: KilnError | null = null
+
   onMount(async () => {
+    loading = true
+
     // Check if kiln-copilot is connected
     try {
       const { data, error } = await client.GET("/api/settings")
-      if (!error && data && data["kiln_copilot_api_key"]) {
+      if (error) {
+        throw error
+      }
+      if (!data) {
+        throw new Error("Failed to load Kiln settings")
+      }
+      if (data["kiln_copilot_api_key"]) {
         has_kiln_copilot = true
+      } else {
+        has_kiln_copilot = false
       }
     } catch (e) {
-      console.error("Failed to check kiln-copilot status", e)
+      loading_error = createKilnError(e)
     }
 
     // Check for URL params first (fresh navigation from select_template)
@@ -67,6 +80,7 @@
       initial_property_values = { ...formData.property_values }
       evaluate_full_trace = formData.evaluate_full_trace
       initialized = true
+      loading = false
       return
     }
 
@@ -106,6 +120,7 @@
     }
 
     initialized = true
+    loading = false
   })
 
   let next_error: KilnError | null = null
@@ -118,7 +133,6 @@
   let copilot_v_manual_dialog: Dialog | null = null
   let has_kiln_copilot = false
   let show_connect_kiln_steps = false
-  let connect_steps_component: ConnectKilnCopilotSteps | null = null
 
   $: void (name, property_values, initialized, update_warn_before_unload())
 
@@ -255,63 +269,73 @@
       },
     ]}
   >
-    <FormContainer
-      submit_label={has_kiln_copilot ? "Refine Spec with Copilot" : "Next"}
-      on:submit={check_kiln_copilot_and_proceed}
-      bind:error={next_error}
-      bind:submitting
-      {warn_before_unload}
-    >
-      <FormElement
-        label="Spec Name"
-        description="A short name for your own reference."
-        id="spec_name"
-        bind:value={name}
-      />
-
-      {#each field_configs as field (field.key)}
+    {#if loading}
+      <div class="w-full min-h-[50vh] flex justify-center items-center">
+        <div class="loading loading-spinner loading-lg"></div>
+      </div>
+    {:else if loading_error}
+      <div class="text-error text-sm">
+        {loading_error.getMessage() || "An unknown error occurred"}
+      </div>
+    {:else}
+      <FormContainer
+        submit_label={has_kiln_copilot ? "Refine Spec with Copilot" : "Next"}
+        on:submit={check_kiln_copilot_and_proceed}
+        bind:error={next_error}
+        bind:submitting
+        {warn_before_unload}
+      >
         <FormElement
-          label={field.label}
-          id={field.key}
-          inputType="textarea"
-          disabled={field.disabled || false}
-          description={field.description}
-          height={field.height || "base"}
-          bind:value={property_values[field.key]}
-          optional={!field.required}
-          inline_action={initial_property_values[field.key]
-            ? {
-                handler: () => reset_field(field.key),
-                label: "Reset",
-              }
-            : undefined}
+          label="Spec Name"
+          description="A short name for your own reference."
+          id="spec_name"
+          bind:value={name}
         />
-      {/each}
 
-      {#if show_advanced_options}
-        <Collapse title="Advanced Options">
+        {#each field_configs as field (field.key)}
           <FormElement
-            label="Include conversation history"
-            id="evaluate_full_trace"
-            inputType="checkbox"
-            bind:value={evaluate_full_trace}
-            disabled={full_trace_disabled}
-            description="When enabled, this spec will be judged on the full conversation history including intermediate steps and tool calls. When disabled, only the final answer is evaluated."
-            info_description={full_trace_disabled
-              ? "Tool use specs always evaluate the full conversation history to analyze tool calls."
-              : "Enable this for specs that need to evaluate reasoning steps, tool usage, or intermediate outputs."}
+            label={field.label}
+            id={field.key}
+            inputType="textarea"
+            disabled={field.disabled || false}
+            description={field.description}
+            height={field.height || "base"}
+            bind:value={property_values[field.key]}
+            optional={!field.required}
+            inline_action={initial_property_values[field.key]
+              ? {
+                  handler: () => reset_field(field.key),
+                  label: "Reset",
+                }
+              : undefined}
           />
-        </Collapse>
+        {/each}
+
+        {#if show_advanced_options}
+          <Collapse title="Advanced Options">
+            <FormElement
+              label="Include conversation history"
+              id="evaluate_full_trace"
+              inputType="checkbox"
+              bind:value={evaluate_full_trace}
+              disabled={full_trace_disabled}
+              description="When enabled, this spec will be judged on the full conversation history including intermediate steps and tool calls. When disabled, only the final answer is evaluated."
+              info_description={full_trace_disabled
+                ? "Tool use specs always evaluate the full conversation history to analyze tool calls."
+                : "Enable this for specs that need to evaluate reasoning steps, tool usage, or intermediate outputs."}
+            />
+          </Collapse>
+        {/if}
+      </FormContainer>
+      {#if has_kiln_copilot}
+        <div class="flex flex-row gap-1 mt-2 justify-end">
+          <span class="text-xs text-gray-500">or</span>
+          <button
+            class="link underline text-xs text-gray-500"
+            on:click={create_spec_from_form}>Create Spec Without Copilot</button
+          >
+        </div>
       {/if}
-    </FormContainer>
-    {#if has_kiln_copilot}
-      <div class="flex flex-row gap-1 mt-2 justify-end">
-        <span class="text-xs text-gray-500">or</span>
-        <button
-          class="link underline text-xs text-gray-500"
-          on:click={create_spec_from_form}>Create Spec Without Copilot</button
-        >
-      </div>
     {/if}
   </AppPage>
 </div>
@@ -333,7 +357,6 @@
   {#if show_connect_kiln_steps}
     <div class="flex flex-col">
       <ConnectKilnCopilotSteps
-        bind:this={connect_steps_component}
         showTitle={false}
         onSuccess={handle_connect_success}
         showCheckmark={has_kiln_copilot}

…oject_id]/[task_id]/create_spec/+page.ts …oject_id]/[task_id]/define_spec/+page.tsapp/web_ui/src/routes/(app)/specs/[project_id]/[task_id]/create_spec/+page.ts renamed to app/web_ui/src/routes/(app)/specs/[project_id]/[task_id]/define_spec/+page.ts app/web_ui/src/routes/(app)/specs/[project_id]/[task_id]/create_spec/+page.ts renamed to app/web_ui/src/routes/(app)/specs/[project_id]/[task_id]/define_spec/+page.ts

@@ -26,12 +26,12 @@
       if (template_data.spec_type === "appropriate_tool_use") {
         tool_selection_dialog?.show()
       } else {
-        go_to_create_spec(current_template_data)
+        go_to_define_spec(current_template_data)
       }
     }
   }
 
-  async function go_to_create_spec(template_data: SpecTemplateData) {
+  async function go_to_define_spec(template_data: SpecTemplateData) {
     current_params = new URLSearchParams()
     current_params.set("type", template_data.spec_type)
     if (template_data.spec_type === "appropriate_tool_use" && selected_tool) {
@@ -43,7 +43,7 @@
       current_params.set("tool_function_name", tool_function_name)
     }
     goto(
-      `/specs/${project_id}/${task_id}/create_spec?${current_params.toString()}`,
+      `/specs/${project_id}/${task_id}/define_spec?${current_params.toString()}`,
     )
   }
 
@@ -92,7 +92,7 @@
           if (!current_template_data) {
             return false
           }
-          await go_to_create_spec(current_template_data)
+          await go_to_define_spec(current_template_data)
           return true
         },
       },