log refactor

.opencode/skills/semantics-svelte/SKILL.md

@@ -6,6 +6,9 @@ description: Svelte 5 (Runes) protocol for ss-tools: UX State Machines, Tailwind
 #region Std.Semantics.Svelte [C:5] [TYPE Skill] [SEMANTICS frontend,svelte,ui,ux,tailwind]
 @BRIEF HOW to build Svelte 5 (Runes) Components for ss-tools with UX State Machines, Tailwind CSS, store topology, and visual-interactive validation.
 @RELATION DEPENDS_ON -> [Std.Semantics.Core]
+@RELATION DEPENDS_ON -> MolecularCoTLogging
+@RATIONALE Svelte 5 runes ($state, $derived, $effect, $props) chosen for reactive precision and native compiler optimisations over Svelte 4 legacy reactivity ($:). Tailwind CSS selected for zero-runtime utility-first styling and rapid visual validation via chrome-devtools MCP. FSM-based UX contracts (@UX_STATE, @UX_FEEDBACK, @UX_RECOVERY) chosen to create verifiable state-transition tests that the browser Judge Agent can execute deterministically. ss-tools internal API wrappers (fetchApi/requestApi) chosen over native fetch to enforce auth, error normalisation, and trace_id propagation.
+@REJECTED React (JSX) rejected — Svelte's compiler-first approach yields smaller bundles and native reactivity without virtual DOM overhead. Vue rejected — Svelte 5 runes provide simpler mental model. Legacy Svelte 4 syntax (export let, $:, on:event) rejected — incompatible with Svelte 5 runes mode. CSS Modules / styled-components rejected in favour of Tailwind's utility-first approach, which avoids style leakage and simplifies chrome-devtools visual diffing. Native fetch() rejected — bypasses ss-tools middleware chain (auth, trace_id, error normalisation). Plain-text logging rejected per MolecularCoTLogging §VII — JSON lines are mandatory for agent-parsable traces.
 @INVARIANT Frontend components MUST be verifiable by the browser toolset via `chrome-devtools` MCP.
 @INVARIANT Use Tailwind CSS exclusively. Native `fetch` is forbidden — use `requestApi`/`fetchApi` wrappers.
 
@@ -61,13 +64,23 @@ Key stores in ss-tools:
    - Sets `isLoading = $state(false)` in `finally`
 4. **A11Y:** Proper ARIA roles (`aria-busy`, `aria-invalid`, `aria-describedby`). Semantic HTML (`<nav>`, `<main>`, `<section>`). Keyboard navigation for modals and drawers.
 
-## V. LOGGING (MOLECULAR TOPOLOGY FOR UI)
+## V. LOGGING (MOLECULAR-COT FOR UI)
 
-Frontend logging bridges your logic and the browser validation system.
-- **[EXPLORE]:** Log branching user paths or caught UI errors.
-- **[REASON]:** Log the intent *before* an API invocation or state mutation.
-- **[REFLECT]:** Log visual state updates (e.g., "Toast displayed", "Drawer opened").
-- **Syntax:** `console.info("[ComponentID][MARKER] Message", {extra_data})` — Prefix MUST be manually applied.
+Frontend logging uses `log()` from `$lib/cot-logger`, emitting **JSON lines** per MolecularCoTLogging protocol.
+Import: `import { log } from "$lib/cot-logger";`
+
+### Marker Reference
+
+| Marker | When | Signature |
+|--------|------|-----------|
+| `REASON` | BEFORE API call or state mutation | `log("ComponentID", "REASON", "intent", payload)` |
+| `REFLECT` | AFTER successful operation (verification) | `log("ComponentID", "REFLECT", "outcome", payload)` |
+| `EXPLORE` | ON error, fallback, or violated assumption | `log("ComponentID", "EXPLORE", "message", payload, error="...")` |
+
+### Invariants
+- Every log line is a **single JSON object** — no plain-text prefixes.
+- `trace_id` propagates from HTTP response headers via the ss-tools API wrappers.
+- One marker per line. No markerless log lines in C4/C5 components.
 
 ## VI. CANONICAL SVELTE 5 COMPONENT TEMPLATE (SS-TOOLS)
 
@@ -92,6 +105,7 @@ Region format for HTML/Svelte comments:
 <!-- @UX_TEST: Idle -> {click: "Run Migration", expected: Loading -> Success toast}. -->
 <script>
   import { fetchApi } from "$lib/api";
+  import { log } from "$lib/cot-logger";
   import { t } from "$lib/i18n";
   import { taskDrawerStore } from "$lib/stores";
   import { notificationStore } from "$lib/stores";
@@ -108,18 +122,18 @@ Region format for HTML/Svelte comments:
     isLoading = true;
     status = "loading";
     error = null;
-    console.info("[MigrationTaskCard][REASON] Starting migration", {
+    log("MigrationTaskCard", "REASON", "Starting migration", {
       taskId, dashboardName, sourceEnv, targetEnv
     });
     try {
       const result = await fetchApi(`/api/tasks/${taskId}/run`, { method: "POST" });
       status = "success";
-      console.info("[MigrationTaskCard][REFLECT] Migration completed", { taskId, result });
+      log("MigrationTaskCard", "REFLECT", "Migration completed", { taskId, result });
       notificationStore.add({ type: "success", message: $t("migration.completed", { name: dashboardName }) });
     } catch (e) {
       status = "error";
       error = e.message;
-      console.error("[MigrationTaskCard][EXPLORE] Migration failed", { taskId, error: e.message });
+      log("MigrationTaskCard", "EXPLORE", "Migration failed", { taskId }, error = e.message);
       notificationStore.add({ type: "error", message: $t("migration.failed", { name: dashboardName }) });
     } finally {
       isLoading = false;
@@ -127,7 +141,7 @@ Region format for HTML/Svelte comments:
   }
 
   function handleViewLogs() {
-    console.info("[MigrationTaskCard][REASON] Opening task drawer", { taskId });
+    log("MigrationTaskCard", "REASON", "Opening task drawer", { taskId });
     taskDrawerStore.open(taskId);
   }
 </script>