relay-os 0.1.0

package/mission-control/src/components/CollaboratorsPanel.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { useRelay } from '@/lib/RelayContext';
+import { getMissionMeta, saveMissionMeta } from '@/lib/relay';
+import styles from './CollaboratorsPanel.module.css';
+
+const SEED_COLLABORATORS = ['Unnath', 'Prakrititz', 'Krishna', 'Gathik', 'Hemanth'];
+
+const ACCENTS = ['#7dd3fc', '#a78bfa', '#5eead4', '#f0abfc', '#fca5a5', '#fcd34d', '#86efac'];
+
+function colorFor(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
+  return ACCENTS[hash % ACCENTS.length];
+}
+
+function initials(name: string): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .map((p) => p[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+}
+
+export default function CollaboratorsPanel() {
+  const { activeWorkspace, relayOnline } = useRelay();
+  const [names, setNames] = useState<string[]>(SEED_COLLABORATORS);
+  const [draft, setDraft] = useState('');
+  const [showAdd, setShowAdd] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const load = useCallback(async () => {
+    if (!activeWorkspace?.localPath || !relayOnline) return;
+    try {
+      const { meta } = await getMissionMeta(activeWorkspace.localPath);
+      if (meta.collaborators?.length) setNames(meta.collaborators);
+    } catch {
+      /* keep seed list */
+    }
+  }, [activeWorkspace?.localPath, relayOnline]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function persist(next: string[]) {
+    setNames(next);
+    if (!activeWorkspace?.localPath) return;
+    setSaving(true);
+    try {
+      await saveMissionMeta(activeWorkspace.localPath, { collaborators: next });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function addName() {
+    const name = draft.trim();
+    if (!name || names.includes(name)) return;
+    setDraft('');
+    setShowAdd(false);
+    persist([...names, name]);
+  }
+
+  function removeName(name: string) {
+    persist(names.filter((n) => n !== name));
+  }
+
+  return (
+    <div className={`glass-panel ${styles.panel}`}>
+      <div className="section-title">
+        COLLABORATORS {saving && <span className={styles.muted}>saving…</span>}
+      </div>
+
+      <div className={styles.avatarRow}>
+        {names.map((name) => (
+          <div key={name} className={styles.avatarChip} title={name}>
+            <span className={styles.avatar} style={{ background: colorFor(name) }}>
+              {initials(name)}
+            </span>
+            <span className={styles.avatarName}>{name}</span>
+            <button
+              type="button"
+              className={styles.removeBtn}
+              onClick={() => removeName(name)}
+              aria-label={`Remove ${name}`}
+            >
+              ×
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          className={styles.addChip}
+          onClick={() => setShowAdd((s) => !s)}
+          aria-label="Add collaborator"
+          title="Add collaborator"
+        >
+          +
+        </button>
+      </div>
+
+      {showAdd && (
+        <div className={styles.addRow}>
+          <input
+            className={styles.input}
+            placeholder="Name"
+            value={draft}
+            autoFocus
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && addName()}
+          />
+          <button type="button" className={styles.addBtn} onClick={addName} disabled={!draft.trim()}>
+            Add
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/mission-control/src/components/ContextMemory.module.css

@@ -0,0 +1,79 @@
+.panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.count {
+  margin-left: auto;
+  color: var(--text-secondary);
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: 0;
+  float: right;
+}
+
+.treeContainer {
+  flex-grow: 1;
+  overflow-y: auto;
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.treeRoot {
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.treeNode {
+  margin-left: 12px;
+  border-left: 1px solid var(--color-border);
+  padding-left: 8px;
+}
+
+.nodeHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  padding: 2px 0;
+}
+
+.nodeHeader:hover .nodeName {
+  color: var(--text-primary);
+}
+
+.nodeName {
+  color: var(--text-secondary);
+}
+
+.icon {
+  font-size: 12px;
+  opacity: 0.8;
+  width: 12px;
+}
+
+.nodeChildren {
+  margin-left: 14px;
+  border-left: 1px solid rgba(255, 255, 255, 0.05);
+  padding-left: 8px;
+  margin-top: 2px;
+  margin-bottom: 4px;
+}
+
+.childNode {
+  display: flex;
+  gap: 8px;
+  padding: 2px 0;
+}
+
+.childKey {
+  color: var(--color-active);
+}
+
+.childValue {
+  color: var(--text-primary);
+}

package/mission-control/src/components/ContextMemory.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+import { useRelay } from '@/lib/RelayContext';
+import { RelayArtifact } from '@/lib/relay';
+import styles from './ContextMemory.module.css';
+
+function artifactSummary(a: RelayArtifact): string {
+  if (a.metadata) {
+    try {
+      const m = JSON.parse(a.metadata);
+      if (m.Summary || m.ArtifactType) return m.Summary || m.ArtifactType;
+    } catch {
+      /* not JSON */
+    }
+  }
+  return (a.content || '').slice(0, 120);
+}
+
+export default function ContextMemory() {
+  const { memory } = useRelay();
+
+  const artifacts: RelayArtifact[] = Object.entries(memory?.agents || {}).flatMap(([source, a]) =>
+    (a?.artifacts || []).map((art) => ({ ...art, source })),
+  );
+
+  return (
+    <div className={`glass-panel ${styles.panel}`} style={{ padding: 16 }}>
+      <div className="section-title">
+        ARTIFACTS <span className={styles.count}>[{artifacts.length}]</span>
+      </div>
+
+      <div className={`${styles.treeContainer} custom-scrollbar`}>
+        {artifacts.length === 0 ? (
+          <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6 }}>
+            No artifacts yet. Antigravity and other agents emit these when connected.
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {artifacts.map((a, i) => (
+              <div
+                key={`${a.name}-${i}`}
+                style={{
+                  background: 'var(--color-surface-3)',
+                  border: '1px solid var(--color-border)',
+                  borderRadius: 4,
+                  padding: 10,
+                }}
+              >
+                <div className="mono" style={{ fontSize: 12, color: 'var(--color-active)', fontWeight: 600 }}>
+                  {a.name}
+                </div>
+                <div style={{ fontSize: 10, color: 'var(--text-secondary)', margin: '2px 0 6px' }}>
+                  {a.source}
+                </div>
+                <div style={{ fontSize: 12, color: 'var(--text-primary)', lineHeight: 1.4 }}>
+                  {artifactSummary(a)}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/mission-control/src/components/DirectoryPicker.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+// Browses the local filesystem via /api/fs and lets the user pick a folder's
+// absolute path for the Add Workspace flow.
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+interface Entry {
+  name: string;
+  path: string;
+  isDir: boolean;
+}
+
+interface FsResponse {
+  path: string | null;
+  parent: string | null;
+  entries: Entry[];
+  error?: string;
+}
+
+export default function DirectoryPicker({
+  onPick,
+  busy = false,
+  pickLabel = 'Use this folder',
+}: {
+  onPick: (absolutePath: string) => void;
+  busy?: boolean;
+  pickLabel?: string;
+}) {
+  const [current, setCurrent] = useState<string | null>(null);
+  const [parent, setParent] = useState<string | null>(null);
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [manual, setManual] = useState('');
+
+  const navigate = useCallback(async (target: string | null) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const url = target ? `/api/fs?path=${encodeURIComponent(target)}` : '/api/fs';
+      const res = await fetch(url);
+      const data: FsResponse = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Failed to read folder');
+      setCurrent(data.path);
+      setParent(data.parent);
+      setEntries(data.entries.filter((e) => e.isDir));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to read folder');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    navigate(null);
+  }, [navigate]);
+
+  const box: React.CSSProperties = {
+    background: 'var(--color-surface-3)',
+    border: '1px solid var(--color-border)',
+    borderRadius: 6,
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <button
+          type="button"
+          onClick={() => navigate(parent)}
+          disabled={loading || (current === null)}
+          style={{
+            ...box,
+            padding: '6px 10px',
+            color: 'var(--text-secondary)',
+            cursor: current === null ? 'not-allowed' : 'pointer',
+            fontSize: 13,
+            opacity: current === null ? 0.4 : 1,
+          }}
+        >
+          ↑ Up
+        </button>
+        <div
+          className="mono"
+          style={{
+            flex: 1,
+            ...box,
+            padding: '6px 10px',
+            fontSize: 12,
+            color: 'var(--text-primary)',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {current || 'This PC'}
+        </div>
+      </div>
+
+      <div
+        className="custom-scrollbar"
+        style={{ ...box, maxHeight: 220, overflowY: 'auto', minHeight: 120 }}
+      >
+        {loading ? (
+          <div style={{ padding: 16, color: 'var(--text-muted)', fontSize: 13 }}>Loading…</div>
+        ) : error ? (
+          <div style={{ padding: 16, color: 'var(--text-muted)', fontSize: 13 }}>{error}</div>
+        ) : entries.length === 0 ? (
+          <div style={{ padding: 16, color: 'var(--text-muted)', fontSize: 13 }}>
+            No sub-folders here. Use the button below to select this folder.
+          </div>
+        ) : (
+          entries.map((e) => (
+            <button
+              key={e.path}
+              type="button"
+              onClick={() => navigate(e.path)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                width: '100%',
+                padding: '8px 12px',
+                background: 'transparent',
+                border: 'none',
+                borderBottom: '1px solid var(--color-border)',
+                color: 'var(--text-primary)',
+                cursor: 'pointer',
+                fontSize: 13,
+                textAlign: 'left',
+              }}
+            >
+              <span style={{ opacity: 0.6 }}>📁</span>
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {e.name}
+              </span>
+            </button>
+          ))
+        )}
+      </div>
+
+      <button
+        type="button"
+        disabled={!current || busy}
+        onClick={() => current && onPick(current)}
+        style={{
+          background: 'var(--color-active)',
+          color: '#000',
+          border: 'none',
+          borderRadius: 6,
+          padding: '10px 16px',
+          fontSize: 13,
+          fontWeight: 700,
+          cursor: !current || busy ? 'not-allowed' : 'pointer',
+          opacity: !current || busy ? 0.4 : 1,
+        }}
+      >
+        {busy ? 'Working…' : `${pickLabel}${current ? '' : ''}`}
+      </button>
+
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <input
+          className="mono"
+          value={manual}
+          onChange={(e) => setManual(e.target.value)}
+          placeholder="…or paste an absolute path"
+          style={{
+            flex: 1,
+            ...box,
+            padding: '8px 10px',
+            color: 'var(--text-primary)',
+            fontSize: 12,
+            outline: 'none',
+          }}
+        />
+        <button
+          type="button"
+          disabled={!manual.trim() || busy}
+          onClick={() => onPick(manual.trim())}
+          style={{
+            ...box,
+            padding: '8px 14px',
+            color: 'var(--text-secondary)',
+            cursor: !manual.trim() || busy ? 'not-allowed' : 'pointer',
+            fontSize: 13,
+            opacity: !manual.trim() || busy ? 0.4 : 1,
+          }}
+        >
+          Use
+        </button>
+      </div>
+    </div>
+  );
+}

package/mission-control/src/components/GlobalHeader.module.css

@@ -0,0 +1,165 @@
+.header {
+  height: 56px;
+  background-color: var(--color-surface-2);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  flex-shrink: 0;
+}
+
+.left, .center, .right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo {
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.projectDropdown {
+  background: var(--color-surface-3);
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid var(--color-border);
+}
+
+.arrow {
+  font-size: 10px;
+  margin-left: 8px;
+  opacity: 0.5;
+}
+
+.teammatesOnline {
+  display: flex;
+  margin-left: 16px;
+  gap: -8px;
+}
+
+.avatarMini {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: bold;
+  border: 2px solid var(--color-surface-2);
+  margin-left: -6px;
+  color: #000000;
+}
+
+.bgPony { background-color: var(--color-active); }
+.bgUnnath { background-color: var(--color-success); }
+.bgArjun { background-color: rgba(255, 255, 255, 0.62); }
+
+.inviteBtn {
+  background: transparent;
+  border: 1px dashed var(--color-border);
+  color: var(--text-secondary);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.inviteBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+}
+
+.stats {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.stats strong {
+  color: var(--text-primary);
+}
+
+.dropdownMenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 6px;
+  min-width: 220px;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  z-index: 50;
+  overflow: hidden;
+}
+
+.dropdownItem {
+  padding: 8px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--text-secondary);
+}
+
+.dropdownItem[data-active] {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.dropdownAdd {
+  padding: 8px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--color-border);
+}
+
+.syncBtn {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.syncBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.statusPill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.statusDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.statusDot[data-live] {
+  background: var(--color-success);
+  box-shadow: 0 0 6px var(--color-success);
+}
+
+.settingsBtn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+}

package/mission-control/src/components/GlobalHeader.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useRelay } from '@/lib/RelayContext';
+import styles from './GlobalHeader.module.css';
+
+export default function GlobalHeader() {
+  const router = useRouter();
+  const { workspaces, activeWorkspace, selectWorkspace, agentStates, relayOnline, dashboard, memory, syncing, refresh } = useRelay();
+  const [open, setOpen] = useState(false);
+
+  const connectedCount = agentStates.filter((a) => a.status === 'connected').length;
+  const eventCount = dashboard?.stats?.totalEvents ?? memory?.timeline?.length ?? 0;
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.left}>
+        <div className={styles.logo}>
+          <img src="/logos/logo.png" alt="" style={{ height: 36, objectFit: 'contain' }} />
+          /.relay
+        </div>
+
+        <div style={{ position: 'relative' }}>
+          <div className={styles.projectDropdown} onClick={() => setOpen((o) => !o)}>
+            {activeWorkspace ? activeWorkspace.full : 'No workspace'}
+            <span className={styles.arrow}>▼</span>
+          </div>
+          {open && (
+            <div className={styles.dropdownMenu}>
+              {workspaces.map((w) => (
+                <div
+                  key={w.id}
+                  className={styles.dropdownItem}
+                  data-active={w.active || undefined}
+                  onClick={() => {
+                    selectWorkspace(w.id);
+                    setOpen(false);
+                  }}
+                >
+                  {w.full}
+                </div>
+              ))}
+              <div
+                className={styles.dropdownAdd}
+                onClick={() => {
+                  setOpen(false);
+                  router.push('/onboarding');
+                }}
+              >
+                + Add workspace
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.right}>
+        <div className={styles.stats}>
+          <span>
+            Events: <strong className="mono">{eventCount}</strong>
+          </span>
+          <span>
+            Agents: <strong className="mono">{connectedCount}</strong> connected
+          </span>
+        </div>
+        <button
+          type="button"
+          className={styles.syncBtn}
+          disabled={syncing || !activeWorkspace}
+          onClick={() => refresh({ full: true })}
+        >
+          {syncing ? 'Syncing…' : 'Sync'}
+        </button>
+        <div className={styles.statusPill}>
+          <span className={styles.statusDot} data-live={relayOnline || undefined} />
+          {relayOnline ? 'Relay online' : 'Relay offline'}
+        </div>
+      </div>
+    </header>
+  );
+}