Add React UI with Vite

Dashboard, agents, goals, issues, and projects pages with sidebar navigation. API client layer, custom hooks, and shared layout components. Built with Vite and TypeScript. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 13:32:04 -06:00
parent c9d7cbfe44
commit c3d82ed857
25 changed files with 482 additions and 0 deletions
--- a/ui/index.html
+++ b/ui/index.html
@@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Paperclip</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/ui/package.json
+++ b/ui/package.json
@@ -0,0 +1,28 @@
 {
  "name": "@paperclip/ui",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
    "typecheck": "tsc -b"
  },
  "dependencies": {
    "@paperclip/shared": "workspace:*",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.5"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.0.7",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@vitejs/plugin-react": "^4.3.4",
    "tailwindcss": "^4.0.7",
    "typescript": "^5.7.3",
    "vite": "^6.1.0",
    "vitest": "^3.0.5"
  }
 }
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -0,0 +1,21 @@
 import { Routes, Route } from "react-router-dom";
 import { Layout } from "./components/Layout";
 import { Dashboard } from "./pages/Dashboard";
 import { Agents } from "./pages/Agents";
 import { Projects } from "./pages/Projects";
 import { Issues } from "./pages/Issues";
 import { Goals } from "./pages/Goals";
 export function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route index element={<Dashboard />} />
        <Route path="agents" element={<Agents />} />
        <Route path="projects" element={<Projects />} />
        <Route path="issues" element={<Issues />} />
        <Route path="goals" element={<Goals />} />
      </Route>
    </Routes>
  );
 }
--- a/ui/src/api/agents.ts
+++ b/ui/src/api/agents.ts
@@ -0,0 +1,10 @@
 import type { Agent } from "@paperclip/shared";
 import { api } from "./client";
 export const agentsApi = {
  list: () => api.get<Agent[]>("/agents"),
  get: (id: string) => api.get<Agent>(`/agents/${id}`),
  create: (data: Partial<Agent>) => api.post<Agent>("/agents", data),
  update: (id: string, data: Partial<Agent>) => api.patch<Agent>(`/agents/${id}`, data),
  remove: (id: string) => api.delete<Agent>(`/agents/${id}`),
 };
--- a/ui/src/api/client.ts
+++ b/ui/src/api/client.ts
@@ -0,0 +1,22 @@
 const BASE = "/api";
 async function request<T>(path: string, init?: RequestInit): Promise<T> {
  const res = await fetch(`${BASE}${path}`, {
    headers: { "Content-Type": "application/json" },
    ...init,
  });
  if (!res.ok) {
    const body = await res.json().catch(() => null);
    throw new Error(body?.error ?? `Request failed: ${res.status}`);
  }
  return res.json();
 }
 export const api = {
  get: <T>(path: string) => request<T>(path),
  post: <T>(path: string, body: unknown) =>
    request<T>(path, { method: "POST", body: JSON.stringify(body) }),
  patch: <T>(path: string, body: unknown) =>
    request<T>(path, { method: "PATCH", body: JSON.stringify(body) }),
  delete: <T>(path: string) => request<T>(path, { method: "DELETE" }),
 };
--- a/ui/src/api/goals.ts
+++ b/ui/src/api/goals.ts
@@ -0,0 +1,10 @@
 import type { Goal } from "@paperclip/shared";
 import { api } from "./client";
 export const goalsApi = {
  list: () => api.get<Goal[]>("/goals"),
  get: (id: string) => api.get<Goal>(`/goals/${id}`),
  create: (data: Partial<Goal>) => api.post<Goal>("/goals", data),
  update: (id: string, data: Partial<Goal>) => api.patch<Goal>(`/goals/${id}`, data),
  remove: (id: string) => api.delete<Goal>(`/goals/${id}`),
 };
--- a/ui/src/api/index.ts
+++ b/ui/src/api/index.ts
@@ -0,0 +1,5 @@
 export { api } from "./client";
 export { agentsApi } from "./agents";
 export { projectsApi } from "./projects";
 export { issuesApi } from "./issues";
 export { goalsApi } from "./goals";
--- a/ui/src/api/issues.ts
+++ b/ui/src/api/issues.ts
@@ -0,0 +1,10 @@
 import type { Issue } from "@paperclip/shared";
 import { api } from "./client";
 export const issuesApi = {
  list: () => api.get<Issue[]>("/issues"),
  get: (id: string) => api.get<Issue>(`/issues/${id}`),
  create: (data: Partial<Issue>) => api.post<Issue>("/issues", data),
  update: (id: string, data: Partial<Issue>) => api.patch<Issue>(`/issues/${id}`, data),
  remove: (id: string) => api.delete<Issue>(`/issues/${id}`),
 };
--- a/ui/src/api/projects.ts
+++ b/ui/src/api/projects.ts
@@ -0,0 +1,10 @@
 import type { Project } from "@paperclip/shared";
 import { api } from "./client";
 export const projectsApi = {
  list: () => api.get<Project[]>("/projects"),
  get: (id: string) => api.get<Project>(`/projects/${id}`),
  create: (data: Partial<Project>) => api.post<Project>("/projects", data),
  update: (id: string, data: Partial<Project>) => api.patch<Project>(`/projects/${id}`, data),
  remove: (id: string) => api.delete<Project>(`/projects/${id}`),
 };
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -0,0 +1,13 @@
 import { Outlet } from "react-router-dom";
 import { Sidebar } from "./Sidebar";
 export function Layout() {
  return (
    <div className="flex h-screen bg-gray-50 text-gray-900">
      <Sidebar />
      <main className="flex-1 overflow-auto p-8">
        <Outlet />
      </main>
    </div>
  );
 }
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -0,0 +1,37 @@
 import { NavLink } from "react-router-dom";
 import { cn } from "../lib/utils";
 const links = [
  { to: "/", label: "Dashboard" },
  { to: "/agents", label: "Agents" },
  { to: "/projects", label: "Projects" },
  { to: "/issues", label: "Issues" },
  { to: "/goals", label: "Goals" },
 ];
 export function Sidebar() {
  return (
    <aside className="w-56 border-r border-gray-200 bg-white p-4 flex flex-col gap-1">
      <h1 className="text-lg font-bold mb-6 px-3">Paperclip</h1>
      <nav className="flex flex-col gap-1">
        {links.map((link) => (
          <NavLink
            key={link.to}
            to={link.to}
            end={link.to === "/"}
            className={({ isActive }) =>
              cn(
                "px-3 py-2 rounded-md text-sm font-medium transition-colors",
                isActive
                  ? "bg-gray-100 text-gray-900"
                  : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
              )
            }
          >
            {link.label}
          </NavLink>
        ))}
      </nav>
    </aside>
  );
 }
--- a/ui/src/components/StatusBadge.tsx
+++ b/ui/src/components/StatusBadge.tsx
@@ -0,0 +1,27 @@
 import { cn } from "../lib/utils";
 const statusColors: Record<string, string> = {
  active: "bg-green-100 text-green-800",
  idle: "bg-yellow-100 text-yellow-800",
  offline: "bg-gray-100 text-gray-600",
  error: "bg-red-100 text-red-800",
  backlog: "bg-gray-100 text-gray-600",
  todo: "bg-blue-100 text-blue-800",
  in_progress: "bg-indigo-100 text-indigo-800",
  in_review: "bg-purple-100 text-purple-800",
  done: "bg-green-100 text-green-800",
  cancelled: "bg-gray-100 text-gray-500",
 };
 export function StatusBadge({ status }: { status: string }) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
        statusColors[status] ?? "bg-gray-100 text-gray-600"
      )}
    >
      {status.replace("_", " ")}
    </span>
  );
 }
--- a/ui/src/hooks/useAgents.ts
+++ b/ui/src/hooks/useAgents.ts
@@ -0,0 +1,8 @@
 import { useCallback } from "react";
 import { agentsApi } from "../api/agents";
 import { useApi } from "./useApi";
 export function useAgents() {
  const fetcher = useCallback(() => agentsApi.list(), []);
  return useApi(fetcher);
 }
--- a/ui/src/hooks/useApi.ts
+++ b/ui/src/hooks/useApi.ts
@@ -0,0 +1,21 @@
 import { useState, useEffect, useCallback } from "react";
 export function useApi<T>(fetcher: () => Promise<T>) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [loading, setLoading] = useState(true);
  const load = useCallback(() => {
    setLoading(true);
    fetcher()
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [fetcher]);
  useEffect(() => {
    load();
  }, [load]);
  return { data, error, loading, reload: load };
 }
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -0,0 +1 @@
@import "tailwindcss";
--- a/ui/src/lib/utils.ts
+++ b/ui/src/lib/utils.ts
@@ -0,0 +1,15 @@
 export function cn(...classes: (string | false | null | undefined)[]) {
  return classes.filter(Boolean).join(" ");
 }
 export function formatCents(cents: number): string {
  return `$${(cents / 100).toFixed(2)}`;
 }
 export function formatDate(date: Date | string): string {
  return new Date(date).toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
 }
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -0,0 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { App } from "./App";
 import "./index.css";
 createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
 );
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@@ -0,0 +1,36 @@
 import { useAgents } from "../hooks/useAgents";
 import { StatusBadge } from "../components/StatusBadge";
 import { formatCents } from "../lib/utils";
 export function Agents() {
  const { data: agents, loading, error } = useAgents();
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Agents</h2>
      {loading && <p className="text-gray-500">Loading...</p>}
      {error && <p className="text-red-600">{error.message}</p>}
      {agents && agents.length === 0 && <p className="text-gray-500">No agents yet.</p>}
      {agents && agents.length > 0 && (
        <div className="grid gap-4">
          {agents.map((agent) => (
            <div key={agent.id} className="bg-white rounded-lg border border-gray-200 p-4">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-semibold">{agent.name}</h3>
                  <p className="text-sm text-gray-500">{agent.role}</p>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-sm text-gray-500">
                    {formatCents(agent.spentCents)} / {formatCents(agent.budgetCents)}
                  </span>
                  <StatusBadge status={agent.status} />
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
 }
--- a/ui/src/pages/Dashboard.tsx
+++ b/ui/src/pages/Dashboard.tsx
@@ -0,0 +1,8 @@
 export function Dashboard() {
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Dashboard</h2>
      <p className="text-gray-600">Welcome to Paperclip. Select a section from the sidebar.</p>
    </div>
  );
 }
--- a/ui/src/pages/Goals.tsx
+++ b/ui/src/pages/Goals.tsx
@@ -0,0 +1,49 @@
 import { useCallback } from "react";
 import { goalsApi } from "../api/goals";
 import { useApi } from "../hooks/useApi";
 import { cn } from "../lib/utils";
 const levelColors: Record<string, string> = {
  company: "bg-purple-100 text-purple-800",
  team: "bg-blue-100 text-blue-800",
  agent: "bg-indigo-100 text-indigo-800",
  task: "bg-gray-100 text-gray-600",
 };
 export function Goals() {
  const fetcher = useCallback(() => goalsApi.list(), []);
  const { data: goals, loading, error } = useApi(fetcher);
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Goals</h2>
      {loading && <p className="text-gray-500">Loading...</p>}
      {error && <p className="text-red-600">{error.message}</p>}
      {goals && goals.length === 0 && <p className="text-gray-500">No goals yet.</p>}
      {goals && goals.length > 0 && (
        <div className="grid gap-4">
          {goals.map((goal) => (
            <div key={goal.id} className="bg-white rounded-lg border border-gray-200 p-4">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-semibold">{goal.title}</h3>
                  {goal.description && (
                    <p className="text-sm text-gray-500 mt-1">{goal.description}</p>
                  )}
                </div>
                <span
                  className={cn(
                    "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
                    levelColors[goal.level] ?? "bg-gray-100 text-gray-600"
                  )}
                >
                  {goal.level}
                </span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
 }
--- a/ui/src/pages/Issues.tsx
+++ b/ui/src/pages/Issues.tsx
@@ -0,0 +1,55 @@
 import { useCallback } from "react";
 import { issuesApi } from "../api/issues";
 import { useApi } from "../hooks/useApi";
 import { StatusBadge } from "../components/StatusBadge";
 import { cn } from "../lib/utils";
 const priorityColors: Record<string, string> = {
  critical: "text-red-700 bg-red-50",
  high: "text-orange-700 bg-orange-50",
  medium: "text-yellow-700 bg-yellow-50",
  low: "text-gray-600 bg-gray-50",
 };
 export function Issues() {
  const fetcher = useCallback(() => issuesApi.list(), []);
  const { data: issues, loading, error } = useApi(fetcher);
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Issues</h2>
      {loading && <p className="text-gray-500">Loading...</p>}
      {error && <p className="text-red-600">{error.message}</p>}
      {issues && issues.length === 0 && <p className="text-gray-500">No issues yet.</p>}
      {issues && issues.length > 0 && (
        <div className="grid gap-4">
          {issues.map((issue) => (
            <div key={issue.id} className="bg-white rounded-lg border border-gray-200 p-4">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-semibold">{issue.title}</h3>
                  {issue.description && (
                    <p className="text-sm text-gray-500 mt-1 line-clamp-1">
                      {issue.description}
                    </p>
                  )}
                </div>
                <div className="flex items-center gap-3">
                  <span
                    className={cn(
                      "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
                      priorityColors[issue.priority] ?? "text-gray-600 bg-gray-50"
                    )}
                  >
                    {issue.priority}
                  </span>
                  <StatusBadge status={issue.status} />
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
 }
--- a/ui/src/pages/Projects.tsx
+++ b/ui/src/pages/Projects.tsx
@@ -0,0 +1,35 @@
 import { useCallback } from "react";
 import { projectsApi } from "../api/projects";
 import { useApi } from "../hooks/useApi";
 import { formatDate } from "../lib/utils";
 export function Projects() {
  const fetcher = useCallback(() => projectsApi.list(), []);
  const { data: projects, loading, error } = useApi(fetcher);
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Projects</h2>
      {loading && <p className="text-gray-500">Loading...</p>}
      {error && <p className="text-red-600">{error.message}</p>}
      {projects && projects.length === 0 && <p className="text-gray-500">No projects yet.</p>}
      {projects && projects.length > 0 && (
        <div className="grid gap-4">
          {projects.map((project) => (
            <div key={project.id} className="bg-white rounded-lg border border-gray-200 p-4">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-semibold">{project.name}</h3>
                  {project.description && (
                    <p className="text-sm text-gray-500 mt-1">{project.description}</p>
                  )}
                </div>
                <span className="text-sm text-gray-400">{formatDate(project.createdAt)}</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
 }
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -0,0 +1,16 @@
 {
  "compilerOptions": {
    "target": "ES2023",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
 }
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -0,0 +1,13 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 5173,
    proxy: {
      "/api": "http://localhost:3100",
    },
  },
 });
--- a/ui/vitest.config.ts
+++ b/ui/vitest.config.ts
@@ -0,0 +1,7 @@
 import { defineConfig } from "vitest/config";
 export default defineConfig({
  test: {
    environment: "jsdom",
  },
 });