theo-agent-dashboard

SessionList.tsx (7375B)

---

 import { useState, useRef, useEffect } from "react";
 import { useSessionStore, type Session } from "../../store/session";
 
 const DASHBOARD_SOURCES = new Set(["api_server"]);
 
 function formatDate(ts?: number): string {
   if (!ts) return "";
   return new Date(ts * 1000).toLocaleDateString();
 }
 
 function formatRelative(ts?: number): string {
   if (!ts) return "";
   const diff = Date.now() / 1000 - ts;
   if (diff < 60) return "just now";
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
   if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
   return `${Math.floor(diff / 86400)}d ago`;
 }
 
 function SessionItem({
   session,
   isActive,
   onSelect,
   onRename,
   onDelete,
   onArchive,
 }: {
   session: Session;
   isActive: boolean;
   onSelect: (id: string) => void;
   onRename: (id: string, name: string) => void;
   onDelete: (id: string) => void;
   onArchive?: () => void;
 }) {
   const [editing, setEditing] = useState(false);
   const [name, setName] = useState(session.name ?? "Untitled");
   const [menuOpen, setMenuOpen] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (editing) inputRef.current?.focus();
   }, [editing]);
 
   useEffect(() => {
     if (!menuOpen) return;
     const close = () => setMenuOpen(false);
     document.addEventListener("click", close);
     return () => document.removeEventListener("click", close);
   }, [menuOpen]);
 
   const handleRename = () => {
     if (name.trim() && name.trim() !== session.name) {
       onRename(session.id, name.trim());
     }
     setEditing(false);
   };
 
   const handleDelete = () => {
     onDelete(session.id);
     setConfirmDelete(false);
   };
 
   return (
     <div
       className={`group relative flex cursor-pointer items-center justify-between rounded px-2 py-1.5 text-sm transition-colors ${
         isActive
           ? "bg-indigo-600/20 text-indigo-300"
           : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
       }`}
       onClick={() => onSelect(session.id)}
     >
       {editing ? (
         <input
           ref={inputRef}
           value={name}
           onChange={(e) => setName(e.target.value)}
           onBlur={handleRename}
           onKeyDown={(e) => {
             if (e.key === "Enter") handleRename();
             if (e.key === "Escape") setEditing(false);
           }}
           className="w-full rounded bg-gray-800 px-1 py-0.5 text-sm text-gray-100 outline-none ring-1 ring-indigo-500"
           onClick={(e) => e.stopPropagation()}
         />
       ) : (
         <div className="min-w-0 flex-1">
           <div className="truncate">{session.name ?? "Untitled"}</div>
           <div className="mt-0.5 flex gap-2 text-xs text-gray-600">
             {session.created_at && <span>{formatDate(session.created_at)}</span>}
             {session.last_activity && (
               <span>{formatRelative(session.last_activity)}</span>
             )}
             {session.message_count != null && (
               <span>{session.message_count} msgs</span>
             )}
           </div>
         </div>
       )}
 
       {!editing && (
         <button
           className="ml-2 rounded p-0.5 text-gray-600 opacity-0 transition-opacity hover:bg-gray-700 hover:text-gray-300 group-hover:opacity-100"
           onClick={(e) => {
             e.stopPropagation();
             setMenuOpen(!menuOpen);
           }}
         >
           ⋮
         </button>
       )}
 
       {menuOpen && (
         <div className="absolute right-0 top-full z-10 mt-1 w-36 rounded-md border border-gray-700 bg-gray-900 shadow-lg">
           <button
             className="w-full px-3 py-1.5 text-left text-sm text-gray-300 hover:bg-gray-800"
             onClick={(e) => {
               e.stopPropagation();
               setEditing(true);
               setMenuOpen(false);
             }}
           >
             Rename
           </button>
           <button
             className="w-full px-3 py-1.5 text-left text-sm text-gray-400 hover:bg-gray-800"
             onClick={(e) => {
               e.stopPropagation();
               onArchive?.();
               setMenuOpen(false);
             }}
           >
             Archive
           </button>
           <button
             className="w-full px-3 py-1.5 text-left text-sm text-red-400 hover:bg-gray-800"
             onClick={(e) => {
               e.stopPropagation();
               setConfirmDelete(true);
               setMenuOpen(false);
             }}
           >
             Delete
           </button>
         </div>
       )}
 
       {confirmDelete && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
           <div className="rounded-lg bg-gray-900 p-4 shadow-xl">
             <p className="mb-3 text-sm text-gray-300">
               Delete &quot;{session.name ?? "Untitled"}&quot;?
             </p>
             <div className="flex justify-end gap-2">
               <button
                 className="rounded px-3 py-1 text-sm text-gray-400 hover:bg-gray-800"
                 onClick={() => setConfirmDelete(false)}
               >
                 Cancel
               </button>
               <button
                 className="rounded bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700"
                 onClick={handleDelete}
               >
                 Delete
               </button>
             </div>
           </div>
         </div>
       )}
     </div>
   );
 }
 
 interface SessionListProps {
   onSelectSession?: (sessionId: string) => void;
 }
 
 export function SessionList({ onSelectSession }: SessionListProps) {
   const {
     sessions,
     activeSessionId,
     setActiveSession,
     updateSession,
     deleteSession,
     archiveSession,
     listSessions,
   } = useSessionStore();
   const [showAll, setShowAll] = useState(false);
 
   useEffect(() => {
     listSessions();
   }, [listSessions]);
 
   const filtered = showAll
     ? sessions
     : sessions.filter((s) => (!s.source || DASHBOARD_SOURCES.has(s.source)) && !s.archived);
   const hiddenCount = sessions.length - filtered.length;
 
   return (
     <div className="flex flex-col gap-1">
       <div className="mb-2 flex items-center justify-between">
         <h2 className="text-xs font-semibold uppercase text-gray-500">
           Sessions
         </h2>
         <button
           className="text-xs text-gray-500 hover:text-gray-300"
           onClick={() => setActiveSession(null)}
           title="New session"
         >
           + New
         </button>
       </div>
       {hiddenCount > 0 && (
         <button
           className="mb-1 text-xs text-gray-600 hover:text-gray-400"
           onClick={() => setShowAll(!showAll)}
         >
           {showAll
             ? "Hide external sessions"
             : `Show ${hiddenCount} sessions from other sources`}
         </button>
       )}
       {filtered.length === 0 && (
         <p className="text-sm text-gray-600">No sessions yet</p>
       )}
       {filtered.map((s) => (
         <SessionItem
           key={s.id}
           session={s}
           isActive={s.id === activeSessionId}
           onSelect={(id) => {
             setActiveSession(id);
             onSelectSession?.(id);
           }}
           onRename={(id, name) => updateSession(id, { name })}
           onDelete={deleteSession}
           onArchive={() => archiveSession(s.id)}
         />
       ))}
     </div>
   );
 }