@galaxy-tool-util/cache-ui 0.0.0 → 0.2.2

package/package.json

@@ -1,20 +1,46 @@
 {
   "name": "@galaxy-tool-util/cache-ui",
-  "version": "0.0.0",
+  "version": "0.2.2",
   "description": "Vue 3 + PrimeVue panel for inspecting and managing the Galaxy tool cache exposed by gxwf-web / tool-cache-proxy",
   "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jmchilton/galaxy-tool-util-ts",
-    "directory": "packages/cache-ui"
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./*.vue": "./src/*.vue",
+    "./cache-ui.css": "./src/cache-ui.css"
   },
-  "license": "MIT",
   "files": [
+    "src",
     "README.md",
     "LICENSE"
   ],
+  "dependencies": {
+    "openapi-fetch": "^0.13.8",
+    "primevue": "^4.3.0",
+    "vue": "^3.5.0",
+    "@galaxy-tool-util/tool-cache-proxy": "1.13.1"
+  },
+  "devDependencies": {
+    "vue-tsc": "^2.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jmchilton/galaxy-tool-util-ts",
+    "directory": "packages/cache-ui"
+  },
   "publishConfig": {
     "access": "public",
-    "provenance": false
+    "provenance": true
+  },
+  "license": "MIT",
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/ test/",
+    "format": "prettier --check 'src/**/*.{ts,vue}' 'test/**/*.ts'",
+    "format-fix": "prettier --write 'src/**/*.{ts,vue}' 'test/**/*.ts'"
   }
-}
+}

package/src/cache-ui.css

@@ -0,0 +1,20 @@
+/**
+ * Default values for the design tokens the cache-ui components reference.
+ * Optional — consumers that already define these (e.g. gxwf-ui via galaxy.css)
+ * can skip the import. Proxy SPA imports it to get a usable baseline.
+ */
+:root {
+  --gx-mono: "Monaco", "Menlo", "Consolas", "Courier New", monospace;
+  --gx-sp-1: 0.25rem;
+  --gx-sp-2: 0.5rem;
+  --gx-sp-3: 0.75rem;
+  --gx-sp-4: 1rem;
+  --gx-sp-5: 1.25rem;
+  --gx-sp-6: 1.5rem;
+  --gx-sp-8: 2rem;
+  --gx-fs-xs: 0.75rem;
+  --gx-fs-sm: 0.85rem;
+  --gx-fs-base: 1rem;
+  --gx-fs-lg: 1.25rem;
+  --gx-fs-xl: 1.5rem;
+}

package/src/client.ts

@@ -0,0 +1,28 @@
+/**
+ * Typed cache client. Sources its compile-time types from
+ * `@galaxy-tool-util/tool-cache-proxy`'s OpenAPI spec — both `tool-cache-proxy`
+ * and `gxwf-web` implement the cache surface identically, so any server that
+ * speaks it will satisfy these types at runtime.
+ */
+
+import createClient from "openapi-fetch";
+import type { Client, ClientOptions } from "openapi-fetch";
+import type { paths, components } from "@galaxy-tool-util/tool-cache-proxy";
+
+export type { paths, components };
+export type CachedToolEntry = components["schemas"]["CachedToolEntry"];
+export type CacheStats = components["schemas"]["CacheStats"];
+export type CacheClient = Client<paths>;
+
+/**
+ * Create an HTTP client pointed at a server that exposes the shared cache
+ * surface (gxwf-web or tool-cache-proxy).
+ *
+ * @param baseUrl - Base URL of the server. Pass "" to use the current origin.
+ */
+export function createCacheClient(
+  baseUrl: string,
+  options?: Omit<ClientOptions, "baseUrl">,
+): CacheClient {
+  return createClient<paths>({ baseUrl, ...options });
+}

package/src/components/ToolCacheRawDialog.vue

@@ -0,0 +1,196 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    :header="entry?.toolId ?? 'Cached payload'"
+    modal
+    :style="{ width: '70vw' }"
+    :breakpoints="{ '960px': '90vw' }"
+  >
+    <Tabs v-model:value="activeTab">
+      <TabList>
+        <Tab v-for="t in TABS" :key="t.id" :value="t.id">
+          {{ t.label }}
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel v-for="t in TABS" :key="t.id" :value="t.id">
+          <p v-if="t.id === 'tool_source'" class="source-note">XML macros are expanded.</p>
+          <div v-if="loading[t.id]" class="loading-state">Loading…</div>
+          <div v-else-if="errors[t.id]" class="error-state">{{ errors[t.id] }}</div>
+          <pre v-else class="raw-json">{{ pretty(t.id) }}</pre>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+    <template #footer>
+      <Button label="Copy" icon="pi pi-copy" text :disabled="!activePretty" @click="copy" />
+      <Button label="Close" icon="pi pi-times" @click="visible = false" />
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+import Tabs from "primevue/tabs";
+import TabList from "primevue/tablist";
+import Tab from "primevue/tab";
+import TabPanels from "primevue/tabpanels";
+import TabPanel from "primevue/tabpanel";
+import { useToast } from "primevue/usetoast";
+import type { CachedToolEntry as Entry } from "../client.js";
+type TabId =
+  | "parameter_model"
+  | "parameter_request_schema"
+  | "parameter_landing_request_schema"
+  | "parameter_test_case_xml_schema"
+  | "tool_source";
+
+interface Loaders {
+  tool_source: (toolId: string, toolVersion: string) => Promise<unknown>;
+  parameter_model: (toolId: string, toolVersion: string) => Promise<unknown>;
+  parameter_request_schema: (toolId: string, toolVersion: string) => Promise<unknown>;
+  parameter_landing_request_schema: (toolId: string, toolVersion: string) => Promise<unknown>;
+  parameter_test_case_xml_schema: (toolId: string, toolVersion: string) => Promise<unknown>;
+}
+
+const props = defineProps<{
+  modelValue: boolean;
+  entry: Entry | null;
+  loaders: Loaders;
+}>();
+const emit = defineEmits<{ "update:modelValue": [v: boolean] }>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+});
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: "parameter_model", label: "Model" },
+  { id: "parameter_request_schema", label: "Request schema" },
+  { id: "parameter_landing_request_schema", label: "Landing-request schema" },
+  { id: "parameter_test_case_xml_schema", label: "Test-case schema" },
+  { id: "tool_source", label: "Source" },
+];
+
+const toast = useToast();
+const activeTab = ref<TabId>("parameter_model");
+const contents = reactive<Record<TabId, unknown>>({
+  parameter_model: null,
+  parameter_request_schema: null,
+  parameter_landing_request_schema: null,
+  parameter_test_case_xml_schema: null,
+  tool_source: null,
+});
+const loading = reactive<Record<TabId, boolean>>({
+  parameter_model: false,
+  parameter_request_schema: false,
+  parameter_landing_request_schema: false,
+  parameter_test_case_xml_schema: false,
+  tool_source: false,
+});
+const errors = reactive<Record<TabId, string | null>>({
+  parameter_model: null,
+  parameter_request_schema: null,
+  parameter_landing_request_schema: null,
+  parameter_test_case_xml_schema: null,
+  tool_source: null,
+});
+const fetched = reactive<Record<TabId, boolean>>({
+  parameter_model: false,
+  parameter_request_schema: false,
+  parameter_landing_request_schema: false,
+  parameter_test_case_xml_schema: false,
+  tool_source: false,
+});
+
+function pretty(id: TabId): string {
+  const v = contents[id];
+  if (id === "tool_source") return typeof v === "string" ? v : "";
+  return v === null || v === undefined ? "" : JSON.stringify(v, null, 2);
+}
+const activePretty = computed(() => pretty(activeTab.value));
+
+let entryGeneration = 0;
+
+async function loadTab(id: TabId): Promise<void> {
+  if (fetched[id] || loading[id]) return;
+  if (!props.entry) return;
+  const generation = entryGeneration;
+  const entry = props.entry;
+  loading[id] = true;
+  errors[id] = null;
+  try {
+    const loader = props.loaders[id];
+    const result = await loader(entry.toolId, entry.requestVersion ?? entry.toolVersion);
+    if (generation !== entryGeneration) return;
+    contents[id] = result;
+    fetched[id] = true;
+  } catch (e) {
+    if (generation === entryGeneration) errors[id] = e instanceof Error ? e.message : String(e);
+  } finally {
+    if (generation === entryGeneration) loading[id] = false;
+  }
+}
+
+watch(
+  () => [props.modelValue, props.entry?.cacheKey],
+  ([open]) => {
+    entryGeneration += 1;
+    if (!open) return;
+    // Reset per-entry state when a new entry is shown.
+    for (const t of TABS) {
+      loading[t.id] = false;
+      contents[t.id] = null;
+      errors[t.id] = null;
+      fetched[t.id] = false;
+    }
+    activeTab.value = "parameter_model";
+    void loadTab("parameter_model");
+  },
+);
+
+watch(activeTab, (id) => {
+  void loadTab(id);
+});
+
+async function copy() {
+  await navigator.clipboard.writeText(activePretty.value);
+  toast.add({ severity: "success", summary: "Copied", life: 1500 });
+}
+</script>
+
+<style scoped>
+.source-note {
+  color: var(--p-text-muted-color);
+  font-size: var(--gx-fs-xs);
+}
+
+.raw-json {
+  max-height: 60vh;
+  overflow: auto;
+  margin: 0;
+  padding: var(--gx-sp-3);
+  background: var(--p-surface-100, #f3f4f6);
+  color: var(--p-text-color, inherit);
+  border-radius: 4px;
+  font-family: var(--gx-mono);
+  font-size: var(--gx-fs-xs);
+  white-space: pre;
+}
+
+:global(.dark) .raw-json {
+  background: var(--p-surface-800, #1f2937);
+}
+
+.loading-state,
+.error-state {
+  padding: var(--gx-sp-4);
+  text-align: center;
+}
+
+.error-state {
+  color: var(--p-red-500, #ef4444);
+}
+</style>

package/src/components/ToolCacheStats.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="cache-stats" data-description="tool cache stats">
+    <div class="stat-line">
+      <strong>{{ stats.count }}</strong> tools
+      <template v-if="stats.totalBytes !== undefined">
+        · <strong>{{ formatBytes(stats.totalBytes) }}</strong>
+      </template>
+      <template v-for="(n, source) in stats.bySource" :key="source">
+        · <strong>{{ n }}</strong> {{ source }}
+      </template>
+    </div>
+    <div v-if="stats.oldest || stats.newest" class="stat-line stat-meta">
+      <span v-if="stats.oldest">Oldest: {{ formatDate(stats.oldest) }}</span>
+      <span v-if="stats.newest">Newest: {{ formatDate(stats.newest) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CacheStats } from "../client.js";
+
+defineProps<{ stats: CacheStats }>();
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(2)} MB`;
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleString();
+}
+</script>
+
+<style scoped>
+.cache-stats {
+  padding: var(--gx-sp-3) var(--gx-sp-4);
+  background: var(--p-content-background, #fff);
+  border: 1px solid var(--p-content-border-color, #e5e7eb);
+  border-radius: 6px;
+  margin-bottom: var(--gx-sp-4);
+}
+
+.stat-line {
+  font-size: var(--gx-fs-sm);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  align-items: baseline;
+}
+
+.stat-meta {
+  margin-top: var(--gx-sp-2);
+  gap: var(--gx-sp-4);
+  color: var(--p-text-muted-color, #6b7280);
+  font-size: var(--gx-fs-xs);
+}
+</style>

package/src/components/ToolCacheTable.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="cache-table">
+    <div class="list-toolbar">
+      <IconField class="search-field">
+        <InputIcon class="pi pi-search" />
+        <InputText v-model="filter" placeholder="Filter by tool id…" size="small" />
+      </IconField>
+      <Select
+        v-model="sourceFilter"
+        :options="sourceOptions"
+        placeholder="All sources"
+        showClear
+        size="small"
+        class="source-select"
+      />
+      <label class="undecodable-toggle">
+        <Checkbox v-model="undecodableOnly" :binary="true" />
+        <span>Undecodable only</span>
+      </label>
+      <span class="count">
+        {{ filtered.length }}{{ filtered.length !== entries.length ? ` of ${entries.length}` : "" }}
+        entries
+      </span>
+    </div>
+
+    <DataTable
+      :value="filtered"
+      :loading="loading"
+      dataKey="cacheKey"
+      :rowHover="true"
+      stripedRows
+      sortField="cachedAt"
+      :sortOrder="-1"
+      :paginator="filtered.length > 25"
+      :rows="25"
+      :rowsPerPageOptions="[25, 50, 100]"
+    >
+      <template #empty>
+        <div class="empty-state">
+          <i class="pi pi-database empty-icon" />
+          <p v-if="filter || sourceFilter || undecodableOnly">
+            No entries match the current filters.
+          </p>
+          <p v-else>The tool cache is empty.</p>
+        </div>
+      </template>
+
+      <Column field="toolId" header="Tool" sortable>
+        <template #body="{ data: row }">
+          <div class="tool-cell">
+            <i
+              v-if="!(row as Entry).decodable"
+              class="pi pi-exclamation-triangle warn-icon"
+              v-tooltip.right="'Cached payload does not decode as a ParsedTool'"
+            />
+            <span class="tool-id">{{ (row as Entry).toolId }}</span>
+          </div>
+        </template>
+      </Column>
+      <Column field="toolVersion" header="Version" sortable style="width: 10rem" />
+      <Column field="source" header="Source" sortable style="width: 7rem">
+        <template #body="{ data: row }">
+          <Tag :value="(row as Entry).source" severity="secondary" />
+        </template>
+      </Column>
+      <Column field="sizeBytes" header="Size" sortable style="width: 7rem">
+        <template #body="{ data: row }">
+          <span v-if="(row as Entry).sizeBytes !== undefined">
+            {{ formatBytes((row as Entry).sizeBytes!) }}
+          </span>
+          <span v-else class="muted">—</span>
+        </template>
+      </Column>
+      <Column field="cachedAt" header="Cached" sortable style="width: 11rem">
+        <template #body="{ data: row }">
+          <span :title="(row as Entry).cachedAt">{{
+            formatRelative((row as Entry).cachedAt)
+          }}</span>
+        </template>
+      </Column>
+      <Column header="" style="width: 11rem; text-align: right">
+        <template #body="{ data: row }">
+          <Button
+            icon="pi pi-eye"
+            aria-label="View tool definition"
+            text
+            size="small"
+            @click="emit('view', row as Entry)"
+            v-tooltip.left="'View tool definition'"
+          />
+          <Button
+            icon="pi pi-refresh"
+            text
+            size="small"
+            :disabled="!(row as Entry).refetchable"
+            @click="emit('refetch', row as Entry)"
+            v-tooltip.left="
+              (row as Entry).refetchable
+                ? 'Re-fetch from source'
+                : 'Cannot re-fetch — tool id is unknown/orphan'
+            "
+          />
+          <a
+            v-if="(row as Entry).toolshedUrl"
+            :href="(row as Entry).toolshedUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button icon="pi pi-external-link" text size="small" v-tooltip.left="'Open ToolShed'" />
+          </a>
+          <Button
+            icon="pi pi-trash"
+            text
+            size="small"
+            severity="danger"
+            @click="emit('delete', row as Entry)"
+            v-tooltip.left="'Delete'"
+          />
+        </template>
+      </Column>
+    </DataTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import Button from "primevue/button";
+import Checkbox from "primevue/checkbox";
+import Column from "primevue/column";
+import DataTable from "primevue/datatable";
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import InputText from "primevue/inputtext";
+import Select from "primevue/select";
+import Tag from "primevue/tag";
+import type { CachedToolEntry as Entry } from "../client.js";
+
+const props = defineProps<{ entries: Entry[]; loading?: boolean }>();
+const emit = defineEmits<{
+  view: [entry: Entry];
+  refetch: [entry: Entry];
+  delete: [entry: Entry];
+}>();
+
+const filter = ref("");
+const sourceFilter = ref<string | null>(null);
+const undecodableOnly = ref(false);
+
+const sourceOptions = computed(() =>
+  Array.from(new Set(props.entries.map((e) => e.source))).sort(),
+);
+
+const filtered = computed(() => {
+  const q = filter.value.toLowerCase();
+  return props.entries.filter((e) => {
+    if (q && !e.toolId.toLowerCase().includes(q)) return false;
+    if (sourceFilter.value && e.source !== sourceFilter.value) return false;
+    if (undecodableOnly.value && e.decodable) return false;
+    return true;
+  });
+});
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(2)} MB`;
+}
+
+function formatRelative(iso: string): string {
+  const ms = Date.now() - new Date(iso).getTime();
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s ago`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 48) return `${h}h ago`;
+  const d = Math.round(h / 24);
+  return `${d}d ago`;
+}
+</script>
+
+<style scoped>
+.list-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--gx-sp-3);
+  margin-bottom: var(--gx-sp-3);
+}
+
+.source-select {
+  min-width: 10rem;
+}
+
+.undecodable-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: var(--gx-fs-sm);
+  cursor: pointer;
+}
+
+.count {
+  margin-left: auto;
+  font-size: var(--gx-fs-sm);
+  color: var(--p-text-muted-color, #6b7280);
+}
+
+.tool-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+}
+
+.tool-id {
+  font-family: var(--gx-mono);
+}
+
+.warn-icon {
+  color: var(--p-orange-500, #f59e0b);
+}
+
+.muted {
+  color: var(--p-text-muted-color, #6b7280);
+}
+
+.empty-state {
+  text-align: center;
+  padding: var(--gx-sp-6) var(--gx-sp-4);
+  color: var(--p-text-muted-color, #6b7280);
+}
+
+.empty-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: var(--gx-sp-2);
+  opacity: 0.5;
+}
+</style>

package/src/composables/useToolCache.ts

@@ -0,0 +1,152 @@
+import { ref } from "vue";
+import type { CacheClient, CachedToolEntry, CacheStats } from "../client.js";
+
+/** Pull a server-side error message out of a router-style `{detail: "..."}` body, with fallbacks. */
+function detailOf(err: unknown, fallback: string): string {
+  if (err && typeof err === "object" && "detail" in err) {
+    const d = (err as { detail: unknown }).detail;
+    if (typeof d === "string" && d.length > 0) return d;
+  }
+  return fallback;
+}
+
+export function useToolCache(client: CacheClient) {
+  const entries = ref<CachedToolEntry[]>([]);
+  const stats = ref<CacheStats>({ count: 0, bySource: {} });
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  async function refresh(opts: { decode?: boolean } = {}) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const { data, error: err } = await client.GET("/api/tool-cache", {
+        params: { query: opts.decode ? { decode: "1" } : {} },
+      });
+      if (err) {
+        error.value = detailOf(err, "Failed to load tool cache");
+      } else if (data) {
+        entries.value = data.entries;
+        stats.value = data.stats;
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function loadParameterModel(toolId: string, toolVersion: string) {
+    const { data, error: err } = await client.GET("/api/tools/{tool_id}/versions/{tool_version}", {
+      params: { path: { tool_id: toolId, tool_version: toolVersion } },
+    });
+    if (err) throw new Error(detailOf(err, "Failed to load parameter model"));
+    return data;
+  }
+
+  async function loadParameterRequestSchema(toolId: string, toolVersion: string) {
+    const { data, error: err } = await client.GET(
+      "/api/tools/{tool_id}/versions/{tool_version}/parameter_request_schema",
+      { params: { path: { tool_id: toolId, tool_version: toolVersion } } },
+    );
+    if (err) throw new Error(detailOf(err, "Failed to load request schema"));
+    return data;
+  }
+
+  async function loadParameterLandingRequestSchema(toolId: string, toolVersion: string) {
+    const { data, error: err } = await client.GET(
+      "/api/tools/{tool_id}/versions/{tool_version}/parameter_landing_request_schema",
+      { params: { path: { tool_id: toolId, tool_version: toolVersion } } },
+    );
+    if (err) throw new Error(detailOf(err, "Failed to load landing-request schema"));
+    return data;
+  }
+
+  async function loadParameterTestCaseXmlSchema(toolId: string, toolVersion: string) {
+    const { data, error: err } = await client.GET(
+      "/api/tools/{tool_id}/versions/{tool_version}/parameter_test_case_xml_schema",
+      { params: { path: { tool_id: toolId, tool_version: toolVersion } } },
+    );
+    if (err) throw new Error(detailOf(err, "Failed to load test-case-XML schema"));
+    return data;
+  }
+
+  async function loadToolSource(toolId: string, toolVersion: string) {
+    const { data, error: err } = await client.GET(
+      "/api/tools/{tool_id}/versions/{tool_version}/tool_source",
+      { params: { path: { tool_id: toolId, tool_version: toolVersion } }, parseAs: "text" },
+    );
+    if (err) throw new Error(detailOf(err, "Failed to load tool source"));
+    return data;
+  }
+
+  async function del(cacheKey: string) {
+    error.value = null;
+    const { error: err } = await client.DELETE("/api/tool-cache/{cacheKey}", {
+      params: { path: { cacheKey } },
+    });
+    if (err) {
+      const msg = detailOf(err, "Delete failed");
+      error.value = msg;
+      throw new Error(msg);
+    }
+    await refresh();
+  }
+
+  async function clear(prefix?: string) {
+    error.value = null;
+    const { data, error: err } = await client.DELETE("/api/tool-cache", {
+      params: { query: prefix ? { prefix } : {} },
+    });
+    if (err) {
+      const msg = detailOf(err, "Clear failed");
+      error.value = msg;
+      throw new Error(msg);
+    }
+    await refresh();
+    return data;
+  }
+
+  async function refetch(toolId: string, toolVersion?: string) {
+    error.value = null;
+    const { data, error: err } = await client.POST("/api/tool-cache/refetch", {
+      body: { toolId, ...(toolVersion ? { toolVersion } : {}) },
+    });
+    if (err) {
+      const msg = detailOf(err, "Refetch failed");
+      error.value = msg;
+      throw new Error(msg);
+    }
+    await refresh();
+    return data;
+  }
+
+  async function add(toolId: string, toolVersion?: string) {
+    error.value = null;
+    const { data, error: err } = await client.POST("/api/tool-cache/add", {
+      body: { toolId, ...(toolVersion ? { toolVersion } : {}) },
+    });
+    if (err) {
+      const msg = detailOf(err, "Add failed");
+      error.value = msg;
+      throw new Error(msg);
+    }
+    await refresh();
+    return data;
+  }
+
+  return {
+    entries,
+    stats,
+    loading,
+    error,
+    refresh,
+    loadToolSource,
+    loadParameterModel,
+    loadParameterRequestSchema,
+    loadParameterLandingRequestSchema,
+    loadParameterTestCaseXmlSchema,
+    del,
+    clear,
+    refetch,
+    add,
+  };
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+/**
+ * @module @galaxy-tool-util/cache-ui
+ *
+ * Vue 3 + PrimeVue components and composable for inspecting and managing the
+ * Galaxy tool cache exposed by `gxwf-web` and `tool-cache-proxy`. Both servers
+ * implement the same cache HTTP surface; pass a `createCacheClient(baseUrl)`
+ * to the components and they work against either.
+ */
+
+export { default as ToolCacheView } from "./views/ToolCacheView.vue";
+export { default as ToolCacheTable } from "./components/ToolCacheTable.vue";
+export { default as ToolCacheStats } from "./components/ToolCacheStats.vue";
+export { default as ToolCacheRawDialog } from "./components/ToolCacheRawDialog.vue";
+export { useToolCache } from "./composables/useToolCache.js";
+export { createCacheClient } from "./client.js";
+export type { CacheClient, CachedToolEntry, CacheStats } from "./client.js";

package/src/views/ToolCacheView.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <div class="view-header">
+      <div>
+        <h1>Tool Cache</h1>
+        <p class="subtitle">Inspect and manage the in-memory + on-disk parsed-tool cache.</p>
+      </div>
+      <div class="header-actions">
+        <label
+          class="decode-toggle"
+          v-tooltip.bottom="'Probe each entry for decode-ability (slower)'"
+        >
+          <Checkbox v-model="decodeProbe" :binary="true" @change="reload" />
+          <span>Decode probe</span>
+        </label>
+        <Button label="Refresh" icon="pi pi-refresh" text :loading="loading" @click="reload" />
+        <Button
+          icon="pi pi-ellipsis-v"
+          text
+          aria-label="Cache actions"
+          @click="(e) => menu?.toggle(e)"
+        />
+        <Menu ref="menu" :model="menuItems" :popup="true" />
+      </div>
+    </div>
+
+    <Message v-if="error" severity="error" :closable="false">{{ error }}</Message>
+
+    <ToolCacheStats :stats="stats" />
+
+    <ToolCacheTable
+      :entries="entries"
+      :loading="loading"
+      @view="viewEntry"
+      @refetch="refetchEntry"
+      @delete="confirmDelete"
+    />
+
+    <ToolCacheRawDialog v-model="rawOpen" :entry="rawEntry" :loaders="dialogLoaders" />
+
+    <Dialog v-model:visible="addOpen" header="Add tool to cache" modal :style="{ width: '24rem' }">
+      <div class="add-form">
+        <label>
+          <span>Tool ID</span>
+          <InputText
+            v-model="addToolId"
+            placeholder="toolshed.g2.../repos/owner/repo/tool/version"
+          />
+        </label>
+        <label>
+          <span>Version (optional)</span>
+          <InputText v-model="addToolVersion" />
+        </label>
+      </div>
+      <template #footer>
+        <Button label="Cancel" text @click="addOpen = false" />
+        <Button label="Add" icon="pi pi-plus" :loading="addPending" @click="doAdd" />
+      </template>
+    </Dialog>
+
+    <Dialog
+      v-model:visible="prefixOpen"
+      header="Clear by tool-id prefix"
+      modal
+      :style="{ width: '24rem' }"
+    >
+      <div class="add-form">
+        <label>
+          <span>Tool ID prefix</span>
+          <InputText v-model="prefixValue" placeholder="e.g. toolshed.g2.bx.psu.edu/repos/iuc/" />
+        </label>
+      </div>
+      <template #footer>
+        <Button label="Cancel" text @click="prefixOpen = false" />
+        <Button
+          label="Clear"
+          icon="pi pi-trash"
+          severity="danger"
+          :loading="clearPending"
+          @click="doClearPrefix"
+        />
+      </template>
+    </Dialog>
+
+    <ConfirmDialog />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import Button from "primevue/button";
+import Checkbox from "primevue/checkbox";
+import ConfirmDialog from "primevue/confirmdialog";
+import Dialog from "primevue/dialog";
+import InputText from "primevue/inputtext";
+import Menu from "primevue/menu";
+import Message from "primevue/message";
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+import ToolCacheStats from "../components/ToolCacheStats.vue";
+import ToolCacheTable from "../components/ToolCacheTable.vue";
+import ToolCacheRawDialog from "../components/ToolCacheRawDialog.vue";
+import { useToolCache } from "../composables/useToolCache.js";
+import type { CachedToolEntry as Entry, CacheClient } from "../client.js";
+
+const props = defineProps<{ client: CacheClient }>();
+
+const {
+  entries,
+  stats,
+  loading,
+  error,
+  refresh,
+  loadToolSource,
+  loadParameterModel,
+  loadParameterRequestSchema,
+  loadParameterLandingRequestSchema,
+  loadParameterTestCaseXmlSchema,
+  del,
+  clear,
+  refetch,
+  add,
+} = useToolCache(props.client);
+const dialogLoaders = {
+  tool_source: loadToolSource,
+  parameter_model: loadParameterModel,
+  parameter_request_schema: loadParameterRequestSchema,
+  parameter_landing_request_schema: loadParameterLandingRequestSchema,
+  parameter_test_case_xml_schema: loadParameterTestCaseXmlSchema,
+};
+const toast = useToast();
+const confirm = useConfirm();
+
+const menu = ref<InstanceType<typeof Menu> | null>(null);
+const rawOpen = ref(false);
+const rawEntry = ref<Entry | null>(null);
+const decodeProbe = ref(false);
+
+function reload() {
+  void refresh({ decode: decodeProbe.value });
+}
+
+function errMsg(e: unknown): string {
+  return e instanceof Error ? e.message : String(e);
+}
+
+const addOpen = ref(false);
+const addToolId = ref("");
+const addToolVersion = ref("");
+const addPending = ref(false);
+
+const prefixOpen = ref(false);
+const prefixValue = ref("");
+const clearPending = ref(false);
+
+const menuItems = [
+  { label: "Add tool…", icon: "pi pi-plus", command: () => (addOpen.value = true) },
+  {
+    label: "Clear by prefix…",
+    icon: "pi pi-filter-slash",
+    command: () => (prefixOpen.value = true),
+  },
+  { separator: true },
+  {
+    label: "Clear all",
+    icon: "pi pi-trash",
+    command: () => {
+      confirm.require({
+        message: `Remove all ${stats.value.count} cached tools?`,
+        header: "Clear cache",
+        icon: "pi pi-exclamation-triangle",
+        acceptProps: { severity: "danger", label: "Clear all" },
+        accept: async () => {
+          try {
+            const data = await clear();
+            toast.add({
+              severity: "success",
+              summary: `Removed ${data?.removed ?? 0} entries`,
+              life: 2500,
+            });
+          } catch (e) {
+            toast.add({ severity: "error", summary: errMsg(e), life: 4000 });
+          }
+        },
+      });
+    },
+  },
+];
+
+function viewEntry(e: Entry) {
+  rawEntry.value = e;
+  rawOpen.value = true;
+}
+
+function confirmDelete(e: Entry) {
+  confirm.require({
+    message: `Delete cached entry for ${e.toolId} ${e.toolVersion}?`,
+    header: "Delete entry",
+    icon: "pi pi-exclamation-triangle",
+    acceptProps: { severity: "danger", label: "Delete" },
+    accept: async () => {
+      try {
+        await del(e.cacheKey);
+        toast.add({ severity: "success", summary: `Deleted ${e.toolId}`, life: 2000 });
+      } catch (err) {
+        toast.add({ severity: "error", summary: errMsg(err), life: 4000 });
+      }
+    },
+  });
+}
+
+async function refetchEntry(e: Entry) {
+  try {
+    await refetch(e.toolId, e.requestVersion ?? e.toolVersion);
+    toast.add({
+      severity: "success",
+      summary: `Re-fetched ${e.toolId} ${e.toolVersion}`,
+      life: 2500,
+    });
+  } catch (err) {
+    toast.add({ severity: "error", summary: `Failed: ${errMsg(err)}`, life: 4000 });
+  }
+}
+
+async function doAdd() {
+  if (!addToolId.value) return;
+  addPending.value = true;
+  try {
+    const data = await add(addToolId.value, addToolVersion.value || undefined);
+    toast.add({
+      severity: "success",
+      summary: data?.alreadyCached ? "Already cached" : `Added ${addToolId.value}`,
+      life: 2500,
+    });
+    addOpen.value = false;
+    addToolId.value = "";
+    addToolVersion.value = "";
+  } catch (err) {
+    toast.add({ severity: "error", summary: `Failed: ${errMsg(err)}`, life: 4000 });
+  } finally {
+    addPending.value = false;
+  }
+}
+
+async function doClearPrefix() {
+  if (!prefixValue.value) return;
+  clearPending.value = true;
+  try {
+    const data = await clear(prefixValue.value);
+    toast.add({
+      severity: "success",
+      summary: `Removed ${data?.removed ?? 0} entries`,
+      life: 2500,
+    });
+    prefixOpen.value = false;
+    prefixValue.value = "";
+  } catch (err) {
+    toast.add({ severity: "error", summary: errMsg(err), life: 4000 });
+  } finally {
+    clearPending.value = false;
+  }
+}
+
+onMounted(reload);
+</script>
+
+<style scoped>
+.view-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gx-sp-4);
+  margin-bottom: var(--gx-sp-4);
+}
+
+.view-header h1 {
+  margin: 0 0 var(--gx-sp-1);
+  font-size: var(--gx-fs-xl);
+}
+
+.subtitle {
+  margin: 0;
+  color: var(--p-text-muted-color, #6b7280);
+  font-size: var(--gx-fs-sm);
+}
+
+.header-actions {
+  display: flex;
+  gap: var(--gx-sp-2);
+  align-items: center;
+}
+
+.decode-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: var(--gx-fs-sm);
+  color: var(--p-text-muted-color, #6b7280);
+  cursor: pointer;
+}
+
+.add-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gx-sp-3);
+}
+
+.add-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+  font-size: var(--gx-fs-sm);
+}
+</style>

package/README.md

@@ -1,3 +0,0 @@
-Bootstrap package for @galaxy-tool-util/cache-ui.
-
-This stub establishes the npm package so its GitHub Actions trusted publisher can be configured. The full package is published by the repository release workflow.