@7n/tauri-components 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7n/tauri-components",
-  "version": "0.1.1",
+  "version": "0.3.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/vue/journal-store-tauri.js

@@ -1,17 +1,18 @@
 import { invoke } from '@tauri-apps/api/core'
 
-// Webview journal store: routes journal FS through Rust Tauri commands
-// (journal_*), provided by the shared `tauri-plugin-agent` (see SPEC §6). Same
-// shape any other store implements, so agent-handler stays backend-agnostic.
+// Webview journal store: routes journal FS through the shared `tauri-plugin-agent`
+// commands (`plugin:agent|journal_*`, see SPEC §6). Same shape any other store
+// implements, so agent-handler stays backend-agnostic. The host app must
+// register the plugin and grant `agent:default`.
 
 /**
  * @returns {{ create: (r:object)=>Promise<string>, load: (id:string)=>Promise<object>, update: (id:string,patch:object)=>Promise<void>, list: ()=>Promise<object[]> }} journal store
  */
 export function createTauriJournalStore() {
   return {
-    create: ({ intent, actor }) => invoke('journal_create', { intent, actor }),
-    load: id => invoke('journal_load', { id }),
-    update: (id, patch) => invoke('journal_update', { id, patch }),
-    list: () => invoke('journal_list'),
+    create: ({ intent, actor }) => invoke('plugin:agent|journal_create', { intent, actor }),
+    load: id => invoke('plugin:agent|journal_load', { id }),
+    update: (id, patch) => invoke('plugin:agent|journal_update', { id, patch }),
+    list: () => invoke('plugin:agent|journal_list'),
   }
 }

package/src/vue/use-omlx.js

@@ -36,7 +36,7 @@ export function useOmlx({ storagePrefix = 'agent', defaultBaseUrl = DEFAULT_BASE
   async function loadEnv() {
     let env
     try {
-      env = await invoke('omlx_config')
+      env = await invoke('plugin:agent|omlx_config')
     }
     catch {
       return // not running under Tauri — keep localStorage / defaults