relay-os 0.1.0

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

@@ -0,0 +1,268 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface-2);
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  background: var(--color-surface-1);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  padding: 4px;
+}
+
+.tab {
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 7px 14px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.tabActive {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+}
+
+.syncBtn {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.syncBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.empty {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 32px;
+  text-align: center;
+}
+
+.editsList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.editCard {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+.editSummary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.editSummary::-webkit-details-marker {
+  display: none;
+}
+
+.editLogo {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+.editFile {
+  font-family: var(--font-mono), monospace;
+  font-size: 12px;
+  color: #ffb85c;
+  flex: 1;
+}
+
+.editTime {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.editMeta {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 8px 0;
+}
+
+.diff {
+  font-size: 11px;
+  line-height: 1.5;
+  background: var(--color-surface-1);
+  border-radius: 6px;
+  padding: 8px;
+  overflow: auto;
+  max-height: 240px;
+}
+
+.memoryLayout {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.irTabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.irTab {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-2);
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.irTabActive {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+}
+
+.memoryGrid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 16px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.memoryCard {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.cardTitle {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.md {
+  flex: 1;
+  margin: 0;
+  padding: 14px;
+  font-size: 12px;
+  line-height: 1.65;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-y: auto;
+  font-family: var(--font-inter), sans-serif;
+}
+
+.settings {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 14px;
+  align-content: start;
+}
+
+.settingsCard {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 14px;
+}
+
+.settingsRow {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  margin-top: 10px;
+  color: var(--text-secondary);
+}
+
+.settingsRow strong {
+  color: var(--text-primary);
+  text-align: right;
+}
+
+.hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 8px;
+  line-height: 1.5;
+}
+
+.apiKey {
+  display: block;
+  margin-top: 10px;
+  padding: 10px;
+  background: var(--color-surface-1);
+  border-radius: 6px;
+  font-size: 11px;
+  word-break: break-all;
+  color: var(--color-active);
+}
+
+@media (max-width: 900px) {
+  .memoryGrid {
+    grid-template-columns: 1fr;
+  }
+}

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

@@ -0,0 +1,174 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+import { useRelay } from '@/lib/RelayContext';
+import { AGENT_BY_ID, filterTimeline } from '@/lib/relay';
+import ActivityTimeline from './ActivityTimeline';
+import AgentSessionChat from './AgentSessionChat';
+import styles from './ProjectDashboard.module.css';
+
+const IR_TABS = [
+  { key: 'project', label: 'Project' },
+  { key: 'currentTask', label: 'Tasks' },
+  { key: 'decisions', label: 'Decisions' },
+  { key: 'failures', label: 'Failures' },
+  { key: 'architecture', label: 'Architecture' },
+  { key: 'compileBrief', label: 'Compile brief' },
+] as const;
+
+type IrKey = (typeof IR_TABS)[number]['key'];
+
+function EditCard({ e }: { e: ReturnType<typeof filterTimeline>[0] }) {
+  const meta = AGENT_BY_ID[e.source as keyof typeof AGENT_BY_ID];
+  return (
+    <details className={styles.editCard}>
+      <summary className={styles.editSummary}>
+        {meta && <img src={meta.logo} alt="" className={styles.editLogo} />}
+        <span className={styles.editFile}>{e.file || e.path || 'Edit'}</span>
+        <span className={styles.editTime}>{e.ts ? new Date(e.ts).toLocaleString() : ''}</span>
+      </summary>
+      {e.summary && <div className={styles.editMeta}>{e.summary}</div>}
+      {e.diff && (
+        <pre className={`mono ${styles.diff}`}>
+          {e.diff.split('\n').slice(0, 80).join('\n')}
+          {e.diff.split('\n').length > 80 ? '\n…' : ''}
+        </pre>
+      )}
+    </details>
+  );
+}
+
+export default function ProjectDashboard() {
+  const { activeWorkspace, activeProject, memory, dashboard, syncing, refresh } = useRelay();
+  const [tab, setTab] = useState<'activity' | 'chat' | 'edits' | 'memory' | 'settings'>('activity');
+  const [irTab, setIrTab] = useState<IrKey>('project');
+
+  const timeline = memory?.timeline || [];
+  const edits = useMemo(
+    () =>
+      filterTimeline(dashboard?.recentEdits?.length ? dashboard.recentEdits : timeline).filter(
+        (e) => e.kind === 'code_edit' || e.kind === 'artifact',
+      ),
+    [dashboard, timeline],
+  );
+
+  const irContent = dashboard?.ir?.[irTab] || '';
+  const handoff = dashboard?.handoff?.markdown || '';
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.toolbar}>
+        <div className={styles.tabs}>
+          {(
+            [
+              ['activity', 'Activity'],
+              ['chat', 'Agent chat'],
+              ['memory', 'All IR files'],
+              ['edits', 'Code edits'],
+              ['settings', 'Settings'],
+            ] as const
+          ).map(([key, label]) => (
+            <button
+              key={key}
+              type="button"
+              className={`${styles.tab} ${tab === key ? styles.tabActive : ''}`}
+              onClick={() => setTab(key)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          className={styles.syncBtn}
+          disabled={syncing || !activeWorkspace}
+          onClick={() => refresh({ full: true })}
+        >
+          {syncing ? 'Syncing…' : 'Sync'}
+        </button>
+      </div>
+
+      <div className={styles.body}>
+        {!activeWorkspace ? (
+          <div className={styles.empty}>Select or add a workspace to view project memory.</div>
+        ) : tab === 'activity' ? (
+          <ActivityTimeline
+            events={timeline}
+            emptyMessage="Connect an agent from the sidebar to populate the timeline."
+          />
+        ) : tab === 'chat' ? (
+          <AgentSessionChat />
+        ) : tab === 'edits' ? (
+          <div className={`${styles.editsList} custom-scrollbar`}>
+            {edits.length === 0 ? (
+              <div className={styles.empty}>No code edits recorded yet.</div>
+            ) : (
+              edits.map((e, i) => <EditCard key={`${e.ts}-${i}`} e={e} />)
+            )}
+          </div>
+        ) : tab === 'memory' ? (
+          <div className={styles.memoryLayout}>
+            <div className={styles.irTabs}>
+              {IR_TABS.map((t) => (
+                <button
+                  key={t.key}
+                  type="button"
+                  className={`${styles.irTab} ${irTab === t.key ? styles.irTabActive : ''}`}
+                  onClick={() => setIrTab(t.key)}
+                >
+                  {t.label}
+                </button>
+              ))}
+            </div>
+            <div className={styles.memoryGrid}>
+              <article className={styles.memoryCard}>
+                <div className={styles.cardTitle}>Handoff</div>
+                <pre className={`${styles.md} custom-scrollbar`}>{handoff || 'No handoff yet — run /relay update in an agent.'}</pre>
+              </article>
+              <article className={styles.memoryCard}>
+                <div className={styles.cardTitle}>{IR_TABS.find((t) => t.key === irTab)?.label}</div>
+                <pre className={`${styles.md} custom-scrollbar`}>{irContent || 'No content yet.'}</pre>
+              </article>
+            </div>
+          </div>
+        ) : (
+          <div className={styles.settings}>
+            <article className={styles.settingsCard}>
+              <div className={styles.cardTitle}>Project</div>
+              <p className={styles.settingsRow}>
+                <span>Name</span>
+                <strong>{activeProject?.name || activeWorkspace.full}</strong>
+              </p>
+              <p className={styles.settingsRow}>
+                <span>Path</span>
+                <code className="mono">{activeWorkspace.localPath}</code>
+              </p>
+            </article>
+            <article className={styles.settingsCard}>
+              <div className={styles.cardTitle}>API key</div>
+              <p className={styles.hint}>For MCP and remote agents. Copy from relay init output or project registry.</p>
+              <code className={`mono ${styles.apiKey}`}>
+                {activeProject?.apiKey || 'Open Settings after relay init registers this project.'}
+              </code>
+            </article>
+            <article className={styles.settingsCard}>
+              <div className={styles.cardTitle}>Stats</div>
+              <p className={styles.settingsRow}>
+                <span>Events</span>
+                <strong>{dashboard?.stats?.totalEvents ?? timeline.length}</strong>
+              </p>
+              <p className={styles.settingsRow}>
+                <span>Connected agents</span>
+                <strong>{dashboard?.stats?.connectedAgents ?? 0}</strong>
+              </p>
+              <p className={styles.settingsRow}>
+                <span>Last sync</span>
+                <strong>{dashboard?.lastSync ? new Date(dashboard.lastSync).toLocaleString() : '—'}</strong>
+              </p>
+            </article>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+.panel {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  min-height: 280px;
+  max-height: 420px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.refreshBtn {
+  border: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 6px;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.refreshBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.55;
+  margin-top: 8px;
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 8px;
+  flex-shrink: 0;
+}
+
+.tab {
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--text-primary);
+}
+
+.tabActive {
+  color: var(--text-primary);
+  border-bottom-color: var(--color-active);
+}
+
+.body {
+  flex: 1;
+  margin: 0;
+  padding: 12px;
+  font-size: 11px;
+  line-height: 1.55;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-y: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface-3);
+  font-family: var(--font-inter), sans-serif;
+}

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

@@ -0,0 +1,74 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRelay } from '@/lib/RelayContext';
+import { RelayDashboard } from '@/lib/relay';
+import styles from './RelayBrainPanel.module.css';
+
+const SECTIONS = [
+  { key: 'handoff', label: 'Handoff', pick: (d: RelayDashboard | null) => d?.handoff?.markdown || '' },
+  { key: 'currentTask', label: 'Current task', pick: (d: RelayDashboard | null) => d?.ir?.currentTask || '' },
+  { key: 'decisions', label: 'Decisions', pick: (d: RelayDashboard | null) => d?.ir?.decisions || '' },
+  { key: 'failures', label: 'Failures', pick: (d: RelayDashboard | null) => d?.ir?.failures || '' },
+  { key: 'project', label: 'Project', pick: (d: RelayDashboard | null) => d?.ir?.project || '' },
+] as const;
+
+export default function RelayBrainPanel() {
+  const { activeWorkspace, dashboard, relayOnline, syncing, refresh } = useRelay();
+  const [active, setActive] = useState<string>('handoff');
+
+  if (!activeWorkspace) {
+    return (
+      <div className={`glass-panel ${styles.panel}`}>
+        <div className="section-title">RELAY BRAIN</div>
+        <p className={styles.hint}>Add a workspace to view handoff, tasks, and decisions.</p>
+      </div>
+    );
+  }
+
+  if (!relayOnline) {
+    return (
+      <div className={`glass-panel ${styles.panel}`}>
+        <div className="section-title">RELAY BRAIN</div>
+        <p className={styles.hint}>
+          Relay API offline. Run <span className="mono">relay serve</span> or re-run{' '}
+          <span className="mono">relay init</span> (starts UI in background).
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`glass-panel ${styles.panel}`}>
+      <div className={styles.header}>
+        <div className="section-title">RELAY BRAIN</div>
+        <button type="button" className={styles.refreshBtn} disabled={syncing} onClick={() => refresh({ full: true })}>
+          {syncing ? '…' : '↻'}
+        </button>
+      </div>
+
+      <div className={`${styles.tabs} custom-scrollbar`}>
+        {SECTIONS.map((section) => (
+          <button
+            key={section.key}
+            type="button"
+            className={`${styles.tab} ${active === section.key ? styles.tabActive : ''}`}
+            onClick={() => setActive(section.key)}
+          >
+            {section.label}
+          </button>
+        ))}
+      </div>
+
+      {(() => {
+        const section = SECTIONS.find((s) => s.key === active) ?? SECTIONS[0];
+        const content = section.pick(dashboard);
+        return (
+          <pre className={`${styles.body} mono custom-scrollbar`}>
+            {content.trim() || `No ${section.label.toLowerCase()} yet — run /relay update in an agent.`}
+          </pre>
+        );
+      })()}
+    </div>
+  );
+}