relay-os 0.1.0

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

@@ -0,0 +1,201 @@
+.sidebar {
+  width: 260px;
+  height: 100%;
+  background-color: var(--color-surface-2);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+  flex-shrink: 0;
+}
+
+.sectionTitle {
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--text-secondary);
+  padding: 0 16px;
+  margin-bottom: 12px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.integrationsList {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  gap: 8px;
+}
+
+.initBtn {
+  background: var(--color-surface-3);
+  color: var(--text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btnLogo {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+  filter: grayscale(1) brightness(1.5);
+  transition: all 0.2s ease;
+}
+
+.initBtn:hover .btnLogo {
+  filter: none;
+}
+
+.initBtn:hover {
+  background: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+}
+
+.initHint {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  color: var(--color-success);
+  border: 1px solid var(--color-success);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.initHint code {
+  font-family: var(--font-mono);
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px 4px;
+  border-radius: 2px;
+  color: white;
+}
+
+.spacerSmall {
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.teammatesList {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  gap: 12px;
+}
+
+.teammateCard {
+  background: var(--color-surface-1);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.profileIcon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  font-weight: 800;
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.tmHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.statusDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.green { background-color: var(--color-success); }
+.yellow { background-color: var(--color-warning); }
+.grey { background-color: var(--text-muted); }
+
+.tmName {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.tmDetails {
+  padding-left: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tmTool {
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.tmFile {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+.tmMsg {
+  font-size: 11px;
+  color: var(--text-primary);
+  font-style: italic;
+  margin-top: 4px;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+.proposalsList {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  gap: 12px;
+}
+
+.proposalItem {
+  display: flex;
+  gap: 8px;
+}
+
+.proposalIcon {
+  font-size: 12px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--text-secondary);
+}
+
+.proposalContent {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.proposalText {
+  font-size: 11px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.proposalTime {
+  font-size: 10px;
+  color: var(--text-muted);
+}

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

@@ -0,0 +1,136 @@
+'use client';
+
+import React from 'react';
+import { AGENTS, filterTimeline } from '@/lib/relay';
+import { useRelay, AgentStatus } from '@/lib/RelayContext';
+import styles from './Sidebar.module.css';
+
+const STATUS_LABEL: Record<AgentStatus, string> = {
+  idle: 'Connect',
+  handshaking: 'Connecting…',
+  connected: 'Connected',
+  error: 'Retry',
+};
+
+const STATUS_COLOR: Record<AgentStatus, string> = {
+  idle: 'var(--text-muted)',
+  handshaking: 'var(--color-warning)',
+  connected: 'var(--color-success)',
+  error: '#ff9a9a',
+};
+
+function relativeTime(ts?: string): string {
+  if (!ts) return '';
+  const diff = Date.now() - new Date(ts).getTime();
+  if (Number.isNaN(diff)) return '';
+  const s = Math.floor(diff / 1000);
+  if (s < 60) return `${s}s ago`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
+
+export default function Sidebar() {
+  const { activeWorkspace, agentStates, connect, memory } = useRelay();
+  const stateById = Object.fromEntries(agentStates.map((s) => [s.id, s]));
+
+  const handleConnect = async (id: (typeof AGENTS)[number]['id']) => {
+    try {
+      await connect(id);
+    } catch {
+      /* error surfaced via agentStates */
+    }
+  };
+
+  const recent = filterTimeline(memory?.timeline || []).slice(-8).reverse();
+
+  return (
+    <aside className={styles.sidebar}>
+      <div className={styles.sectionTitle}>AGENT INTEGRATIONS</div>
+
+      {!activeWorkspace && (
+        <div style={{ padding: '0 16px 12px', fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}>
+          Select or add a workspace to connect your agents.
+        </div>
+      )}
+
+      <div className={styles.integrationsList}>
+        {AGENTS.map((agent) => {
+          const st = stateById[agent.id];
+          const status = (st?.status || 'idle') as AgentStatus;
+          const connected = status === 'connected';
+          const disabled = !activeWorkspace || status === 'handshaking';
+          return (
+            <div key={agent.id} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              <button
+                className={styles.initBtn}
+                disabled={disabled}
+                onClick={() => handleConnect(agent.id)}
+                style={{
+                  opacity: disabled && !connected ? 0.55 : 1,
+                  borderColor: connected ? 'var(--color-success)' : undefined,
+                  background: connected ? 'rgba(34, 208, 122, 0.08)' : undefined,
+                }}
+              >
+                <img
+                  src={agent.logo}
+                  alt={agent.label}
+                  className={styles.btnLogo}
+                  style={{ filter: connected ? 'none' : undefined }}
+                />
+                <span style={{ flex: 1 }}>{agent.label}</span>
+                <span style={{ fontSize: 10, fontWeight: 700, color: STATUS_COLOR[status] }}>
+                  {STATUS_LABEL[status]}
+                </span>
+              </button>
+              {status === 'connected' && (st?.eventCount ?? 0) > 0 && (
+                <div style={{ paddingLeft: 4, fontSize: 10, color: 'var(--text-muted)' }}>
+                  ✓ {st.eventCount} events loaded
+                </div>
+              )}
+              {status === 'error' && st?.error && (
+                <div style={{ paddingLeft: 4, fontSize: 10, color: '#ff9a9a', lineHeight: 1.4 }}>
+                  {st.error}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={styles.spacerSmall} />
+
+      <div className={styles.sectionTitle}>RECENT AGENT ACTIVITY</div>
+      <div className={`${styles.proposalsList} custom-scrollbar`} style={{ overflowY: 'auto' }}>
+        {recent.length === 0 ? (
+          <div style={{ padding: '0 16px', fontSize: 11, color: 'var(--text-muted)' }}>
+            {activeWorkspace ? 'No agent events yet. Connect an agent to populate this.' : '—'}
+          </div>
+        ) : (
+          recent.map((e, i) => {
+            const icon = e.kind === 'code_edit' ? '✎' : e.kind === 'artifact' ? '◆' : '•';
+            const text =
+              e.kind === 'code_edit'
+                ? e.file || e.summary || 'Edited a file'
+                : (e.content || e.summary || '').slice(0, 90);
+            return (
+              <div key={`${e.ts}-${i}`} className={styles.proposalItem}>
+                <div className={styles.proposalIcon}>{icon}</div>
+                <div className={styles.proposalContent}>
+                  <div className={styles.proposalText}>
+                    <strong>{e.source}</strong> {text}
+                  </div>
+                  <div className={styles.proposalTime}>{relativeTime(e.ts)}</div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      <div className={styles.spacer} />
+    </aside>
+  );
+}

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

@@ -0,0 +1,92 @@
+.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;
+}
+
+.queueContainer {
+  flex-grow: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-right: 4px;
+}
+
+.taskCard {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-left: 2px solid var(--color-active);
+  padding: 10px 12px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.voteBadge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 9px;
+  font-weight: 800;
+  background: var(--color-active);
+  color: #000000;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.taskTitle {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  padding-right: 32px;
+}
+
+.taskMeta {
+  font-size: 10px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.taskMsg {
+  font-size: 11px;
+  color: var(--text-primary);
+  font-style: italic;
+  margin-bottom: 8px;
+}
+
+.voteStats {
+  font-size: 10px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.voteActions {
+  display: flex;
+  gap: 8px;
+}
+
+.btnYes, .btnNo, .btnMsg {
+  flex: 1;
+  padding: 4px 0;
+  border-radius: 4px;
+  font-size: 10px;
+  cursor: pointer;
+  font-weight: 600;
+  border: none;
+}
+
+.btnYes { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.15); }
+.btnNo { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.15); }
+.btnMsg { background: transparent; color: var(--text-primary); border: 1px solid var(--color-border); }

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

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { useRelay } from '@/lib/RelayContext';
+import { RelayTask } from '@/lib/relay';
+import styles from './TaskQueue.module.css';
+
+export default function TaskQueue() {
+  const { memory } = useRelay();
+
+  const tasks: RelayTask[] = Object.entries(memory?.agents || {}).flatMap(([source, a]) =>
+    (a?.tasks || []).map((t) => ({ ...t, source })),
+  );
+
+  return (
+    <div className={`glass-panel ${styles.panel}`} style={{ padding: 16 }}>
+      <div className="section-title">
+        AGENT TASKS <span className={styles.count}>[{tasks.length}]</span>
+      </div>
+
+      <div className={`${styles.queueContainer} custom-scrollbar`}>
+        {tasks.length === 0 ? (
+          <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6 }}>
+            No background tasks reported by connected agents.
+          </div>
+        ) : (
+          tasks.map((t, i) => (
+            <div key={`${t.id}-${i}`} className={styles.taskCard}>
+              <div className={styles.taskTitle} style={{ paddingRight: 0 }}>
+                {t.id}
+              </div>
+              <div className={styles.taskMeta}>{t.source}</div>
+              <div
+                className="mono"
+                style={{
+                  fontSize: 11,
+                  color: 'var(--text-secondary)',
+                  whiteSpace: 'pre-wrap',
+                  maxHeight: 80,
+                  overflow: 'hidden',
+                }}
+              >
+                {(t.preview || '').trim()}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,188 @@
+.rail {
+  width: 72px;
+  height: 100vh;
+  background-color: var(--color-surface-3);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px 0;
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-border);
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow-x: hidden;
+}
+
+.rail.expanded {
+  width: 240px;
+}
+
+.topSection, .bottomSection {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.sectionTitle {
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--text-secondary);
+  padding: 0 16px;
+  margin-top: 8px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  white-space: nowrap;
+  animation: fadeIn 0.2s ease forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.itemWrapper {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 12px;
+  cursor: pointer;
+  border-radius: 8px;
+  margin: 0 4px;
+}
+
+.itemWrapper:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.activeWrapper {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.itemText {
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  animation: fadeIn 0.2s ease forwards;
+}
+
+.workspaceIcon {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-color: var(--color-surface-1);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 14px;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  border: 1px solid var(--color-border);
+}
+
+.itemWrapper:hover .workspaceIcon {
+  border-radius: 16px;
+  background-color: var(--color-active);
+  color: #000000;
+  border-color: var(--color-active);
+}
+
+.workspaceIcon.active {
+  border-radius: 16px;
+  background-color: var(--color-active);
+  color: #000000;
+  border-color: var(--color-active);
+}
+
+.separator {
+  width: 32px;
+  height: 2px;
+  background-color: var(--color-border);
+  margin: 4px auto;
+  border-radius: 1px;
+}
+
+.addWorkspace {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-color: transparent;
+  color: var(--color-success);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
+  border: 1px dashed var(--color-success);
+  transition: all 0.2s ease;
+}
+
+.itemWrapper:hover .addWorkspace {
+  border-radius: 16px;
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.allMemoriesIcon {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-color: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.82);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transition: all 0.2s ease;
+}
+
+.itemWrapper:hover .allMemoriesIcon {
+  border-radius: 16px;
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.actionIcon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.itemWrapper:hover .actionIcon {
+  color: var(--text-primary);
+}
+
+.profileAvatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-color: var(--color-active);
+  color: #000000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 18px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.profileAvatar::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 14px;
+  height: 14px;
+  background-color: var(--color-success);
+  border: 3px solid var(--color-surface-3);
+  border-radius: 50%;
+}