@7n/tauri-components 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7n/tauri-components",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Shared LLM agent engine + Vue/Quasar UI for Tauri apps (chat, journal, trust-tier approval).",
   "license": "MIT",

package/src/components/AuditDialog.vue

@@ -16,10 +16,7 @@
 
     <div v-for="rec in records" :key="rec.id" class="audit-row">
       <div @click="toggle(rec.id)" class="audit-head">
-        <span class="state-pill" :style="{ '--c': statusColor(rec.status) }">
-          <span class="state-pill__dot" />
-          {{ rec.status }}
-        </span>
+        <StatePill :status="rec.status" />
         <span class="audit-actor">{{ rec.actor?.kind }}{{ rec.actor?.id ? `:${rec.actor.id}` : '' }}</span>
         <span class="audit-intent">{{ rec.intent }}</span>
         <q-space />
@@ -54,17 +51,7 @@ import { ref } from 'vue'
 import { useQuasar } from 'quasar'
 import BaseDialog from './BaseDialog.vue'
 import RequestView from './RequestView.vue'
-
-const STATUS_COLOR = {
-  pending: '#8e8e93',
-  running: '#0a84ff',
-  done: '#30d158',
-  partial: '#ff9f0a',
-  needs_clarification: '#64d2ff',
-  needs_approval: '#ff9f0a',
-  failed: '#ff453a',
-  rejected: '#8e8e93',
-}
+import StatePill from './StatePill.vue'
 
 // The agent gateway (journal + respond + approve) is injected by the host app,
 // keeping this dialog domain-free.
@@ -82,14 +69,6 @@ const loading = ref(false)
 const expandedId = ref(null)
 const busyId = ref(null)
 
-/**
- * @param {string} status request status
- * @returns {string} accent color
- */
-function statusColor(status) {
-  return STATUS_COLOR[status] ?? '#8e8e93'
-}
-
 /**
  * @param {number} millis epoch millis
  * @returns {string} locale time
@@ -234,26 +213,4 @@ async function onApprove(rec, ok) {
 .audit-body {
   padding: 6px 4px 12px;
 }
-
-.state-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: 20px;
-  padding: 0 8px;
-  border-radius: 6px;
-  font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--c);
-  background: color-mix(in srgb, var(--c) 14%, transparent);
-  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
-  flex: 0 0 auto;
-}
-
-.state-pill__dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--c);
-}
 </style>

package/src/components/RequestView.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="req-view">
-    <span class="state-pill" :style="{ '--c': statusColor }">
-      <span class="state-pill__dot" />
-      {{ result.status }}
-    </span>
+    <StatePill :status="result.status" />
 
     <div v-if="result.summary" class="req-summary">{{ result.summary }}</div>
     <div v-if="result.question" class="req-summary">{{ result.question }}</div>
@@ -23,24 +20,11 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import StatePill from './StatePill.vue'
 
-const STATUS_COLOR = {
-  pending: '#8e8e93',
-  running: '#0a84ff',
-  done: '#30d158',
-  partial: '#ff9f0a',
-  needs_clarification: '#64d2ff',
-  needs_approval: '#ff9f0a',
-  failed: '#ff453a',
-  rejected: '#8e8e93',
-}
-
-const props = defineProps({
+defineProps({
   result: { type: Object, required: true },
 })
-
-const statusColor = computed(() => STATUS_COLOR[props.result.status] ?? '#8e8e93')
 </script>
 
 <style scoped>
@@ -76,26 +60,4 @@ const statusColor = computed(() => STATUS_COLOR[props.result.status] ?? '#8e8e93
   opacity: 0.8;
   overflow-wrap: anywhere;
 }
-
-.state-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  align-self: flex-start;
-  height: 20px;
-  padding: 0 8px;
-  border-radius: 6px;
-  font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--c);
-  background: color-mix(in srgb, var(--c) 14%, transparent);
-  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
-}
-
-.state-pill__dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--c);
-}
 </style>

package/src/components/StatePill.vue

@@ -0,0 +1,41 @@
+<template>
+  <span class="state-pill" :style="{ '--c': statusColor(status) }">
+    <span class="state-pill__dot" />
+    {{ status }}
+  </span>
+</template>
+
+<script setup>
+// The colored status chip used by RequestView and AuditDialog. Owns the pill
+// markup + styles in one place (the color map lives in status.js).
+import { statusColor } from './status.js'
+
+defineProps({
+  status: { type: String, required: true },
+})
+</script>
+
+<style scoped>
+.state-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  align-self: flex-start;
+  flex: 0 0 auto;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 6px;
+  font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: var(--c);
+  background: color-mix(in srgb, var(--c) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
+}
+
+.state-pill__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--c);
+}
+</style>

package/src/components/index.js

@@ -8,3 +8,5 @@ export { default as AuditDialog } from './AuditDialog.vue'
 export { default as BaseDialog } from './BaseDialog.vue'
 export { default as DialogActions } from './DialogActions.vue'
 export { default as RequestView } from './RequestView.vue'
+export { default as StatePill } from './StatePill.vue'
+export { STATUS_COLOR, statusColor } from './status.js'

package/src/components/status.js

@@ -0,0 +1,23 @@
+// Single source of truth for request-status accent colors, shared by the
+// components that render a status pill (StatePill, and any custom UI).
+
+export const STATUS_COLOR = {
+  pending: '#8e8e93',
+  running: '#0a84ff',
+  done: '#30d158',
+  partial: '#ff9f0a',
+  needs_clarification: '#64d2ff',
+  needs_approval: '#ff9f0a',
+  failed: '#ff453a',
+  rejected: '#8e8e93',
+}
+
+const FALLBACK = '#8e8e93'
+
+/**
+ * @param {string} status request status
+ * @returns {string} accent color (fallback grey for unknown statuses)
+ */
+export function statusColor(status) {
+  return STATUS_COLOR[status] ?? FALLBACK
+}

package/src/core/dispatch.js

@@ -44,7 +44,11 @@ export function createDispatch(catalog, transport) {
       return { ok: true, output }
     }
     catch (error) {
-      return { ok: false, error: { code: 'io', message: String(error?.message ?? error) } }
+      const envelope = { code: 'io', message: String(error?.message ?? error) }
+      // Preserve a backend-provided error kind (e.g. a typed Tauri command error)
+      // so callers can branch on it — e.g. re-auth on a 'ReauthRequired' kind.
+      if (error?.kind !== undefined) envelope.kind = error.kind
+      return { ok: false, error: envelope }
     }
   }
 }

package/src/vue/use-agent.js

@@ -23,12 +23,13 @@ const DEFAULT_ACTOR = { kind: 'human', id: 'local' }
  * @param {Record<string, number>} [config.actorTiers] tier overrides
  * @param {{ kind: string, id: string }} [config.actor] caller identity (default human:local)
  * @param {{ storagePrefix?: string, defaultBaseUrl?: string, defaultModel?: string }} [config.omlx] omlx config options
+ * @param {(tool: object, input: object) => unknown} [config.transport] tool transport (default Tauri invoke); override to route some tools elsewhere (e.g. JS/OPFS-backed handlers)
  * @returns {object} in-app agent gateway
  */
-export function useAgent({ catalog, systemPrompt, grounding, actorTiers, actor = DEFAULT_ACTOR, omlx } = {}) {
+export function useAgent({ catalog, systemPrompt, grounding, actorTiers, actor = DEFAULT_ACTOR, omlx, transport = tauriTransport } = {}) {
   const { baseUrl, model, apiKey, save, loadEnv } = useOmlx(omlx)
   const journal = createTauriJournalStore()
-  const kit = createAgentKit({ catalog, systemPrompt, transport: tauriTransport, journal, actorTiers, grounding })
+  const kit = createAgentKit({ catalog, systemPrompt, transport, journal, actorTiers, grounding })
 
   /**
    * Build an omlx chat fn from the current config (tauri-http transport).