saniti-vue 0.1.0

package/README.md

@@ -0,0 +1,19 @@
+# saniti-vue
+
+A Vue 3 component library. Components ship as ESM source and are compiled by the consumer's Vite/Vue toolchain.
+
+## usage
+
+```js
+import "saniti-vue/style.css"
+import { Button } from "saniti-vue"
+```
+
+## development
+
+```sh
+npm install
+npm run dev
+```
+
+`npm run dev` opens the Histoire showcase. Stories live in `stories/*.story.vue`, components in `src/components/`, tokens in `src/style.css`.

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "saniti-vue",
+  "version": "0.1.0",
+  "description": "A Vue 3 component library.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nvms/saniti-vue.git"
+  },
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./style.css": "./src/style.css"
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": [
+    "*.css",
+    "*.vue",
+    "src/icons.js",
+    "stories/icons.js"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "predev": "node scripts/gen-icons.mjs",
+    "dev": "histoire dev",
+    "prebuild": "node scripts/gen-icons.mjs",
+    "build": "histoire build",
+    "preview": "histoire preview",
+    "gen:icons": "node scripts/gen-icons.mjs"
+  },
+  "peerDependencies": {
+    "vue": "^3.4"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.6",
+    "@iconify/vue": "^5.0.1",
+    "@internationalized/date": "^3.12.3",
+    "diff": "^9.0.0",
+    "prismjs": "^1.30.0",
+    "reka-ui": "^2.9.7"
+  },
+  "devDependencies": {
+    "@histoire/plugin-vue": "^0.17.17",
+    "@iconify-json/lucide": "^1.2.116",
+    "@iconify/utils": "^3.1.4",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "histoire": "^0.17.17",
+    "vite": "^5.4.0",
+    "vue": "^3.5.35"
+  }
+}

package/src/components/AgentConfig.vue

@@ -0,0 +1,518 @@
+<script>
+const clone = (v) => JSON.parse(JSON.stringify(v))
+
+export const defaults = () => ({
+  name: "",
+  handle: "",
+  description: "",
+  enabled: true,
+  model: { id: null, temperature: 0.7, effort: "auto", compactAt: 80, compaction: "" },
+  instructions: "",
+  tools: [],
+  toolChoice: "auto",
+  parallelTools: true,
+  maxToolCalls: 10,
+  delegates: [],
+  output: { type: "text", schema: "" },
+  limits: { maxTurns: 20, timeout: 120, budget: 1 },
+})
+</script>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue"
+import Input from "./Input.vue"
+import Textarea from "./Textarea.vue"
+import Combobox from "./Combobox.vue"
+import MultiSelect from "./MultiSelect.vue"
+import NumberInput from "./NumberInput.vue"
+import Slider from "./Slider.vue"
+import Switch from "./Switch.vue"
+import Checkbox from "./Checkbox.vue"
+import RadioGroup from "./RadioGroup.vue"
+import Field from "./Field.vue"
+import Badge from "./Badge.vue"
+import KeyValue from "./KeyValue.vue"
+import Divider from "./Divider.vue"
+
+const props = defineProps({
+  modelValue: { type: Object, required: true },
+  catalog: { type: Object, default: () => ({ models: [], tools: [], agents: [] }) },
+})
+const emit = defineEmits(["update:modelValue"])
+
+
+const agent = reactive({ ...defaults(), ...clone(props.modelValue) })
+let serialized = JSON.stringify(agent)
+
+watch(
+  agent,
+  (v) => {
+    serialized = JSON.stringify(v)
+    emit("update:modelValue", clone(v))
+  },
+  { deep: true },
+)
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (JSON.stringify(v) === serialized) return
+    Object.assign(agent, defaults(), clone(v))
+  },
+  { deep: true },
+)
+
+const modelOptions = computed(() => {
+  const groups = new Map()
+  for (const m of props.catalog.models) {
+    if (!groups.has(m.provider)) groups.set(m.provider, [])
+    groups.get(m.provider).push({ value: m.id, label: m.label ?? m.id, meta: m.id })
+  }
+  return [...groups].map(([label, options]) => ({ label, options }))
+})
+const selectedModel = computed(() => props.catalog.models.find((m) => m.id === agent.model.id) ?? null)
+const modelMeta = computed(() =>
+  selectedModel.value
+    ? [
+        { label: "Context", value: selectedModel.value.context, mono: true },
+        { label: "Input", value: selectedModel.value.input, mono: true },
+        { label: "Output", value: selectedModel.value.output, mono: true },
+      ]
+    : [],
+)
+const effortLabels = { none: "Off", minimal: "Minimal", low: "Low", medium: "Medium", high: "High", xhigh: "Extra high", max: "Max" }
+const effortOptions = computed(() => [
+  { value: "auto", label: "Auto" },
+  ...(selectedModel.value?.efforts ?? ["low", "medium", "high"]).map((e) => ({ value: e, label: effortLabels[e] ?? e })),
+])
+watch(effortOptions, (opts) => {
+  if (!opts.some((o) => o.value === agent.model.effort)) agent.model.effort = "auto"
+})
+const compactTokens = computed(() => {
+  const window = selectedModel.value?.contextTokens
+  if (!window) return ""
+  const n = Math.round((window * agent.model.compactAt) / 100)
+  return n >= 1_000_000 ? `${(n / 1_000_000).toFixed(n % 1_000_000 ? 1 : 0)}M tokens` : `${Math.round(n / 1000)}K tokens`
+})
+
+const chars = computed(() => agent.instructions.length)
+const tokens = computed(() => Math.round(chars.value / 4))
+const variables = computed(() => [...new Set([...agent.instructions.matchAll(/\{\{\s*([\w.]+)\s*\}\}/g)].map((m) => m[1]))])
+const fmt = (n) => n.toLocaleString("en-US")
+const braces = (v) => "{{" + v + "}}"
+
+const toolGroups = computed(() => {
+  const groups = new Map()
+  for (const t of props.catalog.tools) {
+    if (!groups.has(t.source)) groups.set(t.source, [])
+    groups.get(t.source).push(t)
+  }
+  return [...groups].map(([source, tools]) => ({ source, tools }))
+})
+const toolEntry = (id) => agent.tools.find((t) => t.id === id)
+const isEnabled = (id) => Boolean(toolEntry(id))
+const setEnabled = (id, on) => {
+  if (on && !isEnabled(id)) agent.tools.push({ id, approval: false })
+  if (!on) agent.tools = agent.tools.filter((t) => t.id !== id)
+}
+const enabledIn = (group) => group.tools.filter((t) => isEnabled(t.id)).length
+const enabledCount = computed(() => agent.tools.length)
+
+const agentOptions = computed(() =>
+  props.catalog.agents.filter((a) => a.id !== props.modelValue.id).map((a) => ({ value: a.id, label: a.name })),
+)
+
+const sections = computed(() => [
+  { key: "identity", title: "Identity", state: agent.enabled ? "enabled" : "paused" },
+  { key: "model", title: "Model", state: selectedModel.value?.label ?? "none" },
+  { key: "instructions", title: "Instructions", state: tokens.value ? `~${fmt(tokens.value)} tok` : "empty" },
+  { key: "tools", title: "Tools", state: String(enabledCount.value) },
+  { key: "delegation", title: "Delegation", state: String(agent.delegates.length) },
+  { key: "output", title: "Output", state: agent.output.type },
+  { key: "limits", title: "Limits", state: "" },
+])
+
+const root = ref(null)
+const active = ref("identity")
+const sectionEls = new Map()
+const bindSection = (key) => (el) => (el ? sectionEls.set(key, el) : sectionEls.delete(key))
+let pinned = false
+let pinTimer = null
+const unpin = () => {
+  pinned = false
+  clearTimeout(pinTimer)
+}
+const jump = (key) => {
+  active.value = key
+  pinned = true
+  clearTimeout(pinTimer)
+  pinTimer = setTimeout(unpin, 1000)
+  sectionEls.get(key)?.scrollIntoView({ behavior: "smooth", block: "start" })
+}
+
+let observer = null
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (pinned) return
+      const hit = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0]
+      if (hit) active.value = hit.target.dataset.section
+    },
+    { rootMargin: "-20% 0px -70% 0px" },
+  )
+  for (const el of sectionEls.values()) observer.observe(el)
+  document.addEventListener("scrollend", unpin, true)
+})
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  document.removeEventListener("scrollend", unpin, true)
+  clearTimeout(pinTimer)
+})
+
+const toolChoiceOptions = [
+  { value: "auto", label: "Auto" },
+  { value: "required", label: "Required" },
+  { value: "none", label: "None" },
+]
+const outputOptions = [
+  { value: "text", label: "Text" },
+  { value: "json", label: "JSON" },
+]
+</script>
+
+<template>
+  <div ref="root" class="sv-agent">
+    <nav class="sv-agent__rail">
+      <button
+        v-for="(s, i) in sections"
+        :key="s.key"
+        type="button"
+        class="sv-agent__rail-item"
+        :class="{ 'is-active': active === s.key }"
+        @click="jump(s.key)"
+      >
+        <span class="sv-agent__rail-index">{{ String(i + 1).padStart(2, "0") }}</span>
+        <span class="sv-agent__rail-title">{{ s.title }}</span>
+        <span v-if="s.state" class="sv-agent__rail-state">{{ s.state }}</span>
+      </button>
+    </nav>
+
+    <div class="sv-agent__body">
+      <section :ref="bindSection('identity')" data-section="identity" class="sv-agent__section">
+        <Divider :label="`01 Identity`" align="start" spacing="none" class="sv-agent__divider" />
+        <div class="sv-agent__grid">
+          <Switch v-model="agent.enabled" size="sm" class="sv-agent__toggle">Enabled</Switch>
+          <Field label="Name" size="md" v-slot="{ id }">
+            <Input :id="id" v-model="agent.name" size="md" placeholder="Triage" />
+          </Field>
+          <Field label="Handle" size="md" v-slot="{ id }">
+            <Input :id="id" v-model="agent.handle" size="md" icon="lucide:at-sign" placeholder="triage" class="sv-agent__mono" />
+          </Field>
+          <Field label="Description" size="md" class="sv-agent__span" v-slot="{ id }">
+            <Textarea :id="id" v-model="agent.description" size="md" :rows="2" :max-rows="4" placeholder="What this agent is for" />
+          </Field>
+        </div>
+      </section>
+
+      <section :ref="bindSection('model')" data-section="model" class="sv-agent__section">
+        <Divider :label="`02 Model`" align="start" spacing="none" class="sv-agent__divider" />
+        <div class="sv-agent__grid">
+          <Field label="Model" size="md" class="sv-agent__span" v-slot="{ id }">
+            <Combobox :id="id" v-model="agent.model.id" :options="modelOptions" size="md" placeholder="Search models" :clearable="false" />
+          </Field>
+          <KeyValue v-if="modelMeta.length" :items="modelMeta" layout="stack" :columns="3" compact :dividers="false" class="sv-agent__span" />
+          <Field label="Temperature" size="md" v-slot="{ id }">
+            <Slider :id="id" v-model="agent.model.temperature" :min="0" :max="1" :step="0.05" show-value :format="(v) => v.toFixed(2)" :marks="[0, 0.5, 1]" />
+          </Field>
+          <Field label="Reasoning" hint="How much the model thinks before answering; auto lets it decide per request" size="md" class="sv-agent__span">
+            <RadioGroup v-model="agent.model.effort" :options="effortOptions" orientation="horizontal" size="sm" />
+          </Field>
+          <Field label="Compact at" hint="Share of the context window at which the thread is summarised before the next turn" size="md" class="sv-agent__span">
+            <template v-if="compactTokens" #aside>{{ compactTokens }}</template>
+            <template #default="{ id }">
+              <Slider :id="id" v-model="agent.model.compactAt" :min="50" :max="95" :step="5" show-value :format="(v) => `${v}%`" :marks="[50, 75, 95]" />
+            </template>
+          </Field>
+          <Field label="Compaction instructions" size="md" class="sv-agent__span" v-slot="{ id }">
+            <Textarea :id="id" v-model="agent.model.compaction" size="md" :rows="4" :max-rows="12" placeholder="Keep every ticket id and any commitment made to the customer" class="sv-agent__prompt" />
+          </Field>
+        </div>
+      </section>
+
+      <section :ref="bindSection('instructions')" data-section="instructions" class="sv-agent__section">
+        <Divider :label="`03 Instructions`" align="start" spacing="none" class="sv-agent__divider" />
+        <Textarea v-model="agent.instructions" size="md" :rows="10" :max-rows="28" placeholder="You are..." class="sv-agent__prompt" />
+        <div class="sv-agent__prompt-foot">
+          <div class="sv-agent__vars">
+            <Badge v-for="v in variables" :key="v" mono class="sv-agent__var">{{ braces(v) }}</Badge>
+          </div>
+          <span class="sv-agent__count">{{ fmt(chars) }} chars, ~{{ fmt(tokens) }} tokens</span>
+        </div>
+      </section>
+
+      <section :ref="bindSection('tools')" data-section="tools" class="sv-agent__section">
+        <Divider :label="`04 Tools`" align="start" spacing="none" class="sv-agent__divider" />
+        <div v-for="group in toolGroups" :key="group.source" class="sv-agent__tool-group">
+          <div class="sv-agent__tool-source">
+            <span>{{ group.source }}</span>
+            <span class="sv-agent__count">{{ enabledIn(group) }} of {{ group.tools.length }}</span>
+            <span v-if="enabledIn(group)" class="sv-agent__tool-source-end">Approval</span>
+          </div>
+          <div
+            v-for="tool in group.tools"
+            :key="tool.id"
+            class="sv-agent__tool"
+            :class="{ 'is-on': isEnabled(tool.id) }"
+          >
+            <Checkbox :model-value="isEnabled(tool.id)" size="sm" @update:model-value="setEnabled(tool.id, $event)" class="sv-agent__tool-check">
+              <span class="sv-agent__tool-name">{{ tool.name }}</span>
+              <span class="sv-agent__tool-id">{{ tool.id }}</span>
+            </Checkbox>
+            <span class="sv-agent__tool-desc">{{ tool.description }}</span>
+            <Switch v-if="isEnabled(tool.id)" v-model="toolEntry(tool.id).approval" size="sm" :aria-label="`Approval for ${tool.name}`" class="sv-agent__tool-approval" />
+          </div>
+        </div>
+        <div class="sv-agent__grid sv-agent__grid--tight">
+          <Field label="Tool choice" size="md">
+            <RadioGroup v-model="agent.toolChoice" :options="toolChoiceOptions" orientation="horizontal" size="sm" />
+          </Field>
+          <Field label="Max tool calls per turn" size="md" v-slot="{ id }">
+            <NumberInput :id="id" v-model="agent.maxToolCalls" size="md" :min="1" :max="100" />
+          </Field>
+          <Switch v-model="agent.parallelTools" size="sm" class="sv-agent__toggle">Parallel tool calls</Switch>
+        </div>
+      </section>
+
+      <section :ref="bindSection('delegation')" data-section="delegation" class="sv-agent__section">
+        <Divider :label="`05 Delegation`" align="start" spacing="none" class="sv-agent__divider" />
+        <Field label="Hands off to" size="md" v-slot="{ id }">
+          <MultiSelect :id="id" v-model="agent.delegates" :options="agentOptions" size="md" placeholder="Agents" />
+        </Field>
+      </section>
+
+      <section :ref="bindSection('output')" data-section="output" class="sv-agent__section">
+        <Divider :label="`06 Output`" align="start" spacing="none" class="sv-agent__divider" />
+        <div class="sv-agent__grid">
+          <Field label="Format" size="md">
+            <RadioGroup v-model="agent.output.type" :options="outputOptions" orientation="horizontal" size="sm" />
+          </Field>
+          <Field v-if="agent.output.type === 'json'" label="Schema" size="md" class="sv-agent__span" v-slot="{ id }">
+            <Textarea :id="id" v-model="agent.output.schema" size="md" :rows="6" :max-rows="20" placeholder='{ "type": "object" }' class="sv-agent__code" />
+          </Field>
+        </div>
+      </section>
+
+      <section :ref="bindSection('limits')" data-section="limits" class="sv-agent__section">
+        <Divider :label="`07 Limits`" align="start" spacing="none" class="sv-agent__divider" />
+        <div class="sv-agent__grid sv-agent__grid--3">
+          <Field label="Max turns" hint="Model calls in one run before the agent stops and reports" size="md" v-slot="{ id }">
+            <NumberInput :id="id" v-model="agent.limits.maxTurns" size="md" :min="1" :max="500" suffix="turns" />
+          </Field>
+          <Field label="Timeout" hint="Wall-clock limit for one run, tool calls included" size="md" v-slot="{ id }">
+            <NumberInput :id="id" v-model="agent.limits.timeout" size="md" :min="5" :max="3600" :step="5" suffix="s" />
+          </Field>
+          <Field label="Budget per run" hint="Token spend at the model's prices at which the run is cut off" size="md" v-slot="{ id }">
+            <NumberInput :id="id" v-model="agent.limits.budget" size="md" :min="0.05" :max="1000" :step="0.25" :precision="2" prefix="$" />
+          </Field>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sv-agent {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: var(--sv-space-xxl);
+  align-items: start;
+  color: var(--sv-text);
+}
+
+.sv-agent__rail {
+  position: sticky;
+  top: var(--sv-space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-xs);
+}
+.sv-agent__rail-item {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: baseline;
+  column-gap: var(--sv-space-xs);
+  row-gap: 2px;
+  padding: var(--sv-space-xs) var(--sv-space-sm);
+  border: 0;
+  border-radius: var(--sv-radius-app-sm);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  color: var(--sv-text-body);
+  background: none;
+  cursor: pointer;
+  transition: background-color var(--sv-dur) var(--sv-ease), color var(--sv-dur) var(--sv-ease);
+}
+.sv-agent__rail-item:hover {
+  color: var(--sv-text);
+  background: var(--sv-item-hover);
+}
+.sv-agent__rail-item.is-active {
+  color: var(--sv-text);
+  background: var(--sv-item-active);
+}
+.sv-agent__rail-index,
+.sv-agent__count,
+.sv-agent__rail-state,
+.sv-agent__tool-source,
+.sv-agent__tool-id {
+  font-family: var(--sv-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  color: var(--sv-text-mute);
+}
+.sv-agent__rail-index {
+  grid-row: 1;
+}
+.sv-agent__rail-title {
+  grid-column: 2;
+  white-space: nowrap;
+}
+.sv-agent__rail-state {
+  grid-column: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-agent__rail-item.is-active .sv-agent__rail-index {
+  color: var(--sv-brand);
+}
+
+.sv-agent__body {
+  max-width: 720px;
+  min-width: 0;
+}
+.sv-agent__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-lg);
+  scroll-margin-top: var(--sv-space-lg);
+}
+.sv-agent__section + .sv-agent__section {
+  margin-top: var(--sv-space-xxl);
+}
+.sv-agent__prompt-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-md);
+  min-height: 20px;
+}
+.sv-agent__var {
+  text-transform: none;
+}
+
+.sv-agent__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sv-space-md) var(--sv-space-lg);
+  align-items: start;
+}
+.sv-agent__grid--3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.sv-agent__grid--tight {
+  padding-top: var(--sv-space-xs);
+}
+.sv-agent__span {
+  grid-column: 1 / -1;
+}
+.sv-agent__toggle {
+  grid-column: 1 / -1;
+}
+.sv-agent__mono :deep(input) {
+  font-family: var(--sv-font-mono);
+  font-size: 12.5px;
+}
+
+.sv-agent__prompt :deep(textarea) {
+  padding: var(--sv-space-sm) var(--sv-space-md);
+  line-height: 1.6;
+}
+.sv-agent__code :deep(textarea) {
+  font-family: var(--sv-font-mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+.sv-agent__vars {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sv-space-xs);
+}
+
+.sv-agent__tool-group {
+  display: flex;
+  flex-direction: column;
+}
+.sv-agent__tool-source {
+  display: flex;
+  gap: var(--sv-space-sm);
+  padding: 0 0 var(--sv-space-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.sv-agent__tool-source-end {
+  margin-left: auto;
+}
+.sv-agent__tool {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 2px var(--sv-space-md);
+  padding: var(--sv-space-sm) 0;
+  border-top: 1px solid var(--sv-line);
+}
+.sv-agent__tool:last-child {
+  border-bottom: 1px solid var(--sv-line);
+}
+.sv-agent__tool-check {
+  min-width: 0;
+}
+.sv-agent__tool-name {
+  font-weight: 500;
+}
+.sv-agent__tool-id {
+  margin-left: var(--sv-space-xs);
+}
+.sv-agent__tool-desc {
+  grid-column: 1;
+  padding-left: calc(16px + var(--sv-space-sm));
+  font-size: 12.5px;
+  color: var(--sv-text-mute);
+}
+.sv-agent__tool.is-on .sv-agent__tool-desc {
+  color: var(--sv-text-body);
+}
+.sv-agent__tool-approval {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+}
+
+@media (max-width: 720px) {
+  .sv-agent {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .sv-agent__rail {
+    position: static;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .sv-agent__rail-state {
+    display: none;
+  }
+  .sv-agent__grid,
+  .sv-agent__grid--3 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>