create-claude-code-visualizer 0.1.0

package/templates/app/src/components/layout/profile-menu.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/auth/auth-context";
+import { PreferencesModal } from "@/components/preferences-modal";
+import { GearIcon, LogOutIcon, ClockIcon } from "@/components/icons";
+
+export function ProfileMenu() {
+  const [open, setOpen] = useState(false);
+  const [prefsOpen, setPrefsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+  const { user, loading, signOut } = useAuth();
+
+  useEffect(() => {
+    if (!open) return;
+    const handle = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [open]);
+
+  const displayName =
+    user?.user_metadata?.full_name ||
+    user?.email?.split("@")[0] ||
+    "User";
+  const initials = displayName.charAt(0).toUpperCase();
+  const avatarUrl = user?.user_metadata?.avatar_url;
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 px-2.5 py-1.5">
+        <div className="h-5 w-5 rounded-full bg-[var(--bg-elevated)] animate-pulse" />
+        <div className="h-3 w-20 rounded bg-[var(--bg-elevated)] animate-pulse" />
+      </div>
+    );
+  }
+
+  return (
+    <div ref={menuRef} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 w-full rounded-md px-2.5 py-1.5 text-[13px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors"
+      >
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt=""
+            className="h-5 w-5 rounded-full shrink-0"
+            referrerPolicy="no-referrer"
+          />
+        ) : (
+          <div className="flex items-center justify-center h-5 w-5 rounded-full bg-[var(--bg-elevated)] text-[10px] font-semibold text-[var(--text-secondary)] shrink-0">
+            {initials}
+          </div>
+        )}
+        <span className="truncate">{displayName}</span>
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 mb-1 w-full rounded-md border border-[var(--border-default)] bg-[#111113] shadow-xl shadow-black/40 overflow-hidden z-50">
+          <button
+            onClick={() => { setOpen(false); setPrefsOpen(true); }}
+            className="flex items-center gap-2.5 w-full px-3 py-2 text-[13px] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] transition-colors"
+          >
+            <ClockIcon size={14} className="opacity-60" />
+            Preferences
+          </button>
+          <div className="h-px bg-[var(--border-subtle)]" />
+          <button
+            onClick={() => { setOpen(false); router.push("/settings"); }}
+            className="flex items-center gap-2.5 w-full px-3 py-2 text-[13px] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] transition-colors"
+          >
+            <GearIcon size={14} className="opacity-60" />
+            Settings
+          </button>
+          <div className="h-px bg-[var(--border-subtle)]" />
+          <button
+            onClick={() => { setOpen(false); signOut(); }}
+            className="flex items-center gap-2.5 w-full px-3 py-2 text-[13px] text-[var(--text-secondary)] hover:text-red-400 hover:bg-[var(--bg-hover)] transition-colors"
+          >
+            <LogOutIcon size={14} className="opacity-60" />
+            Log out
+          </button>
+        </div>
+      )}
+
+      <PreferencesModal open={prefsOpen} onClose={() => setPrefsOpen(false)} />
+    </div>
+  );
+}

package/templates/app/src/components/layout/sidebar.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useOverview } from "@/components/overview/overview-context";
+import { Nav } from "./nav";
+import { AgentSidebar } from "./agent-sidebar";
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const { isOverview } = useOverview();
+
+  // If the overview context says we're on an overview tab, show Nav
+  if (isOverview) {
+    return <Nav />;
+  }
+
+  // Root path is rewritten to /agents/main/chat — treat it as main agent
+  if (pathname === "/") {
+    return <AgentSidebar slug="main" />;
+  }
+
+  // On any agent chat page, show agent session sidebar
+  const chatMatch = pathname.match(/^\/agents\/([^/]+)\/chat/);
+  if (chatMatch) {
+    return <AgentSidebar slug={chatMatch[1]} />;
+  }
+
+  // Fallback
+  return <Nav />;
+}

package/templates/app/src/components/markdown.tsx

@@ -0,0 +1,57 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export function Markdown({ children }: { children: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        h1: ({ children }) => <h1 className="text-[15px] font-semibold text-[var(--text-primary)] mt-4 mb-2">{children}</h1>,
+        h2: ({ children }) => <h2 className="text-[14px] font-semibold text-[var(--text-primary)] mt-4 mb-2">{children}</h2>,
+        h3: ({ children }) => <h3 className="text-[13px] font-semibold text-[var(--text-primary)] mt-3 mb-1.5">{children}</h3>,
+        h4: ({ children }) => <h4 className="text-[13px] font-medium text-[var(--text-secondary)] mt-2 mb-1">{children}</h4>,
+        p: ({ children }) => <p className="mb-2 last:mb-0 leading-relaxed">{children}</p>,
+        strong: ({ children }) => <strong className="font-semibold text-[var(--text-primary)]">{children}</strong>,
+        em: ({ children }) => <em className="italic text-[var(--text-secondary)]">{children}</em>,
+        a: ({ href, children }) => (
+          <a href={href} target="_blank" rel="noopener noreferrer" className="text-[var(--accent-text)] hover:underline underline-offset-2">
+            {children}
+          </a>
+        ),
+        ul: ({ children }) => <ul className="list-disc list-outside pl-5 mb-2 space-y-0.5">{children}</ul>,
+        ol: ({ children }) => <ol className="list-decimal list-outside pl-5 mb-2 space-y-0.5">{children}</ol>,
+        li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+        code: ({ className, children }) => {
+          const isBlock = className?.includes("language-");
+          if (isBlock) {
+            return (
+              <code className="block text-[12px] font-mono text-[var(--text-secondary)]">{children}</code>
+            );
+          }
+          return (
+            <code className="rounded-md bg-[var(--bg-elevated)] px-1.5 py-0.5 text-[12px] font-mono text-[var(--text-secondary)]">{children}</code>
+          );
+        },
+        pre: ({ children }) => (
+          <pre className="rounded-md bg-[var(--bg-base)] border border-[var(--border-subtle)] p-3 mb-2 overflow-x-auto text-[12px]">
+            {children}
+          </pre>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className="border-l-2 border-[var(--border-strong)] pl-3 my-2 text-[var(--text-tertiary)] italic">{children}</blockquote>
+        ),
+        hr: () => <hr className="border-[var(--border-subtle)] my-3" />,
+        table: ({ children }) => (
+          <div className="overflow-x-auto mb-2">
+            <table className="w-full text-[12px] border-collapse">{children}</table>
+          </div>
+        ),
+        thead: ({ children }) => <thead className="border-b border-[var(--border-default)]">{children}</thead>,
+        th: ({ children }) => <th className="text-left px-2 py-1.5 font-medium text-[var(--text-primary)]">{children}</th>,
+        td: ({ children }) => <td className="px-2 py-1.5 border-t border-[var(--border-subtle)] text-[var(--text-tertiary)]">{children}</td>,
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+}

package/templates/app/src/components/message-bar.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { PaperclipIcon, SendIcon, StopIcon, XIcon, ImageIcon, FileIcon } from "@/components/icons";
+
+const ACCEPTED_TYPES = "image/png,image/jpeg,image/gif,image/webp,text/markdown,.md";
+
+interface MessageBarProps {
+  onSend: (message: string, files?: File[]) => void;
+  onStop?: () => void;
+  disabled?: boolean;
+  isRunning?: boolean;
+  placeholder?: string;
+}
+
+export function MessageBar({ onSend, onStop, disabled, isRunning, placeholder }: MessageBarProps) {
+  const [value, setValue] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = () => {
+    const trimmed = value.trim();
+    if ((!trimmed && files.length === 0) || disabled) return;
+    onSend(trimmed, files.length > 0 ? files : undefined);
+    setValue("");
+    setFiles([]);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = Array.from(e.target.files || []);
+    setFiles((prev) => [...prev, ...selected]);
+    e.target.value = "";
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  // Auto-focus on mount and when a run completes
+  useEffect(() => {
+    if (!isRunning) {
+      textareaRef.current?.focus();
+    }
+  }, [isRunning]);
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    const el = e.target;
+    el.style.height = "auto";
+    el.style.height = Math.min(el.scrollHeight, 200) + "px";
+  };
+
+  const hasContent = value.trim().length > 0 || files.length > 0;
+
+  return (
+    <div className="bg-[var(--bg-base)] px-4 pb-2 pt-1">
+      <div className="max-w-3xl mx-auto">
+        <div className="rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-raised)] overflow-hidden">
+          {/* File chips */}
+          {files.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 px-4 pt-3 pb-0">
+              {files.map((f, i) => {
+                const isImage = f.type.startsWith("image/");
+                return (
+                  <span
+                    key={`${f.name}-${i}`}
+                    className="flex items-center gap-1.5 rounded-md bg-[var(--bg-elevated)] border border-[var(--border-subtle)] px-2 py-1 text-[12px] text-[var(--text-secondary)]"
+                  >
+                    {isImage ? <ImageIcon size={12} className="text-[var(--text-muted)]" /> : <FileIcon size={12} className="text-[var(--text-muted)]" />}
+                    <span className="truncate max-w-[140px]">{f.name}</span>
+                    <button
+                      onClick={() => removeFile(i)}
+                      className="ml-0.5 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
+                      type="button"
+                    >
+                      <XIcon size={10} />
+                    </button>
+                  </span>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Textarea */}
+          <div className="flex items-end gap-2 px-4 pt-2.5 pb-1.5">
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={handleInput}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder || "Message..."}
+              disabled={isRunning}
+              rows={1}
+              className="flex-1 resize-none bg-transparent text-[13px] text-[var(--text-primary)] placeholder-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none leading-relaxed max-h-[200px] disabled:opacity-50"
+            />
+          </div>
+
+          {/* Bottom row: attach + send */}
+          <div className="flex items-center justify-between px-3 pb-2 pt-0">
+            <div className="relative">
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept={ACCEPTED_TYPES}
+                multiple
+                onChange={handleFileChange}
+                className="hidden"
+              />
+              <button
+                onClick={() => fileInputRef.current?.click()}
+                className={`flex items-center justify-center h-7 w-7 rounded-md transition-colors ${
+                  files.length > 0
+                    ? "text-[var(--accent-text)] hover:bg-[var(--bg-hover)]"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)]"
+                }`}
+                aria-label="Attach file"
+                type="button"
+              >
+                <PaperclipIcon size={16} />
+              </button>
+            </div>
+
+            {isRunning && onStop ? (
+              <button
+                onClick={onStop}
+                className="flex items-center justify-center h-7 w-7 rounded-md transition-all bg-red-500/80 text-white hover:bg-red-500"
+                aria-label="Stop"
+              >
+                <StopIcon size={14} />
+              </button>
+            ) : (
+              <button
+                onClick={handleSubmit}
+                disabled={!hasContent || disabled}
+                className={`flex items-center justify-center h-7 w-7 rounded-md transition-all ${
+                  hasContent && !disabled
+                    ? "bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]"
+                    : "text-[var(--text-muted)]"
+                }`}
+                aria-label="Send message"
+              >
+                <SendIcon size={14} />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/app/src/components/notifications/notification-bell.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState, useRef, useCallback } from "react"; // useRef kept for prevCountRef
+import type { Notification } from "@/lib/types";
+import { NotificationPanel } from "./notification-panel";
+
+export function NotificationBell() {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [open, setOpen] = useState(false);
+  const [permissionGranted, setPermissionGranted] = useState(false);
+  const prevCountRef = useRef(0);
+
+  const unreadCount = notifications.filter((n) => !n.read).length;
+
+  const fetchNotifications = useCallback(async () => {
+    try {
+      const res = await fetch("/api/notifications?unread=true");
+      if (!res.ok) return;
+      const data: Notification[] = await res.json();
+      setNotifications(data);
+
+      // Fire desktop notification for new unreads
+      if (permissionGranted && data.length > prevCountRef.current && prevCountRef.current >= 0) {
+        const newest = data[0];
+        if (newest) {
+          new window.Notification(newest.title, {
+            body: newest.summary || undefined,
+            icon: "/favicon.ico",
+          });
+        }
+      }
+      prevCountRef.current = data.length;
+    } catch {
+      // silently fail
+    }
+  }, [permissionGranted]);
+
+  useEffect(() => {
+    // Request browser notification permission
+    if (typeof window !== "undefined" && "Notification" in window) {
+      if (Notification.permission === "granted") {
+        setPermissionGranted(true);
+      } else if (Notification.permission !== "denied") {
+        Notification.requestPermission().then((p) => setPermissionGranted(p === "granted"));
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchNotifications();
+    const interval = setInterval(fetchNotifications, 30_000);
+    return () => clearInterval(interval);
+  }, [fetchNotifications]);
+
+
+  const handleMarkAllRead = async () => {
+    await fetch("/api/notifications", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ all: true }),
+    });
+    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
+  };
+
+  const handleMarkRead = async (id: string) => {
+    await fetch("/api/notifications", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ids: [id] }),
+    });
+    setNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, read: true } : n))
+    );
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="relative flex items-center justify-center h-6 w-6 rounded-md text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] transition-colors"
+        aria-label="Notifications"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M4.5 6.5a3.5 3.5 0 017 0c0 2.5 1 4 1.5 4.5H3c.5-.5 1.5-2 1.5-4.5z" />
+          <path d="M6.5 11v.5a1.5 1.5 0 003 0V11" />
+        </svg>
+        {unreadCount > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 flex h-3.5 min-w-[0.875rem] items-center justify-center rounded-full bg-[var(--accent)] px-0.5 text-[9px] font-semibold text-white">
+            {unreadCount > 9 ? "9+" : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <NotificationPanel
+          notifications={notifications}
+          onMarkAllRead={handleMarkAllRead}
+          onMarkRead={handleMarkRead}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </div>
+  );
+}

package/templates/app/src/components/notifications/notification-panel.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import type { Notification } from "@/lib/types";
+import { XIcon } from "@/components/icons";
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function typeIcon(type: Notification["type"]): { icon: string; color: string } {
+  switch (type) {
+    case "completed":
+      return { icon: "✓", color: "text-green-400" };
+    case "failed":
+      return { icon: "✕", color: "text-red-400" };
+    case "needs_review":
+      return { icon: "!", color: "text-yellow-400" };
+    case "approval_needed":
+      return { icon: "⏳", color: "text-amber-400" };
+  }
+}
+
+interface NotificationPanelProps {
+  notifications: Notification[];
+  onMarkAllRead: () => void;
+  onMarkRead: (id: string) => void;
+  onClose: () => void;
+}
+
+export function NotificationPanel({
+  notifications,
+  onMarkAllRead,
+  onMarkRead,
+  onClose,
+}: NotificationPanelProps) {
+  const router = useRouter();
+
+  const handleClick = (n: Notification) => {
+    onMarkRead(n.id);
+    onClose();
+    if (n.session_id) {
+      router.push(`/agents/${n.agent_slug}/chat?session=${n.session_id}`);
+    } else {
+      router.push(`/agents/${n.agent_slug}/chat`);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      <div
+        className="relative z-10 w-[420px] max-h-[80vh] rounded-lg border border-[var(--border-default)] bg-[#111113] shadow-2xl shadow-black/60 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--border-subtle)]">
+          <span className="text-[14px] font-semibold text-[var(--text-primary)]">Notifications</span>
+          <div className="flex items-center gap-3">
+            {notifications.some((n) => !n.read) && (
+              <button onClick={onMarkAllRead} className="text-[11px] text-[var(--accent-text)] hover:underline">
+                Mark all read
+              </button>
+            )}
+            <button onClick={onClose} className="flex items-center justify-center h-6 w-6 rounded-md text-[var(--text-muted)] transition-colors hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]">
+              <XIcon size={14} />
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-y-auto max-h-[calc(80vh-60px)]">
+          {notifications.length === 0 ? (
+            <p className="py-12 text-center text-[13px] text-[var(--text-tertiary)]">No notifications</p>
+          ) : (
+            notifications.map((n) => {
+              const { icon, color } = typeIcon(n.type);
+              return (
+                <button
+                  key={n.id}
+                  onClick={() => handleClick(n)}
+                  className={`flex w-full items-start gap-3 px-5 py-3 text-left transition-colors hover:bg-[var(--bg-hover)] ${
+                    !n.read ? "bg-[var(--bg-raised)]" : ""
+                  }`}
+                >
+                  <span className={`mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-[11px] font-bold ${color} bg-[var(--bg-elevated)]`}>
+                    {icon}
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center justify-between gap-2">
+                      <span className={`text-[13px] truncate ${!n.read ? "text-[var(--text-primary)] font-medium" : "text-[var(--text-tertiary)]"}`}>
+                        {n.title}
+                      </span>
+                      <span className="shrink-0 text-[10px] text-[var(--text-muted)]">{timeAgo(n.created_at)}</span>
+                    </div>
+                    {n.summary && (
+                      <p className="mt-0.5 text-[11px] text-[var(--text-muted)] line-clamp-2">{n.summary}</p>
+                    )}
+                  </div>
+                  {!n.read && (
+                    <span className="mt-2.5 h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--accent)]" />
+                  )}
+                </button>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}