@openparachute/agent 0.1.2 → 0.2.0

package/web/ui/src/styles.css

@@ -1,608 +0,0 @@
-: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

@@ -1,23 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/// <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/vite.config.ts

@@ -1,34 +0,0 @@
-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

@@ -1,25 +0,0 @@
-/**
- * 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,
-  },
-});