nuxt-observe 0.0.2

package/dist/runtime/app/components/settings/ObserveSettingsServicesTable.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useObserveAbility } from "../../composables/useObserveAbility";
+const props = defineProps({
+  services: { type: Array, required: true },
+  pending: { type: Boolean, required: false }
+});
+const emit = defineEmits(["delete", "restore"]);
+const { can, canForService } = useObserveAbility();
+const { prefix } = useRuntimeConfig().public.observe;
+const now = ref(Date.now());
+const timer = setInterval(() => now.value = Date.now(), 3e4);
+onBeforeUnmount(() => clearInterval(timer));
+function countdown(purgeAt) {
+  const ms = purgeAt - now.value;
+  if (ms <= 0) return "purging\u2026";
+  const mins = Math.ceil(ms / 6e4);
+  if (mins < 60) return `deletes in ${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  return `deletes in ${hrs}h ${mins % 60}m`;
+}
+const columns = computed(() => [
+  { id: "name", accessorKey: "name", header: "Service" },
+  { id: "type", header: "Type" },
+  { id: "kind", header: "Kind" },
+  { id: "env", accessorKey: "env", header: "Env" },
+  { id: "keys", accessorKey: "keyCount", header: "Keys", meta: { class: { th: "text-right", td: "text-right tabular-nums" } } },
+  { id: "status", header: "Status" },
+  { id: "actions", header: "" }
+]);
+</script>
+
+<template>
+  <UCard :ui="{ body: 'p-0 sm:p-0' }">
+    <UTable
+      :data="props.services"
+      :columns="columns"
+      :loading="props.pending"
+      empty="No services yet."
+    >
+      <template #name-cell="{ row }">
+        <div class="flex items-center gap-2 min-w-0">
+          <NuxtLink
+            :to="`${prefix}/settings/services/${row.original.id}`"
+            class="font-medium truncate hover:underline"
+            :class="row.original.deletedAt ? 'text-muted line-through' : ''"
+          >
+            {{ row.original.name }}
+          </NuxtLink>
+          <UBadge
+            v-if="row.original.managedByConfig"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            label="config"
+            title="Declared in observe.services; config-owned fields reconcile on reboot"
+          />
+        </div>
+        <div class="text-xs text-muted">
+          {{ row.original.slug }}
+        </div>
+      </template>
+
+      <template #type-cell="{ row }">
+        <ObserveServiceTypeBadge :type="row.original.type" />
+      </template>
+
+      <template #kind-cell="{ row }">
+        <UBadge
+          :color="row.original.kind === 'browser' ? 'info' : 'neutral'"
+          variant="subtle"
+          size="sm"
+          :label="row.original.kind"
+        />
+      </template>
+
+      <template #env-cell="{ row }">
+        <span class="text-muted">{{ row.original.env ?? "\u2014" }}</span>
+      </template>
+
+      <template #status-cell="{ row }">
+        <UBadge
+          v-if="row.original.deletedAt && row.original.purgeAt"
+          color="error"
+          variant="subtle"
+          size="sm"
+          icon="i-lucide-clock"
+          :label="countdown(row.original.purgeAt)"
+        />
+        <span
+          v-else
+          class="text-xs text-muted"
+        >active</span>
+      </template>
+
+      <template #actions-cell="{ row }">
+        <div class="flex justify-end gap-1">
+          <UButton
+            v-if="row.original.deletedAt && can('services.create')"
+            icon="i-lucide-undo-2"
+            color="primary"
+            variant="soft"
+            size="xs"
+            label="Restore"
+            @click="emit('restore', row.original)"
+          />
+          <template v-else-if="!row.original.deletedAt">
+            <UButton
+              v-if="canForService('services.manage', row.original.slug)"
+              :to="`${prefix}/settings/services/${row.original.id}`"
+              icon="i-lucide-pencil"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              label="Edit"
+            />
+            <UButton
+              v-if="can('services.create') && !row.original.managedByConfig"
+              icon="i-lucide-trash-2"
+              color="error"
+              variant="ghost"
+              size="xs"
+              label="Delete"
+              @click="emit('delete', row.original)"
+            />
+          </template>
+        </div>
+      </template>
+    </UTable>
+  </UCard>
+</template>

package/dist/runtime/app/components/settings/ObserveSettingsServicesTable.vue.d.ts

@@ -0,0 +1,19 @@
+import type { ServiceListItem } from '../../../shared/schema/provisioning.js';
+/**
+ * The provisioning services table. Rows lead with a name link + type badge, carry a kind
+ * badge, and — for a soft-deleted service — a live countdown to permanent purge plus a
+ * restore control. Gating is presentational (useObserveAbility); the server enforces.
+ */
+type __VLS_Props = {
+    services: ServiceListItem[];
+    pending?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (service: ServiceListItem) => any;
+    restore: (service: ServiceListItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((service: ServiceListItem) => any) | undefined;
+    onRestore?: ((service: ServiceListItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/settings/ObserveUserFormModal.d.vue.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    loading?: boolean;
+};
+type __VLS_ModelProps = {
+    /** Create a DB-backed dashboard user. Validation rides createUserSchema so the form and the POST route agree. */
+    'open': boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (input: {
+        username: string;
+        role: "admin" | "manager" | "viewer";
+        displayName?: string | undefined;
+        password?: string | undefined;
+    }) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((input: {
+        username: string;
+        role: "admin" | "manager" | "viewer";
+        displayName?: string | undefined;
+        password?: string | undefined;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/settings/ObserveUserFormModal.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { reactive, computed, watch } from "vue";
+import { createUserSchema } from "../../../shared/auth/schema";
+import { ROLES } from "../../../shared/auth/roles";
+const open = defineModel("open", { type: Boolean, ...{ required: true } });
+const props = defineProps({
+  loading: { type: Boolean, required: false }
+});
+const emit = defineEmits(["submit"]);
+function blank() {
+  return { username: "", displayName: "", role: "viewer", password: "" };
+}
+const state = reactive(blank());
+watch(open, (v) => {
+  if (v) Object.assign(state, blank());
+});
+const roleItems = ROLES.map((r) => ({ value: r, label: r }));
+const cleaned = computed(() => ({
+  username: state.username.trim(),
+  displayName: state.displayName.trim() || void 0,
+  role: state.role,
+  password: state.password || void 0
+}));
+function onSubmit(_e) {
+  emit("submit", cleaned.value);
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    title="New user"
+    description="Create a dashboard user. A password enables local login; omit it for JWT-only access."
+  >
+    <template #body>
+      <UForm
+        :schema="createUserSchema"
+        :state="cleaned"
+        class="space-y-4"
+        @submit="onSubmit"
+      >
+        <UFormField
+          label="Username"
+          name="username"
+          required
+        >
+          <UInput
+            v-model="state.username"
+            placeholder="jane"
+            autofocus
+          />
+        </UFormField>
+
+        <div class="grid grid-cols-2 gap-3">
+          <UFormField
+            label="Display name"
+            name="displayName"
+          >
+            <UInput
+              v-model="state.displayName"
+              placeholder="Jane Doe"
+            />
+          </UFormField>
+          <UFormField
+            label="Role"
+            name="role"
+            required
+          >
+            <USelectMenu
+              v-model="state.role"
+              :items="roleItems"
+              value-key="value"
+              :search-input="false"
+            />
+          </UFormField>
+        </div>
+
+        <UFormField
+          label="Password"
+          name="password"
+          hint="At least 8 characters. Leave blank for JWT-only users."
+        >
+          <UInput
+            v-model="state.password"
+            type="password"
+            placeholder="••••••••"
+          />
+        </UFormField>
+
+        <div class="flex justify-end gap-2 pt-2">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            label="Cancel"
+            @click="() => {
+  open = false;
+}"
+          />
+          <UButton
+            type="submit"
+            label="Create user"
+            :loading="props.loading"
+          />
+        </div>
+      </UForm>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/app/components/settings/ObserveUserFormModal.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    loading?: boolean;
+};
+type __VLS_ModelProps = {
+    /** Create a DB-backed dashboard user. Validation rides createUserSchema so the form and the POST route agree. */
+    'open': boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (input: {
+        username: string;
+        role: "admin" | "manager" | "viewer";
+        displayName?: string | undefined;
+        password?: string | undefined;
+    }) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((input: {
+        username: string;
+        role: "admin" | "manager" | "viewer";
+        displayName?: string | undefined;
+        password?: string | undefined;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/settings/ObserveVersionTrackingField.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_ModelProps = {
+    /**
+     * Version-tracking toggle plus an optional current-version input revealed when on.
+     * Two-way bound so the form modal and the edit page share one control.
+     */
+    'enabled': boolean;
+    'currentVersion'?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:enabled": (value: boolean) => any;
+    "update:currentVersion": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:enabled"?: ((value: boolean) => any) | undefined;
+    "onUpdate:currentVersion"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/settings/ObserveVersionTrackingField.vue

@@ -0,0 +1,20 @@
+<script setup>
+const enabled = defineModel("enabled", { type: Boolean, ...{ required: true } });
+const currentVersion = defineModel("currentVersion", { type: [String, null], ...{ default: null } });
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="flex items-center gap-3">
+      <USwitch v-model="enabled" />
+      <span class="text-sm">Track versions</span>
+    </div>
+    <UInput
+      v-if="enabled"
+      :model-value="currentVersion ?? ''"
+      placeholder="Current version (e.g. 1.4.2)"
+      size="sm"
+      @update:model-value="currentVersion = String($event) || null"
+    />
+  </div>
+</template>

package/dist/runtime/app/components/settings/ObserveVersionTrackingField.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_ModelProps = {
+    /**
+     * Version-tracking toggle plus an optional current-version input revealed when on.
+     * Two-way bound so the form modal and the edit page share one control.
+     */
+    'enabled': boolean;
+    'currentVersion'?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:enabled": (value: boolean) => any;
+    "update:currentVersion": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:enabled"?: ((value: boolean) => any) | undefined;
+    "onUpdate:currentVersion"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/composables/useObserveAbility.d.ts

@@ -0,0 +1,15 @@
+import type { Capability } from '../../shared/rbac/capabilities.js';
+/**
+ * Client mirror of the server authorization check. Reads the Principal already carried in
+ * the session cookie (useUserSession().user is typed Principal) and the SAME shared
+ * ROLE_CAPABILITIES the server enforces, so a hidden control can never disagree with the
+ * route behind it.
+ *
+ * PRESENTATIONAL ONLY. The server (requireCapability + serviceScopeFilter/assertServiceInScope)
+ * is the sole authority: a hand-crafted request still hits the choke point. Gate UI with this;
+ * never rely on it for security.
+ */
+export declare function useObserveAbility(): {
+    can: (capability: Capability) => boolean;
+    canForService: (capability: Capability, serviceSlug: string) => boolean;
+};

package/dist/runtime/app/composables/useObserveAbility.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+import { useUserSession } from "#imports";
+import { roleCan } from "../../shared/rbac/capabilities.js";
+export function useObserveAbility() {
+  const { user } = useUserSession();
+  const role = computed(() => user.value?.role ?? null);
+  const can = (capability) => {
+    const r = role.value;
+    return r ? roleCan(r, capability) !== void 0 : false;
+  };
+  const canForService = (capability, serviceSlug) => {
+    const p = user.value;
+    if (!p) return false;
+    const scope = roleCan(p.role, capability);
+    if (!scope) return false;
+    if (scope === "all" || p.assignment.services.includes("*")) return true;
+    return p.assignment.services.includes(serviceSlug);
+  };
+  return { can, canForService };
+}

package/dist/runtime/app/composables/useObserveActivity.d.ts

@@ -0,0 +1,22 @@
+import { type Ref } from 'vue';
+import type { ActivityDimension, ActivityResponse, ActivitySort } from '../../shared/schema/activity.js';
+export interface UseObserveActivityReturn {
+    data: Ref<ActivityResponse | null | undefined>;
+    pending: Ref<boolean>;
+    error: Ref<Error | null | undefined>;
+    refresh: () => Promise<void>;
+    dimension: Ref<ActivityDimension>;
+    sort: Ref<ActivitySort>;
+    q: Ref<string>;
+}
+/**
+ * The one fetch behind the ranked activity table. Period + scope compose from the shared
+ * shell state exactly as useObserveStats does; dimension/sort/q are page-local controls.
+ * The search input is debounced (300ms) so typing does not refetch per keystroke; the repo
+ * has no @vueuse dependency, so the timer is hand-rolled. `opts.key`/`opts.limit` let a
+ * future compact overview panel mount its own instance without colliding on the fetch cache.
+ */
+export declare function useObserveActivity(opts?: {
+    limit?: number;
+    key?: string;
+}): UseObserveActivityReturn;

package/dist/runtime/app/composables/useObserveActivity.js

@@ -0,0 +1,44 @@
+import { computed, ref, watch, onBeforeUnmount } from "vue";
+import { useFetch } from "#imports";
+import { useObservePeriod } from "./useObservePeriod.js";
+import { useObserveScope } from "./useObserveScope.js";
+export function useObserveActivity(opts = {}) {
+  const { period } = useObservePeriod();
+  const { serviceSlug, groupSlug } = useObserveScope();
+  const dimension = ref("auto");
+  const sort = ref("count");
+  const q = ref("");
+  const debouncedQ = ref("");
+  let timer;
+  watch(q, (v) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      debouncedQ.value = v.trim();
+    }, 300);
+  });
+  onBeforeUnmount(() => {
+    if (timer) clearTimeout(timer);
+  });
+  const query = computed(() => ({
+    period: period.value,
+    ...serviceSlug.value ? { service: serviceSlug.value } : {},
+    ...groupSlug.value ? { group: groupSlug.value } : {},
+    dimension: dimension.value,
+    sort: sort.value,
+    ...debouncedQ.value ? { q: debouncedQ.value } : {},
+    ...opts.limit ? { limit: opts.limit } : {}
+  }));
+  const { data, pending, error, refresh } = useFetch(
+    "/api/observe/activity",
+    { key: opts.key ?? "observe:activity", query }
+  );
+  return {
+    data,
+    pending,
+    error,
+    refresh,
+    dimension,
+    sort,
+    q
+  };
+}

package/dist/runtime/app/composables/useObserveApiKeys.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+import type { KeyMeta, MintedKey } from '../../shared/schema/provisioning.js';
+export interface UseObserveApiKeysReturn {
+    data: Ref<KeyMeta[] | null | undefined>;
+    pending: Ref<boolean>;
+    error: Ref<Error | null | undefined>;
+    refresh: () => Promise<void>;
+    mint: (label: string) => Promise<MintedKey>;
+    rotate: (keyId: string, label: string) => Promise<MintedKey>;
+    revoke: (keyId: string) => Promise<{
+        ok: true;
+    }>;
+}
+/** Key metadata list + mint/rotate/revoke for one service. Plaintext is returned only once, by mint/rotate. */
+export declare function useObserveApiKeys(serviceId: string): UseObserveApiKeysReturn;

package/dist/runtime/app/composables/useObserveApiKeys.js

@@ -0,0 +1,19 @@
+import { useFetch } from "#imports";
+export function useObserveApiKeys(serviceId) {
+  const { data, pending, error, refresh } = useFetch(
+    `/api/observe/services/${serviceId}/keys`,
+    { key: `observe:keys:${serviceId}` }
+  );
+  const mint = (label) => $fetch(`/api/observe/services/${serviceId}/keys`, { method: "POST", body: { label } });
+  const rotate = (keyId, label) => $fetch(`/api/observe/services/${serviceId}/keys/${keyId}/rotate`, { method: "POST", body: { label } });
+  const revoke = (keyId) => $fetch(`/api/observe/services/${serviceId}/keys/${keyId}`, { method: "DELETE" });
+  return {
+    data,
+    pending,
+    error,
+    refresh,
+    mint,
+    rotate,
+    revoke
+  };
+}

package/dist/runtime/app/composables/useObserveAssignments.d.ts

@@ -0,0 +1,19 @@
+import { type ComputedRef } from 'vue';
+import type { UserPick } from '../../shared/schema/provisioning.js';
+import { useObserveUsers } from './useObserveUsers.js';
+export interface UseObserveAssignmentsReturn {
+    users: ReturnType<typeof useObserveUsers>['data'];
+    pending: ReturnType<typeof useObserveUsers>['pending'];
+    error: ReturnType<typeof useObserveUsers>['error'];
+    refresh: ReturnType<typeof useObserveUsers>['refresh'];
+    /** Phase 1: assignments are managed in observe.auth.users, so the UI is read-only. */
+    writable: ComputedRef<boolean>;
+    /** The users (managers/viewers) assigned to a given service slug, derived from config. */
+    assignedTo: (serviceSlug: string) => UserPick[];
+}
+/**
+ * Read-only view of who is assigned to what. Runtime assignment writes land in CP16 with
+ * the DB auth provider; until then the config (observe.auth.users) is the single source of
+ * truth and this composable never mutates it (CP11 §11 R1).
+ */
+export declare function useObserveAssignments(): UseObserveAssignmentsReturn;

package/dist/runtime/app/composables/useObserveAssignments.js

@@ -0,0 +1,16 @@
+import { computed } from "vue";
+import { useObserveUsers } from "./useObserveUsers.js";
+export function useObserveAssignments() {
+  const { data, pending, error, refresh } = useObserveUsers();
+  const assignedTo = (serviceSlug) => (data.value ?? []).filter(
+    (u) => u.assignment.services.includes("*") || u.assignment.services.includes(serviceSlug)
+  );
+  return {
+    users: data,
+    pending,
+    error,
+    refresh,
+    writable: computed(() => false),
+    assignedTo
+  };
+}

package/dist/runtime/app/composables/useObserveErrors.d.ts

@@ -0,0 +1,33 @@
+import { type Ref, type WritableComputedRef } from 'vue';
+import type { ErrorGroupsResponse, ErrorGroupDetailResponse, ErrorSort } from '../../shared/schema/errors-query.js';
+export interface UseObserveErrorsReturn {
+    data: Ref<ErrorGroupsResponse | null | undefined>;
+    pending: Ref<boolean>;
+    error: Ref<Error | null | undefined>;
+    refresh: () => Promise<void>;
+    q: Ref<string>;
+    sort: Ref<ErrorSort>;
+    page: WritableComputedRef<number>;
+    limit: number;
+}
+export interface UseObserveErrorGroupReturn {
+    data: Ref<ErrorGroupDetailResponse | null | undefined>;
+    pending: Ref<boolean>;
+    error: Ref<Error | null | undefined>;
+    refresh: () => Promise<void>;
+    page: WritableComputedRef<number>;
+    limit: number;
+}
+/**
+ * The grouped error-list fetch behind the errors page. Period + scope compose from the
+ * shared shell state exactly as useObserveStats does; q/sort/page are page-local controls.
+ * The search input is debounced (300ms) so typing does not refetch per keystroke (the repo
+ * has no @vueuse dependency, so the timer is hand-rolled), and any q/sort change resets to
+ * page 1 so an offset past the new total never renders empty.
+ */
+export declare function useObserveErrors(): UseObserveErrorsReturn;
+/**
+ * The single drill-down fetch behind the error detail page. Period + scope compose from
+ * the shell so a shared link restores the window; the occurrences pager is page-local.
+ */
+export declare function useObserveErrorGroup(fingerprint: string): UseObserveErrorGroupReturn;