neural-loom 0.2.19 → 0.2.40

package/src/app/components/MarkdownPreview.tsx

@@ -0,0 +1,528 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+
+interface MarkdownPreviewProps {
+  content: string;
+}
+
+interface Block {
+  type: "p" | "h" | "code" | "blockquote" | "ul" | "ol" | "table" | "hr" | "empty";
+  level?: number;
+  content?: string | string[];
+  language?: string;
+}
+
+export default function MarkdownPreview({ content }: MarkdownPreviewProps) {
+  const blocks = useMemo(() => {
+    if (!content) return [];
+    
+    const lines = content.split("\n");
+    const parsedBlocks: Block[] = [];
+    let currentBlock: Block | null = null;
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+
+      // Code block handling
+      if (currentBlock && currentBlock.type === "code") {
+        if (line.trim().startsWith("```")) {
+          parsedBlocks.push(currentBlock);
+          currentBlock = null;
+        } else {
+          (currentBlock.content as string[]).push(line);
+        }
+        continue;
+      }
+
+      // Table block handling
+      if (currentBlock && currentBlock.type === "table") {
+        if (line.trim().startsWith("|")) {
+          (currentBlock.content as string[]).push(line);
+          continue;
+        } else {
+          parsedBlocks.push(currentBlock);
+          currentBlock = null;
+        }
+      }
+
+      const trimmed = line.trim();
+
+      // Code block start
+      if (trimmed.startsWith("```")) {
+        if (currentBlock) parsedBlocks.push(currentBlock);
+        const lang = trimmed.substring(3).trim();
+        currentBlock = { type: "code", language: lang, content: [] };
+        continue;
+      }
+
+      // Horizontal rule
+      if (/^(\s*[-*_]\s*){3,}$/.test(trimmed)) {
+        if (currentBlock) parsedBlocks.push(currentBlock);
+        parsedBlocks.push({ type: "hr" });
+        currentBlock = null;
+        continue;
+      }
+
+      // Heading
+      const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
+      if (headingMatch) {
+        if (currentBlock) parsedBlocks.push(currentBlock);
+        parsedBlocks.push({ type: "h", level: headingMatch[1].length, content: headingMatch[2] });
+        currentBlock = null;
+        continue;
+      }
+
+      // Blockquote
+      const blockquoteMatch = line.match(/^>\s*(.*)$/);
+      if (blockquoteMatch) {
+        if (currentBlock) {
+          if (currentBlock.type === "blockquote") {
+            (currentBlock.content as string[]).push(blockquoteMatch[1]);
+            continue;
+          } else {
+            parsedBlocks.push(currentBlock);
+          }
+        }
+        currentBlock = { type: "blockquote", content: [blockquoteMatch[1]] };
+        continue;
+      }
+
+      // Unordered list
+      const ulMatch = line.match(/^([-*+])\s+(.*)$/);
+      if (ulMatch) {
+        if (currentBlock) {
+          if (currentBlock.type === "ul") {
+            (currentBlock.content as string[]).push(ulMatch[2]);
+            continue;
+          } else {
+            parsedBlocks.push(currentBlock);
+          }
+        }
+        currentBlock = { type: "ul", content: [ulMatch[2]] };
+        continue;
+      }
+
+      // Ordered list
+      const olMatch = line.match(/^(\d+)\.\s+(.*)$/);
+      if (olMatch) {
+        if (currentBlock) {
+          if (currentBlock.type === "ol") {
+            (currentBlock.content as string[]).push(olMatch[2]);
+            continue;
+          } else {
+            parsedBlocks.push(currentBlock);
+          }
+        }
+        currentBlock = { type: "ol", content: [olMatch[2]] };
+        continue;
+      }
+
+      // Table start
+      if (trimmed.startsWith("|")) {
+        if (currentBlock) parsedBlocks.push(currentBlock);
+        currentBlock = { type: "table", content: [line] };
+        continue;
+      }
+
+      // Empty line
+      if (trimmed === "") {
+        if (currentBlock) {
+          parsedBlocks.push(currentBlock);
+          currentBlock = null;
+        }
+        continue;
+      }
+
+      // Paragraph
+      if (currentBlock) {
+        if (currentBlock.type === "p") {
+          currentBlock.content = (currentBlock.content as string) + " " + trimmed;
+        } else {
+          parsedBlocks.push(currentBlock);
+          currentBlock = { type: "p", content: trimmed };
+        }
+      } else {
+        currentBlock = { type: "p", content: trimmed };
+      }
+    }
+
+    if (currentBlock) {
+      parsedBlocks.push(currentBlock);
+    }
+
+    return parsedBlocks;
+  }, [content]);
+
+  let keyCounter = 0;
+
+  // Safe inline regex-based React parser
+  function parseInline(text: string): React.ReactNode[] {
+    function parseSegment(str: string): React.ReactNode[] {
+      if (!str) return [];
+
+      const codeMatch = str.match(/`(.*?)`/);
+      const boldMatch = str.match(/\*\*(.*?)\*\*/);
+      const italicMatch = str.match(/\*(.*?)\*/);
+      const linkMatch = str.match(/\[(.*?)\]\((.*?)\)/);
+
+      const matches = [
+        codeMatch ? { index: codeMatch.index!, type: "code", match: codeMatch } : null,
+        boldMatch ? { index: boldMatch.index!, type: "bold", match: boldMatch } : null,
+        italicMatch ? { index: italicMatch.index!, type: "italic", match: italicMatch } : null,
+        linkMatch ? { index: linkMatch.index!, type: "link", match: linkMatch } : null,
+      ].filter(Boolean) as { index: number; type: string; match: RegExpMatchArray }[];
+
+      if (matches.length === 0) {
+        return [str];
+      }
+
+      matches.sort((a, b) => a.index - b.index);
+      const first = matches[0];
+
+      const prefix = str.substring(0, first.index);
+      const matchedText = first.match[0];
+      const suffix = str.substring(first.index + matchedText.length);
+
+      const nodes: React.ReactNode[] = [];
+      if (prefix) {
+        nodes.push(prefix);
+      }
+
+      const key = `inline-${first.type}-${keyCounter++}`;
+      if (first.type === "code") {
+        nodes.push(<code key={key} style={inlineCodeStyle}>{first.match[1]}</code>);
+      } else if (first.type === "bold") {
+        nodes.push(<strong key={key} style={{ fontWeight: 700, color: "var(--foreground)" }}>{parseSegment(first.match[1])}</strong>);
+      } else if (first.type === "italic") {
+        nodes.push(<em key={key} style={{ fontStyle: "italic" }}>{parseSegment(first.match[1])}</em>);
+      } else if (first.type === "link") {
+        nodes.push(
+          <a key={key} href={first.match[2]} target="_blank" rel="noopener noreferrer" style={linkStyle}>
+            {parseSegment(first.match[1])}
+          </a>
+        );
+      }
+
+      return [...nodes, ...parseSegment(suffix)];
+    }
+
+    return parseSegment(text);
+  }
+
+  function renderTable(rows: string[], key: string) {
+    const parsedRows = rows.map((row) =>
+      row
+        .split("|")
+        .map((c) => c.trim())
+        .filter((_, idx, arr) => idx > 0 && idx < arr.length - 1)
+    );
+
+    if (parsedRows.length === 0) return null;
+
+    const headers = parsedRows[0];
+    const dataRows = parsedRows.slice(1).filter((r) => !r.every((cell) => cell.startsWith("-") || cell === ""));
+
+    return (
+      <div key={key} style={tableContainerStyle}>
+        <table style={tableStyle}>
+          <thead>
+            <tr>
+              {headers.map((h, i) => (
+                <th key={i} style={tableHeaderStyle}>{parseInline(h)}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {dataRows.map((row, rIdx) => (
+              <tr key={rIdx} style={rIdx % 2 === 0 ? tableRowStyleEven : tableRowStyleOdd}>
+                {row.map((cell, cIdx) => (
+                  <td key={cIdx} style={tableCellStyle}>{parseInline(cell)}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  return (
+    <div style={containerStyle}>
+      {blocks.map((block, idx) => {
+        const key = `block-${block.type}-${idx}`;
+        
+        switch (block.type) {
+          case "h": {
+            const headingContent = parseInline(block.content as string);
+            switch (block.level) {
+              case 1:
+                return <h1 key={key} style={h1Style}>{headingContent}</h1>;
+              case 2:
+                return <h2 key={key} style={h2Style}>{headingContent}</h2>;
+              case 3:
+                return <h3 key={key} style={h3Style}>{headingContent}</h3>;
+              default:
+                return <h4 key={key} style={h4Style}>{headingContent}</h4>;
+            }
+          }
+          case "code": {
+            const rawCode = (block.content as string[]).join("\n");
+            return <CodeBlock key={key} code={rawCode} language={block.language || ""} />;
+          }
+          case "blockquote": {
+            return (
+              <blockquote key={key} style={blockquoteStyle}>
+                {block.content && (block.content as string[]).map((line, lIdx) => (
+                  <p key={lIdx} style={{ margin: "0.25rem 0" }}>{parseInline(line)}</p>
+                ))}
+              </blockquote>
+            );
+          }
+          case "ul": {
+            return (
+              <ul key={key} style={ulStyle}>
+                {block.content && (block.content as string[]).map((line, lIdx) => (
+                  <li key={lIdx} style={liStyle}>
+                    <span style={{ marginRight: "0.5rem", color: "var(--accent)" }}>•</span>
+                    <div style={{ flex: 1 }}>{parseInline(line)}</div>
+                  </li>
+                ))}
+              </ul>
+            );
+          }
+          case "ol": {
+            return (
+              <ol key={key} style={olStyle}>
+                {block.content && (block.content as string[]).map((line, lIdx) => (
+                  <li key={lIdx} style={liStyle}>
+                    <span style={{ marginRight: "0.5rem", color: "var(--accent)", fontWeight: 600 }}>{lIdx + 1}.</span>
+                    <div style={{ flex: 1 }}>{parseInline(line)}</div>
+                  </li>
+                ))}
+              </ol>
+            );
+          }
+          case "table": {
+            return renderTable(block.content as string[], key);
+          }
+          case "hr": {
+            return <hr key={key} style={hrStyle} />;
+          }
+          case "p": {
+            return <p key={key} style={pStyle}>{parseInline(block.content as string)}</p>;
+          }
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}
+
+function CodeBlock({ code, language }: { code: string; language: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <div style={codeBlockContainerStyle}>
+      <div style={codeBlockHeaderStyle}>
+        <span>{language || "code"}</span>
+        <button onClick={handleCopy} style={copyBtnStyle}>
+          {copied ? "Copied! ✓" : "Copy"}
+        </button>
+      </div>
+      <pre style={preStyle}><code>{code}</code></pre>
+    </div>
+  );
+}
+
+// Styling Constants for Preview Document (Vanilla dark elements matching NeuralLoom layout)
+const containerStyle: React.CSSProperties = {
+  fontFamily: "var(--font-sans), sans-serif",
+  color: "var(--foreground)",
+  lineHeight: 1.6,
+  padding: "1.5rem",
+  overflowY: "auto",
+  height: "100%",
+  backgroundColor: "#080c14",
+  borderLeft: "1px solid var(--border)",
+};
+
+const pStyle: React.CSSProperties = {
+  fontSize: "0.875rem",
+  marginBottom: "1rem",
+  color: "var(--foreground-muted, #94a3b8)",
+};
+
+const h1Style: React.CSSProperties = {
+  fontSize: "1.5rem",
+  fontWeight: 700,
+  margin: "1.5rem 0 1rem 0",
+  paddingBottom: "0.3rem",
+  borderBottom: "1px solid var(--border)",
+  color: "var(--foreground)",
+  background: "linear-gradient(135deg, #fff 0%, #a855f7 100%)",
+  WebkitBackgroundClip: "text",
+  WebkitTextFillColor: "transparent",
+};
+
+const h2Style: React.CSSProperties = {
+  fontSize: "1.25rem",
+  fontWeight: 650,
+  margin: "1.25rem 0 0.85rem 0",
+  paddingBottom: "0.25rem",
+  borderBottom: "1px solid var(--border)",
+  color: "var(--foreground)",
+};
+
+const h3Style: React.CSSProperties = {
+  fontSize: "1.05rem",
+  fontWeight: 600,
+  margin: "1rem 0 0.75rem 0",
+  color: "var(--foreground)",
+};
+
+const h4Style: React.CSSProperties = {
+  fontSize: "0.925rem",
+  fontWeight: 600,
+  margin: "0.85rem 0 0.5rem 0",
+  color: "var(--foreground)",
+};
+
+const ulStyle: React.CSSProperties = {
+  listStyleType: "none",
+  padding: 0,
+  margin: "0 0 1rem 0",
+};
+
+const olStyle: React.CSSProperties = {
+  listStyleType: "none",
+  padding: 0,
+  margin: "0 0 1rem 0",
+};
+
+const liStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "flex-start",
+  fontSize: "0.875rem",
+  marginBottom: "0.375rem",
+  color: "var(--foreground-muted, #94a3b8)",
+};
+
+const hrStyle: React.CSSProperties = {
+  border: "none",
+  height: "1px",
+  background: "linear-gradient(90deg, var(--border) 0%, rgba(255,255,255,0.05) 100%)",
+  margin: "1.5rem 0",
+};
+
+// Reuse code block styles
+const inlineCodeStyle: React.CSSProperties = {
+  fontFamily: "var(--font-mono), monospace",
+  fontSize: "0.85em",
+  backgroundColor: "rgba(255, 255, 255, 0.06)",
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  borderRadius: "4px",
+  padding: "0.1rem 0.3rem",
+  color: "#f87171",
+};
+
+const linkStyle: React.CSSProperties = {
+  color: "#60a5fa",
+  textDecoration: "underline",
+  fontWeight: 500,
+};
+
+const tableContainerStyle: React.CSSProperties = {
+  width: "100%",
+  overflowX: "auto",
+  margin: "1rem 0",
+  borderRadius: "8px",
+  border: "1px solid var(--border)",
+  backgroundColor: "rgba(255, 255, 255, 0.01)",
+};
+
+const tableStyle: React.CSSProperties = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: "0.85rem",
+};
+
+const tableHeaderStyle: React.CSSProperties = {
+  backgroundColor: "rgba(255, 255, 255, 0.03)",
+  borderBottom: "2px solid var(--border)",
+  padding: "0.5rem 0.75rem",
+  fontWeight: 700,
+  textAlign: "left",
+  color: "var(--foreground)",
+};
+
+const tableCellStyle: React.CSSProperties = {
+  borderBottom: "1px solid var(--border)",
+  padding: "0.5rem 0.75rem",
+  color: "var(--foreground-muted, #94a3b8)",
+};
+
+const tableRowStyleEven: React.CSSProperties = {
+  backgroundColor: "rgba(255, 255, 255, 0.01)",
+};
+
+const tableRowStyleOdd: React.CSSProperties = {
+  backgroundColor: "transparent",
+};
+
+const blockquoteStyle: React.CSSProperties = {
+  borderLeft: "4px solid #a855f7",
+  backgroundColor: "rgba(168, 85, 247, 0.03)",
+  padding: "0.5rem 1rem",
+  margin: "1rem 0",
+  borderRadius: "4px",
+  fontStyle: "italic",
+  color: "var(--muted)",
+};
+
+const codeBlockContainerStyle: React.CSSProperties = {
+  margin: "1rem 0",
+  borderRadius: "8px",
+  border: "1px solid var(--border)",
+  backgroundColor: "#05070a",
+  overflow: "hidden",
+};
+
+const codeBlockHeaderStyle: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "0.35rem 0.75rem",
+  backgroundColor: "rgba(255, 255, 255, 0.02)",
+  borderBottom: "1px solid var(--border)",
+  fontSize: "0.7rem",
+  color: "var(--muted)",
+  textTransform: "uppercase",
+  fontFamily: "var(--font-mono), monospace",
+};
+
+const preStyle: React.CSSProperties = {
+  margin: 0,
+  padding: "1rem",
+  overflowX: "auto",
+  fontSize: "0.8rem",
+  fontFamily: "var(--font-mono), monospace",
+  lineHeight: 1.5,
+  color: "#e2e8f0",
+};
+
+const copyBtnStyle: React.CSSProperties = {
+  background: "none",
+  border: "1px solid var(--border)",
+  borderRadius: "4px",
+  padding: "2px 6px",
+  color: "var(--muted)",
+  cursor: "pointer",
+  fontSize: "0.65rem",
+  transition: "all 0.1s ease",
+};

package/src/app/layout.tsx

@@ -15,6 +15,12 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
   title: "NeuralLoom - Unified AI Agent Orchestrator & Context Bridge",
   description: "Advanced console dashboard and context staging manager for Claude Code and simulated AI agents.",
+  icons: {
+    icon: "/logo.png",
+    shortcut: "/logo.png",
+    apple: "/logo.png",
+  },
+  manifest: "/manifest.json",
 };
 
 export default function RootLayout({

package/src/app/page.module.css

@@ -335,5 +335,7 @@
   padding: 1rem 1.5rem;
   gap: 1rem;
   overflow: hidden;
+  max-width: none;
+  width: 100%;
 }
 

package/src/app/page.tsx

@@ -89,6 +89,7 @@ export default function Home() {
   const [isClaudeDockerLaunch, setIsClaudeDockerLaunch] = useState<boolean>(false);
   const [serverCwd, setServerCwd] = useState<string>("");
   const [wsPort, setWsPort] = useState<number>(3001);
+  const [appVersion, setAppVersion] = useState<string>("0.2.19");
   const [lastSessionConfig, setLastSessionConfig] = useState<{
     type: 'mock' | 'claude' | 'claude-docker' | 'claude-ssh' | 'aider' | 'aider-docker';
     name?: string;
@@ -115,6 +116,9 @@ export default function Home() {
       if (data.originalCwd) {
         setServerCwd(data.originalCwd);
       }
+      if (data.version) {
+        setAppVersion(data.version);
+      }
     } catch (err) {
       console.error("Failed to fetch sessions:", err);
     }
@@ -140,6 +144,14 @@ export default function Home() {
       await fetchRecents();
     };
     initFetch();
+    
+    // Register PWA Service Worker for standalone taskbar icon installation
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js')
+        .then((reg) => console.log('Service Worker registered:', reg.scope))
+        .catch((err) => console.error('Service Worker registration failed:', err));
+    }
+
     const interval = setInterval(fetchSessions, 4000);
     return () => clearInterval(interval);
   }, []);
@@ -232,9 +244,12 @@ export default function Home() {
     <div className={`${styles.container} ${activeSession ? styles.containerActive : ""}`}>
       {/* Header */}
       <header className={styles.header}>
-        <div className={styles.logoArea}>
-          <h1 className={styles.title}>NeuralLoom</h1>
-          <span className={styles.subtitle}>Unified AI Orchestrator & Context Bridge</span>
+        <div style={{ display: "flex", alignItems: "center", gap: "1.5rem" }}>
+          <img src="/logo.png" alt="NeuralLoom Logo" style={{ width: "160px", height: "160px", borderRadius: "16px", objectFit: "contain" }} />
+          <div className={styles.logoArea}>
+            <h1 className={styles.title} style={{ margin: 0, lineHeight: 1.1 }}>NeuralLoom</h1>
+            <span className={styles.subtitle}>Unified AI Orchestrator & Context Bridge</span>
+          </div>
         </div>
         <div className={styles.statusIndicator}>
           <span className={styles.pulseDot}></span>
@@ -470,8 +485,22 @@ export default function Home() {
             </section>
           )}
 
-          {/* Context Hub Staging section */}
+          {/* Workspace Shell Terminal */}
           <section>
+            <h2 className={styles.sectionTitle}>Workspace Shell Terminal</h2>
+            <div className="card" style={{ display: "flex", flexDirection: "column", border: "1px solid var(--border)", padding: 0 }}>
+              <div className={styles.agentHeader} style={{ justifyContent: "space-between", background: "rgba(255, 255, 255, 0.02)" }}>
+                <span style={{ fontWeight: 600, display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.85rem" }}>
+                  💻 Local Workspace Shell (CWD: {serverCwd || "root"})
+                </span>
+                <span style={{ fontSize: "0.7rem", color: "var(--muted)" }}>Pre-configured environment</span>
+              </div>
+              <TerminalConsole sessionId="workspace-terminal" height="300px" wsPort={wsPort} />
+            </div>
+          </section>
+
+          {/* Context Hub Staging section */}
+          <section style={{ marginTop: "2rem" }}>
             <h2 className={styles.sectionTitle}>Shared Context Hub & Slash Commands</h2>
             <div className={styles.contextList}>
               <div className={`${styles.contextItem} card`}>
@@ -538,20 +567,6 @@ export default function Home() {
             </div>
             <ContextEditor />
           </section>
-
-          {/* Workspace Shell Terminal */}
-          <section style={{ marginTop: "2rem" }}>
-            <h2 className={styles.sectionTitle}>Workspace Shell Terminal</h2>
-            <div className="card" style={{ display: "flex", flexDirection: "column", border: "1px solid var(--border)", padding: 0 }}>
-              <div className={styles.agentHeader} style={{ justifyContent: "space-between", background: "rgba(255, 255, 255, 0.02)" }}>
-                <span style={{ fontWeight: 600, display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.85rem" }}>
-                  💻 Local Workspace Shell (CWD: {serverCwd || "root"})
-                </span>
-                <span style={{ fontSize: "0.7rem", color: "var(--muted)" }}>Pre-configured environment</span>
-              </div>
-              <TerminalConsole sessionId="workspace-terminal" height="300px" wsPort={wsPort} />
-            </div>
-          </section>
         </main>
 
         {/* Right Panel: Environments & Actions */}
@@ -686,7 +701,7 @@ export default function Home() {
 
       {/* Footer */}
       <footer className={styles.footer}>
-        <span>NeuralLoom v0.2.13 — Experimental AI Orchestrator Bridge</span>
+        <span>NeuralLoom v{appVersion} — Experimental AI Orchestrator Bridge</span>
         <span>Directory: {serverCwd || "Loading..."}</span>
       </footer>