@openparachute/agent 0.1.0

package/web/ui/src/styles.css

@@ -0,0 +1,608 @@
+:root {
+  --bg: #faf8f4;
+  --bg-soft: #f3f0ea;
+  --fg: #2c2a26;
+  --fg-muted: #6b6860;
+  --fg-dim: #9a9690;
+  --accent: #4a7c59;
+  --accent-soft: rgba(74, 124, 89, 0.08);
+  --accent-hover: #3d6849;
+  --border: #e6e1d8;
+  --error: #8c3a3a;
+  --error-soft: rgba(140, 58, 58, 0.06);
+  --warn: #b08023;
+  --warn-soft: rgba(176, 128, 35, 0.08);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+button {
+  font: inherit;
+  background: var(--accent);
+  color: white;
+  border: 0;
+  border-radius: 6px;
+  padding: 0.55rem 1.1rem;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+button:hover { background: var(--accent-hover); }
+button:disabled { opacity: 0.5; cursor: not-allowed; }
+button.secondary {
+  background: white;
+  color: var(--fg);
+  border: 1px solid var(--border);
+}
+button.secondary:hover { background: var(--bg-soft); }
+button.danger {
+  background: var(--error);
+}
+button.danger:hover { background: #6f2d2d; }
+
+input, select, textarea {
+  font: inherit;
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.55rem 0.75rem;
+  color: var(--fg);
+}
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+code {
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 0.85em;
+  background: var(--bg-soft);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+.page {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 1.5rem 1.5rem 6rem;
+}
+
+.nav {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 2rem;
+}
+.nav .brand {
+  font-weight: 600;
+  font-family: serif;
+  font-size: 1.1rem;
+  margin-right: auto;
+}
+.nav .brand .sub {
+  color: var(--fg-dim);
+  font-size: 0.78rem;
+  font-weight: 400;
+  margin-left: 0.4rem;
+}
+.nav a { color: var(--fg-muted); font-size: 0.95rem; }
+.nav a:hover { text-decoration: none; color: var(--fg); }
+
+h2 {
+  margin: 0 0 1rem;
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+.section {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.section h3 {
+  margin: 0 0 0.75rem;
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 500;
+}
+
+.muted { color: var(--fg-muted); font-size: 0.92rem; }
+.dim { color: var(--fg-dim); font-size: 0.85rem; }
+
+.error-banner {
+  background: var(--error-soft);
+  border: 1px solid var(--error);
+  color: var(--error);
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+}
+.warn-banner {
+  background: var(--warn-soft);
+  border: 1px solid var(--warn);
+  color: var(--warn);
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+}
+.status-banner {
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.9rem;
+  color: var(--fg-muted);
+}
+
+.empty {
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: var(--fg-muted);
+  background: var(--bg-soft);
+  border-radius: 10px;
+}
+
+.group-row {
+  display: block;
+  padding: 1rem 1.25rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin-bottom: 0.75rem;
+  background: white;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s ease;
+}
+.group-row:hover { border-color: var(--accent); text-decoration: none; }
+.group-row .name {
+  font-size: 1.05rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.group-row .meta {
+  margin-top: 0.4rem;
+  color: var(--fg-muted);
+  font-size: 0.88rem;
+}
+
+.tag {
+  display: inline-block;
+  padding: 0.1em 0.55em;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-radius: 4px;
+  font-size: 0.78rem;
+  font-weight: 500;
+}
+.tag.muted { background: var(--bg-soft); color: var(--fg-muted); }
+.tag.error { background: var(--error-soft); color: var(--error); }
+.tag.warn { background: var(--warn-soft); color: var(--warn); }
+
+form .row { margin-bottom: 1rem; }
+form label { display: block; font-size: 0.9rem; color: var(--fg-muted); margin-bottom: 0.3rem; font-weight: 500; }
+form input[type="text"], form select, form textarea { width: 100%; }
+form textarea { min-height: 6rem; font-family: inherit; }
+form .actions { display: flex; gap: 0.6rem; align-items: center; }
+
+.kv { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.5rem 1rem; font-size: 0.92rem; }
+.kv > div:nth-child(odd) { color: var(--fg-muted); }
+.kv code { word-break: break-all; }
+
+hr.sep { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
+
+/* Skeleton loaders */
+@keyframes skeleton-shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-soft) 0%,
+    #ece8df 50%,
+    var(--bg-soft) 100%
+  );
+  background-size: 800px 100%;
+  animation: skeleton-shimmer 1.4s linear infinite;
+  border-radius: 6px;
+}
+.skeleton-list { list-style: none; padding: 0; margin: 0; }
+.skeleton-row { height: 4.5rem; margin-bottom: 0.75rem; }
+.skeleton-heading { height: 1.6rem; width: 40%; margin-bottom: 1rem; }
+.skeleton-line { height: 0.9rem; margin-bottom: 0.6rem; width: 100%; }
+
+/* Richer empty state */
+.empty-rich { text-align: left; padding: 2rem 1.75rem; background: white; border: 1px solid var(--border); }
+.empty-rich .empty-headline { font-size: 1.05rem; color: var(--fg); margin: 0 0 0.5rem; font-weight: 500; }
+.empty-paths {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0 0;
+  display: grid;
+  gap: 0.6rem;
+}
+.empty-paths li {
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  padding: 0.7rem 0.9rem;
+  border-radius: 8px;
+  font-size: 0.92rem;
+  color: var(--fg-muted);
+}
+.empty-paths li strong { color: var(--fg); margin-right: 0.4rem; font-weight: 500; }
+
+/* Scope grants explainer */
+.scope-grants {
+  margin-top: 0.75rem;
+  padding: 0.85rem 1rem;
+  background: var(--bg-soft);
+  border-left: 3px solid var(--accent);
+  border-radius: 4px;
+}
+.scope-grants-summary {
+  margin: 0 0 0.6rem;
+  font-size: 0.88rem;
+  color: var(--fg);
+}
+.scope-grants-tools {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+.scope-grants-tools > div:only-child { grid-column: 1 / -1; }
+.scope-grants-label {
+  display: block;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fg-muted);
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+.scope-grants-tools ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+.scope-grants-tools li code {
+  font-size: 0.78rem;
+  background: white;
+  border: 1px solid var(--border);
+  padding: 0.15em 0.45em;
+}
+.scope-grants-tools li.dim code {
+  background: transparent;
+  color: var(--fg-dim);
+  text-decoration: line-through;
+}
+.scope-grants-warn {
+  margin: 0.75rem 0 0;
+  font-size: 0.82rem;
+  color: var(--warn);
+}
+
+/* List header (with CTA on the right) */
+.list-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.list-header h2 { margin: 0; }
+
+/* Wizard step indicator */
+.wizard-steps {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.25rem;
+  display: flex;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+}
+.wizard-step {
+  padding: 0.4rem 0.8rem;
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+  border-radius: 999px;
+  border: 1px solid var(--border);
+}
+.wizard-step.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--accent);
+  font-weight: 500;
+}
+
+/* Wizard form bits */
+.wizard-toggle {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: var(--fg) !important;
+  font-size: 0.95rem !important;
+  font-weight: 400 !important;
+  margin: 0 !important;
+}
+.wizard-toggle input[type="checkbox"] {
+  width: auto;
+  margin: 0;
+}
+.wizard-folder-ok {
+  margin: 0.4rem 0 0;
+  font-size: 0.85rem;
+  color: var(--accent);
+}
+.wizard-folder-error {
+  margin: 0.4rem 0 0;
+  font-size: 0.85rem;
+  color: var(--error);
+}
+
+/* Status indicators */
+.status-dot {
+  display: inline-block;
+  width: 0.65rem;
+  height: 0.65rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.status-dot-alive {
+  background: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.status-dot-idle {
+  background: var(--fg-dim);
+}
+.status-dot-unknown {
+  background: transparent;
+  border: 1px dashed var(--fg-dim);
+}
+.status-text.alive { color: var(--accent); font-weight: 500; }
+.status-text.idle { color: var(--fg-muted); }
+
+.session-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.4rem;
+  font-size: 0.88rem;
+}
+.session-list li {
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  padding: 0.5rem 0.7rem;
+  border-radius: 6px;
+}
+
+/* Detail tabs (Overview / Activity on group detail page) */
+.detail-tabs {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.25rem;
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+}
+.detail-tab button {
+  background: transparent;
+  color: var(--fg-muted);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 0.5rem 1rem;
+  border-radius: 0;
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.detail-tab button:hover {
+  background: transparent;
+  color: var(--fg);
+}
+.detail-tab.active button {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+/* Activity feed */
+.activity-feed {
+  padding: 0;
+}
+.activity-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.activity-row {
+  display: flex;
+  gap: 0.85rem;
+  padding: 0.9rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+.activity-row:last-child {
+  border-bottom: 0;
+}
+.activity-icon {
+  flex-shrink: 0;
+  width: 1.1rem;
+  height: 1.1rem;
+  margin-top: 0.15rem;
+  color: var(--fg-muted);
+}
+.activity-icon-secret { color: var(--warn); }
+.activity-icon-mcp    { color: var(--accent); }
+.activity-icon-cmd    { color: var(--fg-muted); }
+.activity-body {
+  flex: 1;
+  min-width: 0;
+}
+.activity-headline {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+  font-size: 0.95rem;
+}
+.activity-kind-label {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fg-dim);
+  font-weight: 500;
+}
+.activity-cmd {
+  /* The command can be long — let it wrap rather than scroll horizontally. */
+  word-break: break-all;
+}
+.activity-cmd-output {
+  margin: 0.4rem 0 0;
+  padding: 0.55rem 0.75rem;
+  background: var(--bg-soft);
+  border-left: 2px solid var(--border);
+  border-radius: 4px;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 0.8rem;
+  color: var(--fg-muted);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 6em;
+  overflow: hidden;
+}
+.activity-summary {
+  margin-top: 0.25rem;
+  font-size: 0.88rem;
+  color: var(--fg-muted);
+}
+.activity-meta {
+  margin-top: 0.3rem;
+  font-size: 0.8rem;
+  color: var(--fg-dim);
+}
+.activity-more {
+  padding: 0.85rem 1.5rem;
+  margin: 0;
+  border-top: 1px solid var(--border);
+  font-size: 0.82rem;
+}
+
+/* Apps page — App configs section */
+.app-config-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+.app-config-row {
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.85rem 1rem;
+}
+.app-config-row-editing {
+  background: white;
+  border-color: var(--accent);
+}
+.app-config-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.app-config-blurb {
+  margin: 0.4rem 0 0.6rem;
+  font-size: 0.86rem;
+}
+.app-config-kv {
+  margin-top: 0.5rem;
+  font-size: 0.88rem;
+  grid-template-columns: 6.5rem 1fr;
+}
+.app-config-clientid {
+  word-break: break-all;
+  font-size: 0.78rem;
+}
+.app-scope-tag {
+  display: inline-block;
+  margin: 0 0.25rem 0.25rem 0;
+  padding: 0.05em 0.35em;
+  background: white;
+  border: 1px solid var(--border);
+  font-size: 0.74rem;
+}
+.app-config-form .row { margin-bottom: 0.85rem; }
+.app-config-form .actions { margin-top: 1rem; }
+
+/* Apps page — Connections section */
+.connections-list {
+  display: grid;
+  gap: 1.25rem;
+}
+.connections-group-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.6rem;
+}
+.connections-rows {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+.connection-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0.95rem;
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  transition: background 0.4s ease, border-color 0.4s ease;
+}
+.connection-row-flash {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+.connection-row-main { flex: 1; min-width: 0; }
+.connection-label {
+  font-size: 0.98rem;
+  font-weight: 500;
+}
+.connection-meta {
+  margin-top: 0.25rem;
+  font-size: 0.85rem;
+}
+.connection-scopes {
+  margin-top: 0.4rem;
+}
+.connect-cta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}

package/web/ui/src/test/setup.ts

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom/vitest';
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+// jsdom doesn't implement HTMLDialogElement.showModal/close — the SecretsList
+// edit drawer + the new VaultDetail detach modal both use native <dialog>.
+// Polyfill enough for tests to render without throwing.
+if (!HTMLDialogElement.prototype.showModal) {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.setAttribute('open', '');
+  };
+}
+if (!HTMLDialogElement.prototype.close) {
+  HTMLDialogElement.prototype.close = function close() {
+    this.removeAttribute('open');
+    this.dispatchEvent(new Event('close'));
+  };
+}

package/web/ui/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly BASE_URL: string;
+  readonly VITE_PARACHUTE_AGENT_WEB_SERVER_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/web/ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/web/ui/vite.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// Per parachute-patterns/patterns/mount-path-convention.md: the canonical
+// production deployment is under the Parachute hub at `/agent/`, so the
+// build default IS the canonical mount. Override with `VITE_BASE_PATH=/`
+// for the legacy stand-alone shape (UI served at the origin root). The
+// previous default of `/` silently shipped root-relative asset URLs that
+// 404'd under the hub mount — see #25.
+const basePath = normalizeBase(process.env.VITE_BASE_PATH ?? "/agent/");
+
+function normalizeBase(input: string): string {
+  let b = input.startsWith("/") ? input : `/${input}`;
+  if (!b.endsWith("/")) b += "/";
+  return b;
+}
+
+export default defineConfig({
+  base: basePath,
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      // The dev server now serves under `/agent/` to match the production
+      // mount; the proxy strips that prefix when forwarding to the Node
+      // backend (which sees bare `/api/*` paths).
+      "/agent/api": {
+        target: process.env.PARACHUTE_AGENT_WEB_SERVER_URL ?? "http://127.0.0.1:1944",
+        changeOrigin: true,
+        rewrite: (p) => p.replace(/^\/agent/, ""),
+      },
+    },
+  },
+});

package/web/ui/vitest.config.ts

@@ -0,0 +1,25 @@
+/**
+ * Vitest config for the paraclaw web UI.
+ *
+ * Kept separate from vite.config.ts so the production bundle config (mount
+ * path, dev proxy) doesn't co-mingle with test concerns. jsdom is the only
+ * environment that loads the React rendering paths under @testing-library —
+ * happy-dom skips parts of <dialog> that the vault detail page uses.
+ *
+ * `setupFiles` extends `expect` with @testing-library/jest-dom matchers and
+ * resets every test's localStorage / fetch mocks so the hub-OAuth state
+ * from one test doesn't leak into the next.
+ */
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    css: false,
+    restoreMocks: true,
+    clearMocks: true,
+  },
+});