cortex-workspace.jsx

import { useState, useEffect, useCallback, useRef } from "react";

// ─── DATA ───

const defaultWorkspace = {
  projects: [
    {
      id: "proj_001",
      name: "C3 - Claude Code Companion",
      color: "#E8A838",
      created: "2025-11-15T00:00:00Z",
      description: "Token usage reduction via AST compression, smart indexing, and session management",
      items: [
        {
          id: "item_001", type: "note", title: "Architecture Overview",
          content: "Flask backend + React dashboard. Windows compatible. Core modules: AST compressor, smart indexer, session manager.",
          tags: ["architecture"], updated: "2025-12-01T00:00:00Z", linkedTo: ["item_002"]
        },
        {
          id: "item_002", type: "decision", title: "Chose Flask over FastAPI",
          content: "Flask chosen for C3 backend because of simpler deployment on Windows, better compatibility with existing Ollama integration patterns, and lower learning curve for contributors.",
          context: "Evaluated Flask, FastAPI, and Express", outcome: "Flask",
          tags: ["backend"], updated: "2025-11-20T00:00:00Z", linkedTo: ["item_001"]
        },
        {
          id: "item_003", type: "task", title: "Add session export to JSON",
          status: "in_progress",
          tags: ["feature"], updated: "2026-01-10T00:00:00Z", linkedTo: []
        },
        {
          id: "item_004", type: "spec", title: "Dashboard API Endpoints",
          content: "GET /sessions - list all sessions\nGET /sessions/:id - session detail with token stats\nPOST /sessions/:id/compress - trigger AST compression\nDELETE /sessions/:id - remove session data",
          version: 3, tags: ["api"], updated: "2026-02-15T00:00:00Z", linkedTo: ["item_001"]
        }
      ]
    }
  ],
  apiLog: [
    { ts: "2026-03-27T10:00:00Z", agent: "claude", action: "read", target: "proj_001", detail: "Loaded project context for C3" },
    { ts: "2026-03-27T10:01:00Z", agent: "claude", action: "update", target: "item_004", detail: "Updated spec to v3 with new compression endpoint" }
  ]
};

function loadData() {
  return defaultWorkspace;
}

// ─── ICONS (inline SVG) ───
const Icons = {
  note: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
    </svg>
  ),
  decision: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/><path d="M16 12l-4-4-4 4"/><path d="M12 16V8"/>
    </svg>
  ),
  task: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
    </svg>
  ),
  spec: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
    </svg>
  ),
  plus: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
  ),
  link: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
    </svg>
  ),
  api: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
    </svg>
  ),
  trash: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
    </svg>
  ),
  project: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
    </svg>
  ),
  export: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
    </svg>
  ),
  close: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
    </svg>
  ),
  brain: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9.5 2A5.5 5.5 0 0 0 4 7.5c0 1.58.68 3 1.76 4L12 18l6.24-6.5A5.5 5.5 0 0 0 14.5 2a5.49 5.49 0 0 0-2.5.6A5.49 5.49 0 0 0 9.5 2z"/>
    </svg>
  )
};

const TYPE_META = {
  note:     { label: "Note",     color: "#6EC6FF", bg: "rgba(110,198,255,0.08)" },
  decision: { label: "Decision", color: "#E8A838", bg: "rgba(232,168,56,0.08)" },
  task:     { label: "Task",     color: "#7EE8A0", bg: "rgba(126,232,160,0.08)" },
  spec:     { label: "Spec",     color: "#C49AFF", bg: "rgba(196,154,255,0.08)" },
};

const TASK_STATUSES = ["todo", "in_progress", "done", "blocked"];
const STATUS_LABELS = { todo: "To Do", in_progress: "In Progress", done: "Done", blocked: "Blocked" };
const STATUS_COLORS = { todo: "#888", in_progress: "#E8A838", done: "#7EE8A0", blocked: "#FF6B6B" };

// ─── COMPONENTS ───

function Tag({ label }) {
  return <span style={{
    display: "inline-block", padding: "2px 8px", borderRadius: 4,
    background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.5)",
    fontSize: 11, fontFamily: "'IBM Plex Mono', monospace", marginRight: 4, marginBottom: 2
  }}>#{label}</span>;
}

function StatusBadge({ status, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px",
      borderRadius: 4, border: `1px solid ${STATUS_COLORS[status]}33`,
      background: `${STATUS_COLORS[status]}15`, color: STATUS_COLORS[status],
      fontSize: 11, fontFamily: "'IBM Plex Mono', monospace", cursor: "pointer",
      fontWeight: 600, letterSpacing: "0.5px", textTransform: "uppercase"
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: STATUS_COLORS[status] }}/>
      {STATUS_LABELS[status]}
    </button>
  );
}

function APILogEntry({ entry }) {
  const actionColors = { read: "#6EC6FF", update: "#E8A838", create: "#7EE8A0", delete: "#FF6B6B" };
  return (
    <div style={{
      display: "flex", gap: 10, alignItems: "flex-start", padding: "8px 0",
      borderBottom: "1px solid rgba(255,255,255,0.04)", fontSize: 12,
      fontFamily: "'IBM Plex Mono', monospace"
    }}>
      <span style={{ color: "rgba(255,255,255,0.3)", minWidth: 60, flexShrink: 0 }}>
        {new Date(entry.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
      </span>
      <span style={{
        padding: "1px 6px", borderRadius: 3, fontSize: 10, fontWeight: 700,
        background: `${actionColors[entry.action] || "#888"}20`,
        color: actionColors[entry.action] || "#888",
        textTransform: "uppercase", letterSpacing: "0.5px", flexShrink: 0
      }}>{entry.action}</span>
      <span style={{ color: "rgba(255,255,255,0.7)" }}>{entry.detail}</span>
    </div>
  );
}

function ItemCard({ item, isSelected, onSelect, allItems }) {
  const meta = TYPE_META[item.type];
  const linkedItems = (item.linkedTo || []).map(id => allItems.find(i => i.id === id)).filter(Boolean);

  return (
    <div
      onClick={() => onSelect(item.id)}
      style={{
        padding: "14px 16px", borderRadius: 8, cursor: "pointer",
        background: isSelected ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.02)",
        border: isSelected ? `1px solid ${meta.color}55` : "1px solid rgba(255,255,255,0.06)",
        transition: "all 0.15s ease", marginBottom: 6,
      }}
      onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = "rgba(255,255,255,0.05)"; }}
      onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = "rgba(255,255,255,0.02)"; }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
        <span style={{ color: meta.color, display: "flex" }}>{Icons[item.type]}</span>
        <span style={{ fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.9)", flex: 1 }}>{item.title}</span>
        {item.type === "task" && <StatusBadge status={item.status} onClick={(e) => e.stopPropagation()} />}
      </div>
      {item.tags && item.tags.length > 0 && (
        <div style={{ display: "flex", flexWrap: "wrap", gap: 2, marginBottom: linkedItems.length > 0 ? 6 : 0 }}>
          {item.tags.map(t => <Tag key={t} label={t} />)}
        </div>
      )}
      {linkedItems.length > 0 && (
        <div style={{ display: "flex", alignItems: "center", gap: 4, color: "rgba(255,255,255,0.3)", fontSize: 11 }}>
          {Icons.link}
          <span>{linkedItems.map(l => l.title).join(", ")}</span>
        </div>
      )}
    </div>
  );
}

function ItemEditor({ item, onUpdate, onDelete, allItems, onLink }) {
  const meta = TYPE_META[item.type];
  const [editContent, setEditContent] = useState(item.content || "");
  const [editTitle, setEditTitle] = useState(item.title);
  const [tagInput, setTagInput] = useState("");

  useEffect(() => {
    setEditContent(item.content || "");
    setEditTitle(item.title);
  }, [item.id]);

  const save = useCallback(() => {
    onUpdate({ ...item, title: editTitle, content: editContent, updated: new Date().toISOString() });
  }, [editTitle, editContent, item, onUpdate]);

  // Auto-save on blur
  const handleBlur = () => save();

  const addTag = () => {
    if (tagInput.trim() && !(item.tags || []).includes(tagInput.trim())) {
      onUpdate({ ...item, tags: [...(item.tags || []), tagInput.trim()], updated: new Date().toISOString() });
      setTagInput("");
    }
  };

  const removeTag = (tag) => {
    onUpdate({ ...item, tags: (item.tags || []).filter(t => t !== tag), updated: new Date().toISOString() });
  };

  const cycleStatus = () => {
    if (item.type !== "task") return;
    const idx = TASK_STATUSES.indexOf(item.status);
    const next = TASK_STATUSES[(idx + 1) % TASK_STATUSES.length];
    onUpdate({ ...item, status: next, updated: new Date().toISOString() });
  };

  const linkedItems = (item.linkedTo || []).map(id => allItems.find(i => i.id === id)).filter(Boolean);
  const linkableItems = allItems.filter(i => i.id !== item.id && !(item.linkedTo || []).includes(i.id));

  const inputStyle = {
    width: "100%", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 6, padding: "10px 12px", color: "rgba(255,255,255,0.9)",
    fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, outline: "none", resize: "vertical",
    boxSizing: "border-box"
  };

  return (
    <div style={{ padding: "24px 28px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
        <span style={{
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          width: 32, height: 32, borderRadius: 8, background: meta.bg, color: meta.color
        }}>{Icons[item.type]}</span>
        <span style={{
          fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "1px",
          color: meta.color, fontFamily: "'IBM Plex Mono', monospace"
        }}>{meta.label}</span>
        <span style={{ flex: 1 }}/>
        <button onClick={() => onDelete(item.id)} style={{
          display: "flex", alignItems: "center", gap: 4, padding: "5px 10px",
          background: "rgba(255,107,107,0.1)", border: "1px solid rgba(255,107,107,0.2)",
          borderRadius: 6, color: "#FF6B6B", fontSize: 11, cursor: "pointer",
          fontFamily: "'IBM Plex Mono', monospace"
        }}>{Icons.trash} Delete</button>
      </div>

      <input
        value={editTitle} onChange={(e) => setEditTitle(e.target.value)} onBlur={handleBlur}
        style={{ ...inputStyle, fontSize: 18, fontWeight: 700, marginBottom: 12,
          fontFamily: "'DM Sans', sans-serif", background: "transparent", border: "none",
          padding: "4px 0", borderBottom: "1px solid rgba(255,255,255,0.08)" }}
        placeholder="Title"
      />

      {item.type === "task" && (
        <div style={{ marginBottom: 16 }}>
          <StatusBadge status={item.status} onClick={cycleStatus} />
          <span style={{ fontSize: 11, color: "rgba(255,255,255,0.3)", marginLeft: 8 }}>click to cycle</span>
        </div>
      )}

      {item.type === "decision" && (
        <div style={{
          padding: "10px 14px", borderRadius: 6, marginBottom: 12,
          background: "rgba(232,168,56,0.06)", border: "1px solid rgba(232,168,56,0.15)"
        }}>
          <div style={{ fontSize: 11, color: "#E8A838", fontWeight: 600, marginBottom: 4, fontFamily: "'IBM Plex Mono', monospace" }}>
            OUTCOME
          </div>
          <div style={{ fontSize: 14, color: "rgba(255,255,255,0.85)" }}>{item.outcome || "—"}</div>
          {item.context && <div style={{ fontSize: 12, color: "rgba(255,255,255,0.4)", marginTop: 4 }}>{item.context}</div>}
        </div>
      )}

      {item.type === "spec" && item.version && (
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.3)", marginBottom: 8, fontFamily: "'IBM Plex Mono', monospace" }}>
          Version {item.version}
        </div>
      )}

      <textarea
        value={editContent} onChange={(e) => setEditContent(e.target.value)} onBlur={handleBlur}
        rows={item.type === "spec" ? 12 : 6}
        style={{ ...inputStyle, lineHeight: 1.6, marginBottom: 16 }}
        placeholder="Content..."
      />

      {/* Tags */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.3)", marginBottom: 6, fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600 }}>TAGS</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 4, alignItems: "center" }}>
          {(item.tags || []).map(t => (
            <span key={t} onClick={() => removeTag(t)} style={{
              display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px",
              borderRadius: 4, background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.5)",
              fontSize: 11, fontFamily: "'IBM Plex Mono', monospace", cursor: "pointer"
            }}>#{t} ×</span>
          ))}
          <input
            value={tagInput} onChange={(e) => setTagInput(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addTag(); }}}
            placeholder="add tag..."
            style={{
              background: "transparent", border: "none", color: "rgba(255,255,255,0.5)",
              fontSize: 11, fontFamily: "'IBM Plex Mono', monospace", outline: "none", width: 80
            }}
          />
        </div>
      </div>

      {/* Links */}
      <div>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.3)", marginBottom: 6, fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600 }}>
          LINKED ITEMS
        </div>
        {linkedItems.map(l => (
          <div key={l.id} style={{
            display: "flex", alignItems: "center", gap: 6, padding: "4px 0",
            color: TYPE_META[l.type].color, fontSize: 12
          }}>
            {Icons[l.type]} <span style={{ color: "rgba(255,255,255,0.7)" }}>{l.title}</span>
          </div>
        ))}
        {linkableItems.length > 0 && (
          <select
            onChange={(e) => { if (e.target.value) { onLink(item.id, e.target.value); e.target.value = ""; }}}
            style={{
              marginTop: 6, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
              borderRadius: 4, padding: "4px 8px", color: "rgba(255,255,255,0.5)", fontSize: 11,
              fontFamily: "'IBM Plex Mono', monospace", outline: "none"
            }}
          >
            <option value="">+ Link item...</option>
            {linkableItems.map(i => <option key={i.id} value={i.id}>{i.title}</option>)}
          </select>
        )}
      </div>

      <div style={{
        marginTop: 20, padding: "8px 0", borderTop: "1px solid rgba(255,255,255,0.04)",
        fontSize: 11, color: "rgba(255,255,255,0.2)", fontFamily: "'IBM Plex Mono', monospace"
      }}>
        Last updated: {new Date(item.updated).toLocaleDateString()} · ID: {item.id}
      </div>
    </div>
  );
}

// ─── API PANEL ───
function APIPanel({ workspace, onSimulate }) {
  const [method, setMethod] = useState("GET");
  const [endpoint, setEndpoint] = useState("/workspace/projects");
  const [response, setResponse] = useState(null);
  const logEndRef = useRef(null);

  const endpoints = [
    { method: "GET",  path: "/workspace/projects", desc: "List all projects" },
    { method: "GET",  path: "/workspace/projects/:id/items", desc: "Get project items" },
    { method: "POST", path: "/workspace/items", desc: "Create new item" },
    { method: "PUT",  path: "/workspace/items/:id", desc: "Update item" },
    { method: "GET",  path: "/workspace/search?q=", desc: "Search items" },
    { method: "GET",  path: "/workspace/context/:projectId", desc: "Get full project context (AI)" },
  ];

  const simulate = () => {
    const proj = workspace.projects[0];
    let result;
    if (endpoint.includes("/projects") && !endpoint.includes("/items") && !endpoint.includes("/context")) {
      result = { status: 200, data: workspace.projects.map(p => ({ id: p.id, name: p.name, itemCount: p.items.length })) };
    } else if (endpoint.includes("/items") && method === "GET") {
      result = { status: 200, data: proj ? proj.items : [] };
    } else if (endpoint.includes("/context")) {
      result = {
        status: 200,
        data: {
          project: proj?.name,
          summary: `${proj?.items.length} items: ${proj?.items.filter(i=>i.type==='note').length} notes, ${proj?.items.filter(i=>i.type==='decision').length} decisions, ${proj?.items.filter(i=>i.type==='task').length} tasks, ${proj?.items.filter(i=>i.type==='spec').length} specs`,
          recentDecisions: proj?.items.filter(i => i.type === 'decision').map(d => ({ title: d.title, outcome: d.outcome })),
          activeTasks: proj?.items.filter(i => i.type === 'task' && i.status !== 'done').map(t => ({ title: t.title, status: t.status })),
          currentSpecs: proj?.items.filter(i => i.type === 'spec').map(s => ({ title: s.title, version: s.version })),
        }
      };
    } else if (endpoint.includes("/search")) {
      result = { status: 200, data: [], note: "Search query empty — append query term" };
    } else if (method === "POST") {
      result = { status: 201, data: { id: "item_new", message: "Item created" } };
    } else if (method === "PUT") {
      result = { status: 200, data: { message: "Item updated" } };
    } else {
      result = { status: 200, data: { message: "OK" } };
    }
    setResponse(result);
    onSimulate(method, endpoint);
  };

  const monoStyle = { fontFamily: "'IBM Plex Mono', monospace" };
  const methodColors = { GET: "#6EC6FF", POST: "#7EE8A0", PUT: "#E8A838", DELETE: "#FF6B6B" };

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "16px 20px", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.4)", ...monoStyle, letterSpacing: "1px", marginBottom: 12 }}>
          API EXPLORER
        </div>

        <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
          <select value={method} onChange={e => setMethod(e.target.value)} style={{
            background: `${methodColors[method]}15`, border: `1px solid ${methodColors[method]}33`,
            borderRadius: 4, padding: "6px 8px", color: methodColors[method],
            fontSize: 12, ...monoStyle, fontWeight: 700, outline: "none"
          }}>
            {["GET","POST","PUT","DELETE"].map(m => <option key={m} value={m}>{m}</option>)}
          </select>
          <input value={endpoint} onChange={e => setEndpoint(e.target.value)} style={{
            flex: 1, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: 4, padding: "6px 10px", color: "rgba(255,255,255,0.8)",
            fontSize: 12, ...monoStyle, outline: "none"
          }}/>
          <button onClick={simulate} style={{
            background: "rgba(126,232,160,0.15)", border: "1px solid rgba(126,232,160,0.3)",
            borderRadius: 4, padding: "6px 14px", color: "#7EE8A0",
            fontSize: 12, ...monoStyle, fontWeight: 700, cursor: "pointer"
          }}>Send</button>
        </div>

        <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
          {endpoints.map(ep => (
            <button key={ep.path + ep.method} onClick={() => { setMethod(ep.method); setEndpoint(ep.path); }}
              style={{
                padding: "3px 8px", borderRadius: 3, fontSize: 10, ...monoStyle,
                background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)",
                color: "rgba(255,255,255,0.4)", cursor: "pointer"
              }}
              title={ep.desc}
            >
              <span style={{ color: methodColors[ep.method], fontWeight: 700 }}>{ep.method}</span> {ep.path}
            </button>
          ))}
        </div>
      </div>

      {response && (
        <div style={{ padding: "12px 20px", borderBottom: "1px solid rgba(255,255,255,0.06)", maxHeight: 220, overflow: "auto" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }}>
            <span style={{
              padding: "2px 6px", borderRadius: 3, fontSize: 11, ...monoStyle, fontWeight: 700,
              background: response.status < 300 ? "rgba(126,232,160,0.15)" : "rgba(255,107,107,0.15)",
              color: response.status < 300 ? "#7EE8A0" : "#FF6B6B"
            }}>{response.status}</span>
            <span style={{ fontSize: 11, color: "rgba(255,255,255,0.3)", ...monoStyle }}>Response</span>
          </div>
          <pre style={{
            ...monoStyle, fontSize: 11, color: "rgba(255,255,255,0.6)", lineHeight: 1.5,
            whiteSpace: "pre-wrap", wordBreak: "break-word", margin: 0
          }}>{JSON.stringify(response.data, null, 2)}</pre>
        </div>
      )}

      <div style={{ flex: 1, overflow: "auto", padding: "12px 20px" }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.4)", ...monoStyle, letterSpacing: "1px", marginBottom: 8 }}>
          ACTIVITY LOG
        </div>
        {workspace.apiLog.slice().reverse().map((entry, i) => (
          <APILogEntry key={i} entry={entry} />
        ))}
        <div ref={logEndRef}/>
      </div>
    </div>
  );
}

// ─── NEW ITEM MODAL ───
function NewItemModal({ onClose, onCreate }) {
  const [type, setType] = useState("note");
  const [title, setTitle] = useState("");
  const meta = TYPE_META[type];

  return (
    <div style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", display: "flex",
      alignItems: "center", justifyContent: "center", zIndex: 1000,
      backdropFilter: "blur(4px)"
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        background: "#1a1a1e", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 12,
        padding: 28, width: 400, maxWidth: "90vw"
      }}>
        <div style={{ fontSize: 16, fontWeight: 700, color: "rgba(255,255,255,0.9)", marginBottom: 20, fontFamily: "'DM Sans', sans-serif" }}>
          New Workspace Item
        </div>

        <div style={{ display: "flex", gap: 6, marginBottom: 16 }}>
          {Object.entries(TYPE_META).map(([key, m]) => (
            <button key={key} onClick={() => setType(key)} style={{
              flex: 1, padding: "8px 4px", borderRadius: 6, cursor: "pointer",
              background: type === key ? `${m.color}20` : "rgba(255,255,255,0.03)",
              border: type === key ? `1px solid ${m.color}44` : "1px solid rgba(255,255,255,0.06)",
              color: type === key ? m.color : "rgba(255,255,255,0.4)",
              fontSize: 12, fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600,
              display: "flex", flexDirection: "column", alignItems: "center", gap: 4
            }}>
              {Icons[key]}
              {m.label}
            </button>
          ))}
        </div>

        <input
          value={title} onChange={e => setTitle(e.target.value)} autoFocus
          placeholder={`${meta.label} title...`}
          style={{
            width: "100%", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: 6, padding: "10px 12px", color: "rgba(255,255,255,0.9)",
            fontFamily: "'DM Sans', sans-serif", fontSize: 14, outline: "none",
            marginBottom: 16, boxSizing: "border-box"
          }}
          onKeyDown={e => { if (e.key === "Enter" && title.trim()) onCreate(type, title.trim()); }}
        />

        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
          <button onClick={onClose} style={{
            padding: "8px 16px", borderRadius: 6, background: "rgba(255,255,255,0.05)",
            border: "1px solid rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.5)",
            fontSize: 13, cursor: "pointer", fontFamily: "'DM Sans', sans-serif"
          }}>Cancel</button>
          <button onClick={() => { if (title.trim()) onCreate(type, title.trim()); }} style={{
            padding: "8px 16px", borderRadius: 6, background: `${meta.color}20`,
            border: `1px solid ${meta.color}44`, color: meta.color,
            fontSize: 13, cursor: "pointer", fontFamily: "'DM Sans', sans-serif", fontWeight: 600
          }}>Create</button>
        </div>
      </div>
    </div>
  );
}

// ─── MAIN APP ───
export default function CortexWorkspace() {
  const [workspace, setWorkspace] = useState(() => loadData());
  const [selectedProject, setSelectedProject] = useState(0);
  const [selectedItem, setSelectedItem] = useState(null);
  const [showAPI, setShowAPI] = useState(false);
  const [showNewItem, setShowNewItem] = useState(false);
  const [filterType, setFilterType] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");


  const project = workspace.projects[selectedProject];
  const items = project ? project.items : [];

  const filteredItems = items.filter(item => {
    if (filterType !== "all" && item.type !== filterType) return false;
    if (searchQuery && !item.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
        !(item.content || "").toLowerCase().includes(searchQuery.toLowerCase()) &&
        !(item.tags || []).some(t => t.toLowerCase().includes(searchQuery.toLowerCase()))) return false;
    return true;
  });

  const updateItem = (updated) => {
    const ws = { ...workspace };
    ws.projects[selectedProject].items = ws.projects[selectedProject].items.map(
      i => i.id === updated.id ? updated : i
    );
    ws.apiLog = [...ws.apiLog, {
      ts: new Date().toISOString(), agent: "human", action: "update",
      target: updated.id, detail: `Updated "${updated.title}"`
    }];
    setWorkspace(ws);
  };

  const deleteItem = (id) => {
    const ws = { ...workspace };
    const item = ws.projects[selectedProject].items.find(i => i.id === id);
    ws.projects[selectedProject].items = ws.projects[selectedProject].items.filter(i => i.id !== id);
    ws.projects[selectedProject].items.forEach(i => {
      if (i.linkedTo) i.linkedTo = i.linkedTo.filter(l => l !== id);
    });
    ws.apiLog = [...ws.apiLog, {
      ts: new Date().toISOString(), agent: "human", action: "delete",
      target: id, detail: `Deleted "${item?.title}"`
    }];
    setWorkspace(ws);
    setSelectedItem(null);
  };

  const linkItems = (fromId, toId) => {
    const ws = { ...workspace };
    const item = ws.projects[selectedProject].items.find(i => i.id === fromId);
    if (item && !(item.linkedTo || []).includes(toId)) {
      item.linkedTo = [...(item.linkedTo || []), toId];
      item.updated = new Date().toISOString();
    }
    setWorkspace(ws);
  };

  const createItem = (type, title) => {
    const ws = { ...workspace };
    const newItem = {
      id: `item_${Date.now()}`, type, title, content: "",
      tags: [], updated: new Date().toISOString(), linkedTo: [],
      ...(type === "task" ? { status: "todo" } : {}),
      ...(type === "decision" ? { context: "", outcome: "" } : {}),
      ...(type === "spec" ? { version: 1 } : {}),
    };
    ws.projects[selectedProject].items.push(newItem);
    ws.apiLog = [...ws.apiLog, {
      ts: new Date().toISOString(), agent: "human", action: "create",
      target: newItem.id, detail: `Created ${type} "${title}"`
    }];
    setWorkspace(ws);
    setSelectedItem(newItem.id);
    setShowNewItem(false);
  };

  const simulateAPI = (method, endpoint) => {
    const ws = { ...workspace };
    ws.apiLog = [...ws.apiLog, {
      ts: new Date().toISOString(), agent: "api_explorer", action: method.toLowerCase() === "get" ? "read" : method.toLowerCase() === "post" ? "create" : "update",
      target: "api", detail: `${method} ${endpoint}`
    }];
    setWorkspace(ws);
  };

  const exportWorkspace = () => {
    const blob = new Blob([JSON.stringify(workspace, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "cortex-workspace.json";
    a.click();
    URL.revokeObjectURL(url);
  };

  const resetWorkspace = () => {
    setWorkspace(defaultWorkspace);
    setSelectedItem(null);
  };

  const selectedItemData = items.find(i => i.id === selectedItem);

  return (
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
        * { margin: 0; padding: 0; box-sizing: border-box; }
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
      `}</style>
      <div style={{
        width: "100%", height: "100vh", background: "#111114", color: "rgba(255,255,255,0.9)",
        fontFamily: "'DM Sans', sans-serif", display: "flex", flexDirection: "column", overflow: "hidden"
      }}>
        {/* Header */}
        <div style={{
          display: "flex", alignItems: "center", gap: 12, padding: "12px 20px",
          borderBottom: "1px solid rgba(255,255,255,0.06)", flexShrink: 0
        }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 8, color: "#C49AFF"
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="3"/><path d="M12 1v4m0 14v4M4.22 4.22l2.83 2.83m9.9 9.9l2.83 2.83M1 12h4m14 0h4M4.22 19.78l2.83-2.83m9.9-9.9l2.83-2.83"/>
            </svg>
            <span style={{ fontSize: 17, fontWeight: 700, letterSpacing: "-0.3px" }}>Cortex</span>
          </div>
          <span style={{ fontSize: 12, color: "rgba(255,255,255,0.25)", fontFamily: "'IBM Plex Mono', monospace" }}>
            persistent AI workspace
          </span>
          <span style={{ flex: 1 }}/>

          <button onClick={() => setShowAPI(!showAPI)} style={{
            display: "flex", alignItems: "center", gap: 5, padding: "6px 12px",
            background: showAPI ? "rgba(196,154,255,0.15)" : "rgba(255,255,255,0.03)",
            border: showAPI ? "1px solid rgba(196,154,255,0.3)" : "1px solid rgba(255,255,255,0.06)",
            borderRadius: 6, color: showAPI ? "#C49AFF" : "rgba(255,255,255,0.5)",
            fontSize: 12, cursor: "pointer", fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600
          }}>{Icons.api} API</button>

          <button onClick={exportWorkspace} style={{
            display: "flex", alignItems: "center", gap: 5, padding: "6px 12px",
            background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)",
            borderRadius: 6, color: "rgba(255,255,255,0.5)",
            fontSize: 12, cursor: "pointer", fontFamily: "'IBM Plex Mono', monospace"
          }}>{Icons.export} Export</button>

          <button onClick={resetWorkspace} style={{
            padding: "6px 12px", background: "rgba(255,255,255,0.03)",
            border: "1px solid rgba(255,255,255,0.06)", borderRadius: 6,
            color: "rgba(255,255,255,0.35)", fontSize: 12, cursor: "pointer",
            fontFamily: "'IBM Plex Mono', monospace"
          }}>Reset Demo</button>
        </div>

        {/* Main Layout */}
        <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
          {/* Sidebar - Items List */}
          <div style={{
            width: 320, flexShrink: 0, display: "flex", flexDirection: "column",
            borderRight: "1px solid rgba(255,255,255,0.06)", overflow: "hidden"
          }}>
            {/* Project Header */}
            <div style={{ padding: "14px 16px", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
                <span style={{ color: project?.color || "#888", display: "flex" }}>{Icons.project}</span>
                <span style={{ fontSize: 14, fontWeight: 600, flex: 1 }}>{project?.name || "No project"}</span>
              </div>
              {project?.description && (
                <div style={{ fontSize: 12, color: "rgba(255,255,255,0.35)", lineHeight: 1.4, marginBottom: 10 }}>
                  {project.description}
                </div>
              )}

              {/* Search */}
              <input
                value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
                placeholder="Search items..."
                style={{
                  width: "100%", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
                  borderRadius: 6, padding: "7px 10px", color: "rgba(255,255,255,0.8)",
                  fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, outline: "none",
                  marginBottom: 10, boxSizing: "border-box"
                }}
              />

              {/* Filters + Add */}
              <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
                {["all", ...Object.keys(TYPE_META)].map(t => (
                  <button key={t} onClick={() => setFilterType(t)} style={{
                    padding: "3px 8px", borderRadius: 4, fontSize: 11,
                    fontFamily: "'IBM Plex Mono', monospace", cursor: "pointer",
                    background: filterType === t ? "rgba(255,255,255,0.1)" : "transparent",
                    border: "none", color: filterType === t
                      ? (t === "all" ? "rgba(255,255,255,0.8)" : TYPE_META[t].color)
                      : "rgba(255,255,255,0.3)"
                  }}>{t === "all" ? "All" : TYPE_META[t].label}</button>
                ))}
                <span style={{ flex: 1 }}/>
                <button onClick={() => setShowNewItem(true)} style={{
                  display: "flex", alignItems: "center", justifyContent: "center",
                  width: 26, height: 26, borderRadius: 6, cursor: "pointer",
                  background: "rgba(126,232,160,0.1)", border: "1px solid rgba(126,232,160,0.2)",
                  color: "#7EE8A0"
                }}>{Icons.plus}</button>
              </div>
            </div>

            {/* Items */}
            <div style={{ flex: 1, overflow: "auto", padding: "8px 10px" }}>
              {filteredItems.length === 0 ? (
                <div style={{ padding: 20, textAlign: "center", color: "rgba(255,255,255,0.2)", fontSize: 13 }}>
                  {searchQuery ? "No matching items" : "No items yet — create one"}
                </div>
              ) : filteredItems.map(item => (
                <ItemCard
                  key={item.id} item={item} allItems={items}
                  isSelected={selectedItem === item.id}
                  onSelect={setSelectedItem}
                />
              ))}
            </div>

            {/* Stats bar */}
            <div style={{
              padding: "8px 16px", borderTop: "1px solid rgba(255,255,255,0.06)",
              display: "flex", gap: 12, fontSize: 11, fontFamily: "'IBM Plex Mono', monospace",
              color: "rgba(255,255,255,0.25)"
            }}>
              {Object.entries(TYPE_META).map(([key, m]) => (
                <span key={key} style={{ display: "flex", alignItems: "center", gap: 3 }}>
                  <span style={{ color: m.color }}>{items.filter(i => i.type === key).length}</span> {m.label.toLowerCase()}s
                </span>
              ))}
            </div>
          </div>

          {/* Main Content Area */}
          <div style={{ flex: 1, overflow: "auto", display: "flex" }}>
            <div style={{ flex: 1, overflow: "auto" }}>
              {selectedItemData ? (
                <ItemEditor
                  item={selectedItemData}
                  onUpdate={updateItem}
                  onDelete={deleteItem}
                  allItems={items}
                  onLink={linkItems}
                />
              ) : (
                <div style={{
                  display: "flex", flexDirection: "column", alignItems: "center",
                  justifyContent: "center", height: "100%", color: "rgba(255,255,255,0.15)"
                }}>
                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" style={{ marginBottom: 16, opacity: 0.3 }}>
                    <circle cx="12" cy="12" r="3"/><path d="M12 1v4m0 14v4M4.22 4.22l2.83 2.83m9.9 9.9l2.83 2.83M1 12h4m14 0h4M4.22 19.78l2.83-2.83m9.9-9.9l2.83-2.83"/>
                  </svg>
                  <div style={{ fontSize: 15, marginBottom: 6 }}>Select an item to edit</div>
                  <div style={{ fontSize: 12 }}>or create a new one with the + button</div>
                </div>
              )}
            </div>

            {/* API Panel */}
            {showAPI && (
              <div style={{
                width: 380, flexShrink: 0, borderLeft: "1px solid rgba(255,255,255,0.06)",
                overflow: "hidden", display: "flex", flexDirection: "column"
              }}>
                <APIPanel workspace={workspace} onSimulate={simulateAPI} />
              </div>
            )}
          </div>
        </div>
      </div>

      {showNewItem && <NewItemModal onClose={() => setShowNewItem(false)} onCreate={createItem} />}
    </>
  );
}