few shots update

.ai/shots/frontend_component.svelte

@@ -1,19 +1,23 @@
-<!-- [DEF:Shot:Svelte_Component:Example] -->
-# @PURPOSE: Reference implementation of a task-spawning component using Constitution rules.
-# @RELATION: IMPLEMENTS -> [DEF:Std:UI_Svelte]
-
+<!-- [DEF:FrontendComponentShot:Component] -->
 <script>
   /**
-   * @TIER: STANDARD
-   * @PURPOSE: Action button to spawn a new task.
-   * @LAYER: UI
-   * @SEMANTICS: Task, Creation, Button
+   * @TIER: CRITICAL
+   * @SEMANTICS: Task, Button, Action, UX
+   * @PURPOSE: Action button to spawn a new task with full UX feedback cycle.
+   * @LAYER: UI (Presentation)
    * @RELATION: CALLS -> postApi
+   * @INVARIANT: Must prevent double-submission while loading.
    * 
-   * @UX_STATE: Idle -> Button enabled with primary color.
-   * @UX_STATE: Loading -> Button disabled with spinner while postApi resolves.
-   * @UX_FEEDBACK: toast.success on completion; toast.error on failure.
-   * @UX_TEST: Idle -> {click: spawnTask, expected: loading state then success}
+   * @TEST_DATA: idle_state -> {"isLoading": false}
+   * @TEST_DATA: loading_state -> {"isLoading": true}
+   * 
+   * @UX_STATE: Idle -> Button enabled, primary color.
+   * @UX_STATE: Loading -> Button disabled, spinner visible.
+   * @UX_STATE: Error -> Toast notification triggers.
+   * 
+   * @UX_FEEDBACK: Toast success/error.
+   * @UX_TEST: Idle -> {click: spawnTask, expected: isLoading=true}
+   * @UX_TEST: Success -> {api_resolve: 200, expected: toast.success called}
    */
   import { postApi } from "$lib/api.js";
   import { t } from "$lib/i18n";
@@ -24,40 +28,43 @@
 
   let isLoading = false;
 
-  async def spawnTask() {
+  // [DEF:spawnTask:Function]
+  async function spawnTask() {
     isLoading = true;
+    console.log("[FrontendComponentShot][Loading] Spawning task...");
+    
     try {
-      // 1. Action: Constitution Rule - MUST use postApi wrapper
+      // 1. Action: API Call
       const response = await postApi("/api/tasks", {
         plugin_id,
         params
       });
 
-      // 2. Feedback: UX state management
+      // 2. Feedback: Success
       if (response.task_id) {
+        console.log("[FrontendComponentShot][Success] Task created.");
         toast.success($t.tasks.spawned_success);
       }
     } catch (error) {
-      // 3. Recovery: Evaluation & UI reporting
+      // 3. Recovery: User notification
+      console.log("[FrontendComponentShot][Error] Failed:", error);
       toast.error(`${$t.errors.task_failed}: ${error.message}`);
     } finally {
       isLoading = false;
     }
   }
+  // [/DEF:spawnTask:Function]
 </script>
 
-<button 
+<button
   on:click={spawnTask}
   disabled={isLoading}
-  class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
+  class="btn-primary flex items-center gap-2"
+  aria-busy={isLoading}
 >
   {#if isLoading}
-    <span class="animate-spin text-sm">🌀</span>
+    <span class="animate-spin" aria-label="Loading">🌀</span>
   {/if}
   <span>{$t.actions.start_task}</span>
 </button>
-
-<style>
-  /* Local styles minimized as per Constitution Rule III */
-</style>
-<!-- [/DEF:Shot:Svelte_Component] -->
+<!-- [/DEF:FrontendComponentShot:Component] -->