code-coordinator 0.5.46__py3-none-any.whl

coord/dashboard/webapp/src/components/__tests__/Terminal.test.tsx

@@ -0,0 +1,504 @@
+/**
+ * Component tests for Terminal — the live take-over pane for a `coord-*`
+ * session (#1068). `WebSocket` is mocked end-to-end (no real network/PTY);
+ * this covers mount -> connect -> render -> teardown per the issue's
+ * acceptance criterion. Full browser/terminal-protocol coverage (raw mode,
+ * SGR mouse) is out of `TestBackend`-equivalent reach here and is the
+ * Playwright E2E issue in group C.
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { render, screen, waitFor, act, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import Terminal from '@/components/Terminal'
+
+// ── xterm.js constructor spy ─────────────────────────────────────────────────
+// Wraps @xterm/xterm's Terminal in a transparent subclass that captures:
+//   • the options object passed to the constructor (for convertEol tests)
+//   • every onResize handler registered by the component (so tests can
+//     trigger the callback with arbitrary {cols, rows} without needing a
+//     real layout engine)
+//
+// vi.hoisted() runs before vi.mock() hoisting, so the reference is available
+// inside the factory.  The wrapper calls super() unconditionally, so all real
+// xterm functionality (text rendering, etc.) still works for the existing tests.
+const xtermCapture = vi.hoisted(() => ({
+  lastOptions: undefined as Record<string, unknown> | undefined,
+  onResizeHandlers: [] as Array<(data: { cols: number; rows: number }) => void>,
+}))
+
+vi.mock('@xterm/xterm', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@xterm/xterm')>()
+  return {
+    ...actual,
+    Terminal: class MockTerminal extends actual.Terminal {
+      constructor(opts: ConstructorParameters<typeof actual.Terminal>[0]) {
+        super(opts)
+        xtermCapture.lastOptions = opts as Record<string, unknown>
+        // `onResize` is a getter-only accessor on the prototype (configurable:
+        // true, no setter).  Direct assignment throws "has only a getter".
+        // Shadow it with an OWN data property on this instance so the component
+        // can subscribe via `term.onResize(handler)` while we capture the handler.
+        // `orig` is the IEvent function returned by the getter — it closes over
+        // xterm's internal EventEmitter, so it doesn't need explicit `this` binding.
+        const orig = (this as unknown as { onResize: (h: (d: { cols: number; rows: number }) => void) => { dispose(): void } }).onResize
+        Object.defineProperty(this, 'onResize', {
+          value: (handler: (data: { cols: number; rows: number }) => void): { dispose(): void } => {
+            xtermCapture.onResizeHandlers.push(handler)
+            return orig(handler)
+          },
+          writable: true,
+          configurable: true,
+          enumerable: true,
+        })
+      }
+    },
+  }
+})
+
+// ── Fake WebSocket ───────────────────────────────────────────────────────────
+
+class FakeWebSocket {
+  static readonly CONNECTING = 0
+  static readonly OPEN = 1
+  static readonly CLOSING = 2
+  static readonly CLOSED = 3
+  static instances: FakeWebSocket[] = []
+
+  url: string
+  readyState = FakeWebSocket.CONNECTING
+  binaryType = 'blob'
+  sent: Array<string | ArrayBuffer | Uint8Array> = []
+  closed = false
+  onopen: (() => void) | null = null
+  onclose: ((event: { code: number }) => void) | null = null
+  onerror: (() => void) | null = null
+  onmessage: ((event: { data: unknown }) => void) | null = null
+
+  constructor(url: string) {
+    this.url = url
+    FakeWebSocket.instances.push(this)
+  }
+
+  send(data: string | ArrayBuffer | Uint8Array) {
+    this.sent.push(data)
+  }
+
+  // A locally-initiated close (the ✕ button / unmount calling ws.close())
+  // -- code defaults to the normal-closure value real browsers use.
+  close(code = 1000) {
+    this.closed = true
+    this.readyState = FakeWebSocket.CLOSED
+    this.onclose?.({ code })
+  }
+
+  // ── Test helpers, driving the fake from the "server" side. Wrapped in
+  // act() since they synchronously trigger a React state update
+  // (setState('open'/'reconnecting'/'ended')) outside of React's own event
+  // handling. ──
+  simulateOpen() {
+    act(() => {
+      this.readyState = FakeWebSocket.OPEN
+      this.onopen?.()
+    })
+  }
+
+  simulateMessage(data: unknown) {
+    act(() => {
+      this.onmessage?.({ data })
+    })
+  }
+
+  // Simulates the "server"/network dropping the connection out from under
+  // the client -- e.g. a transient network drop (no particular code, or an
+  // abnormal-closure-ish one) vs. the bridge's session-gone signal (4404).
+  simulateClose(code: number) {
+    act(() => {
+      this.closed = true
+      this.readyState = FakeWebSocket.CLOSED
+      this.onclose?.({ code })
+    })
+  }
+}
+
+function renderTerminal(sessionId: string) {
+  return render(
+    <MemoryRouter initialEntries={[`/terminal/${sessionId}`]}>
+      <Routes>
+        <Route path="/terminal/:sessionId" element={<Terminal />} />
+      </Routes>
+    </MemoryRouter>,
+  )
+}
+
+beforeEach(() => {
+  FakeWebSocket.instances = []
+  vi.stubGlobal('WebSocket', FakeWebSocket)
+  // Reset xterm capture state so tests don't see handlers/options from a
+  // previous test's Terminal instance.
+  xtermCapture.lastOptions = undefined
+  xtermCapture.onResizeHandlers.length = 0
+})
+
+describe('Terminal', () => {
+  // ── Constructor options ────────────────────────────────────────────────────
+
+  it('constructs xterm.js with convertEol: false so tmux CR+LF is not double-converted', () => {
+    // tmux sends real CR+LF (\r\n) sequences.  xterm.js's convertEol:true
+    // converts the \r to a second \n, producing double newlines.  We must
+    // pass convertEol:false and let tmux control line endings.
+    renderTerminal('work-2')
+    expect(xtermCapture.lastOptions?.convertEol).toBe(false)
+  })
+
+  // ── Resize frame emission and deduplication ────────────────────────────────
+
+  it('emits a resize WS frame with the new cols/rows when the terminal size changes', () => {
+    // This exercises the term.onResize → sendResize path that fires when
+    // fit.fit() computes a new terminal size (e.g. after a viewport change).
+    // In jsdom, fit.fit() can't compute real sizes, so we trigger the handler
+    // directly via the captured spy — simulating what xterm fires when the
+    // real DOM has a non-zero layout.
+    renderTerminal('work-2')
+    const ws = FakeWebSocket.instances[0]
+    ws.simulateOpen()
+
+    // After open, lastCols/lastRows are whatever the terminal reported
+    // (80×24 in jsdom).  Trigger onResize with *different* dims so the
+    // dedup guard allows the frame through.
+    act(() => {
+      xtermCapture.onResizeHandlers.forEach((h) => h({ cols: 100, rows: 30 }))
+    })
+
+    const resizeFrames = ws.sent.filter(
+      (f): f is string => typeof f === 'string' && f.includes('"type":"resize"'),
+    )
+    // At minimum: one from onopen, one from the simulated onResize
+    expect(resizeFrames.length).toBeGreaterThanOrEqual(2)
+    const lastFrame = JSON.parse(resizeFrames[resizeFrames.length - 1]) as Record<
+      string,
+      unknown
+    >
+    expect(lastFrame).toMatchObject({ type: 'resize', cols: 100, rows: 30 })
+  })
+
+  it('dedup guard: identical cols/rows after open do not produce a second resize WS frame', () => {
+    // If the layout event fires but the terminal size hasn't changed (common
+    // during rapid window-resize events that don't cross a character-cell
+    // boundary), no duplicate frame should be sent — the bridge would call
+    // TIOCSWINSZ with the same values, and tmux would noop anyway.
+    renderTerminal('work-2')
+    const ws = FakeWebSocket.instances[0]
+    ws.simulateOpen()
+
+    const countAfterOpen = ws.sent.filter(
+      (f): f is string => typeof f === 'string' && f.includes('"type":"resize"'),
+    ).length
+
+    // Trigger onResize with the same size the terminal reported on open
+    // (80×24 is xterm.js's default when jsdom has no real layout).
+    act(() => {
+      xtermCapture.onResizeHandlers.forEach((h) => h({ cols: 80, rows: 24 }))
+    })
+
+    const countAfterDup = ws.sent.filter(
+      (f): f is string => typeof f === 'string' && f.includes('"type":"resize"'),
+    ).length
+    expect(countAfterDup).toBe(countAfterOpen)
+  })
+
+  it('mounts and connects a WebSocket to /ws/terminal/{sessionId}', () => {
+    renderTerminal('work-2')
+
+    expect(screen.getByTestId('xterm-container')).toBeInTheDocument()
+    expect(FakeWebSocket.instances).toHaveLength(1)
+    expect(FakeWebSocket.instances[0].url).toContain('/ws/terminal/work-2')
+  })
+
+  it('sends a resize control frame once the socket opens', () => {
+    renderTerminal('work-2')
+    const ws = FakeWebSocket.instances[0]
+
+    ws.simulateOpen()
+
+    const resizeFrame = ws.sent.find(
+      (frame) => typeof frame === 'string' && frame.includes('"type":"resize"'),
+    )
+    expect(resizeFrame).toBeDefined()
+  })
+
+  it('renders PTY output pushed over the WebSocket', async () => {
+    renderTerminal('work-2')
+    const ws = FakeWebSocket.instances[0]
+    ws.simulateOpen()
+
+    ws.simulateMessage(new TextEncoder().encode('hello from pty').buffer)
+
+    await waitFor(() =>
+      expect(screen.getByTestId('xterm-container')).toHaveTextContent('hello from pty'),
+    )
+  })
+
+  it('closes the WebSocket (hitting the bridge detach path) when the close control is pressed', async () => {
+    renderTerminal('work-2')
+    const ws = FakeWebSocket.instances[0]
+    ws.simulateOpen()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Close terminal' }))
+
+    expect(ws.closed).toBe(true)
+  })
+
+  it('closes the WebSocket on unmount', () => {
+    const { unmount } = renderTerminal('work-2')
+    const ws = FakeWebSocket.instances[0]
+    ws.simulateOpen()
+
+    unmount()
+
+    expect(ws.closed).toBe(true)
+  })
+
+  it('wires MobileKeyBar soft keys to the same WebSocket write path as typed input (#1070)', async () => {
+    renderTerminal('work-2')
+    const ws = FakeWebSocket.instances[0]
+    ws.simulateOpen()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Ctrl-C' }))
+
+    // `TextEncoder` (used by both `term.onData` and `MobileKeyBar`'s
+    // wiring) returns a Uint8Array from the environment's own realm, which
+    // isn't always `instanceof` the test file's `Uint8Array` under jsdom --
+    // decode it back instead of asserting the constructor identity.
+    const sent = ws.sent[ws.sent.length - 1] as ArrayBufferLike
+    expect(new TextDecoder().decode(sent)).toBe('\x03')
+  })
+
+  it('does not write to a WebSocket that is not open yet', async () => {
+    renderTerminal('work-2')
+    const ws = FakeWebSocket.instances[0]
+    // Still 'connecting' -- no simulateOpen().
+
+    await userEvent.click(screen.getByRole('button', { name: 'Escape' }))
+
+    expect(ws.sent).toHaveLength(0)
+  })
+
+  // ── #1071: reconnect / detach resilience ──────────────────────────────
+
+  describe('reconnect resilience (#1071)', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('reconnects with backoff after an unexpected drop and resumes streaming', async () => {
+      renderTerminal('work-2')
+      const first = FakeWebSocket.instances[0]
+      first.simulateOpen()
+
+      // Abnormal closure -- e.g. wifi<->cellular handoff, tab backgrounded.
+      first.simulateClose(1006)
+
+      expect(screen.getByText(/work-2/)).toHaveTextContent('Reconnecting…')
+      expect(FakeWebSocket.instances).toHaveLength(1)
+
+      // First backoff step (1000ms) elapses -- a fresh WebSocket opens to
+      // the *same* session_id.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+
+      expect(FakeWebSocket.instances).toHaveLength(2)
+      const second = FakeWebSocket.instances[1]
+      expect(second.url).toContain('/ws/terminal/work-2')
+
+      second.simulateOpen()
+      expect(screen.getByText(/work-2/)).toHaveTextContent('Live')
+
+      second.simulateMessage(new TextEncoder().encode('resumed').buffer)
+      // xterm.js flushes writes via its own internal queue (a timer under
+      // the hood), so nudge fake time forward to let it drain -- `waitFor`'s
+      // poll loop also relies on real timers and would stall here.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(50)
+      })
+      expect(screen.getByTestId('xterm-container')).toHaveTextContent('resumed')
+    })
+
+    it('backs off exponentially across repeated drops', async () => {
+      renderTerminal('work-2')
+      FakeWebSocket.instances[0].simulateOpen()
+      FakeWebSocket.instances[0].simulateClose(1006)
+
+      // First retry fires at 1000ms...
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(2)
+
+      // ...and drops again without ever reaching 'open' (attempt count
+      // keeps climbing), so the *next* retry waits 2000ms, not 1000ms.
+      FakeWebSocket.instances[1].simulateClose(1006)
+
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(2) // not yet -- only 1s of a 2s wait
+
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(3)
+    })
+
+    it('keeps climbing backoff when connections flap open-then-immediately-closed (live bug: accept() succeeds, attach fails right after)', async () => {
+      // Reproduces the real-backend failure found in live smoke testing:
+      // the bridge accept()s the WebSocket (so the client's `onopen` fires)
+      // and then closes it almost immediately (e.g. the tmux attach failing
+      // right after accept) -- as opposed to every other test in this file,
+      // which either never reaches 'open' before the next close or stays
+      // open indefinitely. A naive "reset the counter on every onopen"
+      // implementation never backs off here since each cycle reopens and
+      // immediately resets to attempt 0 before closing again.
+      renderTerminal('work-2')
+
+      const first = FakeWebSocket.instances[0]
+      first.simulateOpen()
+      first.simulateClose(1011) // opened, then closed right away -- no time elapses
+
+      // First retry still fires at the base delay (1000ms) -- this is
+      // attempt 0.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(2)
+
+      const second = FakeWebSocket.instances[1]
+      second.simulateOpen()
+      second.simulateClose(1011) // same flap: open then immediately closed
+
+      // If backoff had wrongly reset on `onopen`, this retry would also
+      // fire at 1000ms. Instead it must wait the full 2000ms (attempt 1).
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(2) // not yet -- only 1s of a 2s wait
+
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(3)
+    })
+
+    it('resets backoff once a connection stays open long enough to be a genuine, working attach', async () => {
+      renderTerminal('work-2')
+
+      // Two rapid flaps climb the backoff ladder to attempt 2 (4000ms next).
+      const first = FakeWebSocket.instances[0]
+      first.simulateOpen()
+      first.simulateClose(1006)
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      const second = FakeWebSocket.instances[1]
+      second.simulateOpen()
+      second.simulateClose(1006)
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(3)
+
+      // This time the connection stays open past the stability threshold
+      // before dropping -- a genuine, working session that later hit a
+      // transient drop, not a flap.
+      const third = FakeWebSocket.instances[2]
+      third.simulateOpen()
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2000)
+      })
+      third.simulateClose(1006)
+
+      // Backoff reset to the base delay (1000ms), not the 8000ms the
+      // unreset ladder (attempt 3) would have demanded.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(4)
+    })
+
+    // The bridge accept()s the handshake and *then* closes 4404 -- it cannot
+    // deliver an application close code any other way (closing pre-accept
+    // aborts the upgrade and reaches the browser as a bare 403 with no code
+    // at all, which is exactly the live #1071 bug: every unknown session
+    // looked like a transient drop and retried forever). So this test opens
+    // first, mirroring the real server. The server half of that contract is
+    // pinned in tests/test_dashboard_terminal.py::
+    // test_unknown_session_accepts_before_closing_4404 -- the two must stay
+    // in sync: if the bridge ever regresses to closing pre-accept, this
+    // component silently falls back into the infinite-retry branch below.
+    it('shows a session-ended state and never retries when the bridge reports the session is gone (4404)', async () => {
+      renderTerminal('work-2')
+      const ws = FakeWebSocket.instances[0]
+      ws.simulateOpen()
+
+      ws.simulateClose(4404)
+
+      expect(screen.getByText(/work-2/)).toHaveTextContent('Session ended')
+      expect(screen.getByRole('status')).toHaveTextContent('Session ended')
+
+      // No reconnect attempt now or ever, however long we wait.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(60_000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(1)
+    })
+
+    it('treats a codeless handshake rejection as transient and keeps retrying', async () => {
+      // A rejected *upgrade* (HTTP 403 -- e.g. the bridge closing pre-accept,
+      // or a proxy refusing the connection) never fires `open` and surfaces
+      // as an abnormal-closure 1006 with no application code. That is
+      // indistinguishable from a network drop from here, so the only correct
+      // behaviour is to retry with backoff -- which is precisely why the
+      // server must accept() before it can say "session gone" (4404) and be
+      // believed. This test documents the fallback the server-side fix
+      // exists to keep us out of.
+      renderTerminal('gone-forever')
+      const ws = FakeWebSocket.instances[0]
+
+      // No simulateOpen() -- the handshake itself was rejected.
+      ws.simulateClose(1006)
+
+      // Header label only -- the role="status" overlay is exclusive to the
+      // terminal 'ended' state, which this path must NOT reach.
+      expect(screen.getByText(/gone-forever/)).toHaveTextContent('Reconnecting…')
+      expect(screen.queryByRole('status')).toBeNull()
+
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(2)
+    })
+
+    it('does not reconnect after a deliberate close (close button)', async () => {
+      renderTerminal('work-2')
+      const ws = FakeWebSocket.instances[0]
+      ws.simulateOpen()
+
+      // fireEvent, not userEvent -- userEvent's own internal delays use
+      // real timers under the hood and would hang against vi.useFakeTimers().
+      act(() => {
+        fireEvent.click(screen.getByRole('button', { name: 'Close terminal' }))
+      })
+      expect(ws.closed).toBe(true)
+
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(60_000)
+      })
+      expect(FakeWebSocket.instances).toHaveLength(1)
+    })
+  })
+})

coord/dashboard/webapp/src/components/ui/badge.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+// eslint-disable-next-line react-refresh/only-export-components -- cva() returns a function, not the primitive constant `allowConstantExport` permits, so this still needs the escape hatch even though it never re-renders.
+export const badgeVariants = cva(
+  'inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        outline: 'border-line-strong text-foreground',
+        // The mocks never fill a badge solid with a status colour and put
+        // white/black text on top -- at these desaturated, mid-lightness
+        // state colours that fails contrast in one theme or the other (see
+        // src/index.css). Instead they use a translucent "wash" of the
+        // colour as the background and the solid colour as the text, same
+        // as `.tag.ok` / `.tag.warn` / `.tag.bad` and the stage-verdict
+        // text in docs/mocks/web/*.html -- and it happens to read AA-clean
+        // in both themes for free.
+        success: 'border-transparent bg-pass-wash text-pass',
+        warning: 'border-transparent bg-attn-wash text-attn',
+        destructive: 'border-transparent bg-fail-wash text-fail',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge }

coord/dashboard/webapp/src/components/ui/button.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+// eslint-disable-next-line react-refresh/only-export-components -- cva() returns a function, not the primitive constant `allowConstantExport` permits, so this still needs the escape hatch even though it never re-renders.
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      // "default" is the mocks' `.btn-primary` (solid brand cyan — reserve
+      // for the one primary action, e.g. "Drive"). "outline" is the mocks'
+      // base `.btn` (neutral border, e.g. "Attach") and is what most
+      // toolbar actions should use.
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:opacity-90',
+        outline: 'border border-line-strong text-foreground hover:bg-secondary',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-surface-3',
+        ghost: 'text-foreground hover:bg-secondary',
+        destructive: 'bg-destructive text-destructive-foreground hover:opacity-90',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-sm px-3 text-xs',
+        lg: 'h-10 rounded-md px-6',
+        icon: 'h-9 w-9 shrink-0 p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /** Render as the single child element (e.g. a router `<Link>`) instead of a `<button>`. */
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button }

coord/dashboard/webapp/src/components/ui/card.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground', className)}
+      {...props}
+    />
+  ),
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-4', className)} {...props} />
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-base font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
+  ),
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
+  ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }