relay-os 0.1.0

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

@@ -0,0 +1,220 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.banner {
+  margin: 12px 16px 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: rgba(139, 92, 246, 0.08);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+.banner strong {
+  color: var(--text-primary);
+}
+
+.metaRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.metaLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.select {
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+  color: var(--text-primary);
+  font-size: 11px;
+}
+
+.metaHint {
+  margin-left: auto;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.empty {
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: center;
+  padding: 32px 16px;
+}
+
+.msg {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 10px 12px;
+}
+
+.msgSystem {
+  border-color: rgba(139, 92, 246, 0.35);
+  background: rgba(139, 92, 246, 0.06);
+}
+
+.msgMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.msgAgent {
+  color: var(--color-active);
+  font-weight: 500;
+}
+
+.msgTime {
+  margin-left: auto;
+  font-weight: 400;
+  color: var(--text-muted);
+}
+
+.msgText {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+}
+
+.mention {
+  font-weight: 700;
+}
+
+.compose {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-surface-2);
+}
+
+.mentionPopup {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 100%;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.mentionItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.mentionItem:hover,
+.mentionItemActive {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+}
+
+.mentionLogo {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.mentionLabel {
+  flex: 1;
+}
+
+.mentionStatus {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.status_connected {
+  color: #6ee7b7;
+}
+
+.status_handshaking {
+  color: #fcd34d;
+}
+
+.status_error {
+  color: #f87171;
+}
+
+.input {
+  flex: 1;
+  resize: none;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.sendBtn {
+  align-self: flex-end;
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.sendBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,276 @@
+'use client';
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useRelay } from '@/lib/RelayContext';
+import { AGENTS, AgentId, AgentMeta, getMissionMeta, MissionChatMessage, saveMissionMeta } from '@/lib/relay';
+import styles from './AgentSessionChat.module.css';
+
+const LAUNCH_HINTS: Record<AgentId, string> = {
+  Cursor:
+    'Open this folder in Cursor. In Agent chat, type `/relay context` to load handoff. Relay cannot run Cursor from the browser.',
+  'Claude Code':
+    'In a terminal: `cd` to your project, run `claude`, then `/relay context`. Relay does not embed Claude Code here.',
+  'GitHub Copilot':
+    'Open the folder in VS Code / Copilot, or run the Copilot CLI in this directory. Type `/relay context` in session.',
+  Codex:
+    'In a terminal: `cd` to your project, run `codex`, then `/relay context`. Relay does not embed Codex here.',
+  Antigravity:
+    'Open this folder in Antigravity IDE. Relay cannot run Antigravity agents from the browser.',
+};
+
+const MENTION_RE = /@([A-Za-z]*)$/;
+
+function newId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function extractMentions(text: string): AgentId[] {
+  const found: AgentId[] = [];
+  const re = /@([A-Za-z]+)/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(text))) {
+    const agent = AGENTS.find((a) => a.label.toLowerCase() === m![1].toLowerCase());
+    if (agent && !found.includes(agent.id)) found.push(agent.id);
+  }
+  return found;
+}
+
+function renderText(text: string) {
+  return text.split(/(@[A-Za-z]+)/g).map((part, i) => {
+    const m = part.match(/^@([A-Za-z]+)$/);
+    const agent = m && AGENTS.find((a) => a.label.toLowerCase() === m[1].toLowerCase());
+    if (agent) {
+      return (
+        <span key={i} className={styles.mention} style={{ color: agent.accent }}>
+          {part}
+        </span>
+      );
+    }
+    return part;
+  });
+}
+
+export default function AgentSessionChat() {
+  const { activeWorkspace, relayOnline, agentStates } = useRelay();
+  const [messages, setMessages] = useState<MissionChatMessage[]>([]);
+  const [collaborators, setCollaborators] = useState<string[]>([]);
+  const [author, setAuthor] = useState('You');
+  const [text, setText] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
+  const [mentionIndex, setMentionIndex] = useState(0);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const load = useCallback(async () => {
+    if (!activeWorkspace?.localPath || !relayOnline) return;
+    try {
+      const { meta } = await getMissionMeta(activeWorkspace.localPath);
+      setMessages(meta.chat || []);
+      setCollaborators(meta.collaborators || []);
+      if (meta.collaborators?.length) setAuthor(meta.collaborators[0]);
+    } catch {
+      /* ignore */
+    }
+  }, [activeWorkspace?.localPath, relayOnline]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  async function persistChat(next: MissionChatMessage[]) {
+    if (!activeWorkspace?.localPath) return;
+    setSaving(true);
+    try {
+      await saveMissionMeta(activeWorkspace.localPath, { chat: next });
+      setMessages(next);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const statusFor = useCallback(
+    (id: AgentId) => agentStates.find((s) => s.id === id)?.status ?? 'idle',
+    [agentStates],
+  );
+
+  const mentionMatches = useMemo(() => {
+    if (mentionQuery === null) return [];
+    const q = mentionQuery.toLowerCase();
+    return AGENTS.filter((a) => a.label.toLowerCase().startsWith(q));
+  }, [mentionQuery]);
+
+  function handleTextChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const value = e.target.value;
+    setText(value);
+    const cursor = e.target.selectionStart ?? value.length;
+    const m = value.slice(0, cursor).match(MENTION_RE);
+    if (m) {
+      setMentionQuery(m[1]);
+      setMentionIndex(0);
+    } else {
+      setMentionQuery(null);
+    }
+  }
+
+  function selectMention(agent: AgentMeta) {
+    const el = inputRef.current;
+    const cursor = el?.selectionStart ?? text.length;
+    const before = text.slice(0, cursor).replace(MENTION_RE, `@${agent.label} `);
+    const next = before + text.slice(cursor);
+    setText(next);
+    setMentionQuery(null);
+    requestAnimationFrame(() => {
+      el?.focus();
+      el?.setSelectionRange(before.length, before.length);
+    });
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (mentionQuery !== null && mentionMatches.length) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setMentionIndex((i) => (i + 1) % mentionMatches.length);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setMentionIndex((i) => (i - 1 + mentionMatches.length) % mentionMatches.length);
+        return;
+      }
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        selectMention(mentionMatches[mentionIndex]);
+        return;
+      }
+      if (e.key === 'Escape') {
+        setMentionQuery(null);
+        return;
+      }
+    }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  }
+
+  async function send() {
+    const trimmed = text.trim();
+    if (!trimmed || !activeWorkspace) return;
+
+    const mentions = extractMentions(trimmed);
+
+    const userMsg: MissionChatMessage = {
+      id: newId(),
+      author,
+      mentions,
+      role: 'user',
+      text: trimmed,
+      ts: new Date().toISOString(),
+    };
+
+    const hints: MissionChatMessage[] = mentions.map((agent) => ({
+      id: newId(),
+      author: 'Relay',
+      agent,
+      mentions: [agent],
+      role: 'system',
+      text: LAUNCH_HINTS[agent],
+      ts: new Date().toISOString(),
+    }));
+
+    const next = [...messages, userMsg, ...hints];
+    setText('');
+    setMentionQuery(null);
+    await persistChat(next);
+  }
+
+  const authorOptions = collaborators.length ? collaborators : ['You'];
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.banner}>
+        <strong>Team notes + agent routing.</strong> Relay syncs memory — it does not run IDE agents in the browser.
+        Type <span className="mono">@</span> to mention a connected agent and Relay will show how to open it locally.
+      </div>
+
+      <div className={styles.metaRow}>
+        <label className={styles.metaLabel}>
+          Posting as
+          <select className={styles.select} value={author} onChange={(e) => setAuthor(e.target.value)}>
+            {authorOptions.map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+        </label>
+        {saving && <span className={styles.metaHint}>Saving…</span>}
+      </div>
+
+      <div className={`${styles.messages} custom-scrollbar`}>
+        {!activeWorkspace ? (
+          <div className={styles.empty}>Select a workspace to chat.</div>
+        ) : messages.length === 0 ? (
+          <div className={styles.empty}>
+            Write a note for your team. Type <span className="mono">@</span> to mention an agent (e.g. @Claude) and
+            Relay will show how to open it locally.
+          </div>
+        ) : (
+          messages.map((m) => (
+            <div key={m.id} className={`${styles.msg} ${m.role === 'system' ? styles.msgSystem : ''}`}>
+              <div className={styles.msgMeta}>
+                <span>{m.author}</span>
+                <span className={styles.msgTime}>
+                  {new Date(m.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                </span>
+              </div>
+              <div className={styles.msgText}>{renderText(m.text)}</div>
+            </div>
+          ))
+        )}
+        <div ref={bottomRef} />
+      </div>
+
+      <div className={styles.compose}>
+        {mentionQuery !== null && mentionMatches.length > 0 && (
+          <div className={styles.mentionPopup}>
+            {mentionMatches.map((a, i) => {
+              const status = statusFor(a.id);
+              return (
+                <button
+                  key={a.id}
+                  type="button"
+                  className={`${styles.mentionItem} ${i === mentionIndex ? styles.mentionItemActive : ''}`}
+                  onClick={() => selectMention(a)}
+                  onMouseEnter={() => setMentionIndex(i)}
+                >
+                  <img src={a.logo} alt="" className={styles.mentionLogo} />
+                  <span className={styles.mentionLabel}>{a.label}</span>
+                  <span className={`${styles.mentionStatus} ${styles[`status_${status}`]}`}>{status}</span>
+                </button>
+              );
+            })}
+          </div>
+        )}
+        <textarea
+          ref={inputRef}
+          className={styles.input}
+          rows={2}
+          placeholder="Message for team — type @ to mention an agent…"
+          value={text}
+          onChange={handleTextChange}
+          onKeyDown={handleKeyDown}
+          disabled={!activeWorkspace || !relayOnline}
+        />
+        <button type="button" className={styles.sendBtn} onClick={send} disabled={!text.trim() || !activeWorkspace}>
+          Send
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,119 @@
+.panel {
+  padding: 16px;
+  flex-shrink: 0;
+}
+
+.hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin: 8px 0 12px;
+  line-height: 1.5;
+}
+
+.muted {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.avatarRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.avatarChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px 4px 4px;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-3);
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  font-size: 10px;
+  font-weight: 800;
+  color: #0a0a0a;
+  letter-spacing: 0.02em;
+}
+
+.avatarName {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.removeBtn {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 0 0 2px;
+}
+
+.removeBtn:hover {
+  color: #ff9a9a;
+}
+
+.addChip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px dashed var(--color-border);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.addChip:hover {
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+}
+
+.addRow {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.input {
+  flex: 1;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.addBtn {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.addBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}