@assistkick/create 1.7.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/ProjectSelector.tsx

@@ -5,7 +5,7 @@ interface ProjectSelectorProps {
   projects: Project[];
   selectedProjectId: string | null;
   onSelect: (id: string) => void;
-  onCreate: (name: string) => Promise<any>;
+  onCreate: (name: string, type?: string) => Promise<any>;
   onRename: (id: string, name: string) => Promise<void>;
   onArchive: (id: string) => Promise<void>;
   onOpenGitModal?: (project: Project) => void;
@@ -17,6 +17,7 @@ export function ProjectSelector({
   const [open, setOpen] = useState(false);
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
+  const [newType, setNewType] = useState<'software' | 'video'>('software');
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -53,8 +54,9 @@ export function ProjectSelector({
     const trimmed = newName.trim();
     if (!trimmed) return;
     try {
-      await onCreate(trimmed);
+      await onCreate(trimmed, newType);
       setNewName('');
+      setNewType('software');
       setCreating(false);
       setOpen(false);
     } catch {
@@ -83,30 +85,30 @@ export function ProjectSelector({
   };
 
   return (
-    <div className="project-selector" ref={dropdownRef}>
+    <div className="relative" ref={dropdownRef}>
       <button
-        className="project-selector-trigger"
+        className="flex items-center gap-1.5 py-[5px] px-2.5 bg-transparent border border-edge rounded text-content font-mono text-xs cursor-pointer transition-[border-color,background] duration-150 max-w-[200px] hover:bg-tab-hover hover:border-accent"
         onClick={() => setOpen(v => !v)}
         title="Select project"
       >
-        <span className="project-selector-label">
+        <span className="overflow-hidden text-ellipsis whitespace-nowrap">
           {selectedProject?.name || 'No project'}
         </span>
-        <span className="project-selector-chevron">{open ? '\u25B4' : '\u25BE'}</span>
+        <span className="text-[10px] text-content-muted shrink-0">{open ? '\u25B4' : '\u25BE'}</span>
       </button>
 
       {open && (
-        <div className="project-selector-dropdown">
-          <div className="project-selector-list">
+        <div className="absolute top-[calc(100%+4px)] left-0 min-w-[220px] max-w-[300px] bg-panel border border-edge rounded-md shadow-[0_4px_12px_var(--panel-shadow)] z-[200] overflow-hidden">
+          <div className="max-h-60 overflow-y-auto py-1">
             {projects.map(project => (
               <div
                 key={project.id}
-                className={`project-selector-item${project.id === selectedProjectId ? ' active' : ''}`}
+                className={`group flex items-center pr-1 hover:bg-tab-hover${project.id === selectedProjectId ? ' bg-tab-active' : ''}`}
               >
                 {renamingId === project.id ? (
                   <input
                     ref={renameInputRef}
-                    className="project-selector-input"
+                    className="flex-1 py-[5px] px-2 bg-surface border border-accent rounded-sm text-content font-mono text-xs outline-none mx-1 my-0.5"
                     value={renameValue}
                     onChange={e => setRenameValue(e.target.value)}
                     onKeyDown={e => {
@@ -118,15 +120,18 @@ export function ProjectSelector({
                 ) : (
                   <>
                     <button
-                      className="project-selector-item-name"
+                      className="flex-1 flex items-center gap-1.5 text-left py-1.5 px-2 bg-none border-none text-content font-mono text-xs cursor-pointer overflow-hidden"
                       onClick={() => { onSelect(project.id); setOpen(false); }}
                     >
-                      {project.name}
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap">{project.name}</span>
+                      {project.type === 'video' && (
+                        <span className="shrink-0 rounded-full bg-purple-500/15 px-1.5 py-0.5 text-[9px] font-bold text-purple-400">Video</span>
+                      )}
                     </button>
-                    <div className="project-selector-item-actions">
+                    <div className="flex gap-0.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
                       {onOpenGitModal && (
                         <button
-                          className={`project-selector-action-btn project-selector-git-btn${project.repoUrl ? ' connected' : ''}`}
+                          className={`bg-none border-none text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised ${project.repoUrl ? 'text-accent' : 'text-content-secondary'}`}
                           title="Git Repository"
                           onClick={(e) => {
                             e.stopPropagation();
@@ -140,7 +145,7 @@ export function ProjectSelector({
                         </button>
                       )}
                       <button
-                        className="project-selector-action-btn"
+                        className="bg-none border-none text-content-muted text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised"
                         title="Rename"
                         onClick={(e) => {
                           e.stopPropagation();
@@ -152,7 +157,7 @@ export function ProjectSelector({
                       </button>
                       {!project.isDefault && (
                         <button
-                          className="project-selector-action-btn project-selector-archive-btn"
+                          className="bg-none border-none text-content-muted text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised hover:!text-error"
                           title="Archive"
                           onClick={(e) => {
                             e.stopPropagation();
@@ -169,27 +174,43 @@ export function ProjectSelector({
             ))}
           </div>
 
-          <div className="project-selector-footer">
+          <div className="border-t border-edge p-1">
             {creating ? (
-              <div className="project-selector-create-form">
-                <input
-                  ref={createInputRef}
-                  className="project-selector-input"
-                  placeholder="Project name..."
-                  value={newName}
-                  onChange={e => setNewName(e.target.value)}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') handleCreate();
-                    if (e.key === 'Escape') { setCreating(false); setNewName(''); }
-                  }}
-                />
-                <button className="project-selector-create-confirm" onClick={handleCreate}>
-                  +
-                </button>
+              <div className="flex flex-col gap-1">
+                <div className="flex gap-1 items-center">
+                  <input
+                    ref={createInputRef}
+                    className="flex-1 py-[5px] px-2 bg-surface border border-accent rounded-sm text-content font-mono text-xs outline-none mx-1 my-0.5"
+                    placeholder="Project name..."
+                    value={newName}
+                    onChange={e => setNewName(e.target.value)}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') handleCreate();
+                      if (e.key === 'Escape') { setCreating(false); setNewName(''); setNewType('software'); }
+                    }}
+                  />
+                  <button className="bg-accent border-none text-white text-sm font-bold w-7 h-7 rounded-sm cursor-pointer flex items-center justify-center shrink-0" onClick={handleCreate}>
+                    +
+                  </button>
+                </div>
+                <div className="flex gap-1 px-1.5">
+                  <button
+                    className={`px-2 py-0.5 rounded-sm text-[10px] font-mono border cursor-pointer transition-colors ${newType === 'software' ? 'bg-accent/15 border-accent text-accent' : 'bg-transparent border-edge text-content-muted hover:border-content/30'}`}
+                    onClick={() => setNewType('software')}
+                  >
+                    Software
+                  </button>
+                  <button
+                    className={`px-2 py-0.5 rounded-sm text-[10px] font-mono border cursor-pointer transition-colors ${newType === 'video' ? 'bg-accent/15 border-accent text-accent' : 'bg-transparent border-edge text-content-muted hover:border-content/30'}`}
+                    onClick={() => setNewType('video')}
+                  >
+                    Video
+                  </button>
+                </div>
               </div>
             ) : (
               <button
-                className="project-selector-new-btn"
+                className="w-full py-1.5 px-2 bg-none border-none text-accent font-mono text-xs cursor-pointer text-left rounded-sm transition-background duration-150 hover:bg-tab-hover"
                 onClick={() => setCreating(true)}
               >
                 + New Project

package/templates/assistkick-product-system/packages/frontend/src/components/QaIssueSheet.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { apiClient } from '../api/client';
 import { useQaSheetStore } from '../stores/useQaSheetStore';
+import { SideSheet } from './ds/SideSheet';
 
 export function QaIssueSheet() {
   const {
@@ -8,7 +9,6 @@ export function QaIssueSheet() {
     reviews: initialReviews, close,
   } = useQaSheetStore();
 
-  const sheetRef = useRef<HTMLDivElement>(null);
   const [notes, setNotes] = useState<any[]>(initialNotes);
   const [reviews, setReviews] = useState<any[]>(initialReviews);
   const [newNoteText, setNewNoteText] = useState('');
@@ -25,19 +25,6 @@ export function QaIssueSheet() {
     setNewNoteText('');
   }, [featureId, initialNotes, initialReviews]);
 
-  // Close on outside click
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleClick = (e: MouseEvent) => {
-      if (sheetRef.current && !sheetRef.current.contains(e.target as Node)) {
-        if ((e.target as HTMLElement).closest('.kanban-issues-btn')) return;
-        close();
-      }
-    };
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, [isOpen, close]);
-
   const refreshNotes = useCallback(async () => {
     if (!featureId) return;
     try {
@@ -96,63 +83,59 @@ export function QaIssueSheet() {
   };
 
   return (
-    <div className={`qa-issue-sheet${isOpen ? ' open' : ''}`} ref={sheetRef}>
-      <div className="qa-sheet-header">
-        <span className="qa-sheet-title">{featureId} — {featureName}</span>
-        <button className="qa-sheet-close" onClick={close}>&times;</button>
-      </div>
-      <div className="qa-sheet-body">
-        <div className="qa-sheet-subtitle">
+    <SideSheet isOpen={isOpen} onClose={close} title={`${featureId} — ${featureName}`} zIndex={260}>
+      <div className="flex flex-col gap-3">
+        <div className="text-[11px] text-content-muted uppercase tracking-wider">
           {isEditable ? 'Report and manage QA issues' : 'Issues (read-only)'}
         </div>
 
         {reviews.length > 0 && (
-          <div className="qa-sheet-review-history">
-            <div className="qa-sheet-section-title">Review History</div>
+          <div className="mb-4 border-b border-edge pb-3">
+            <div className="text-[11px] font-semibold uppercase tracking-wide text-content-secondary mb-2">Review History</div>
             {reviews.map((review: any, i: number) => (
-              <div key={i} className="qa-sheet-review-item">
-                <div className="qa-sheet-review-header">
-                  <span className="qa-sheet-review-cycle">Cycle {review.cycle}</span>
-                  <span className={`qa-sheet-review-badge ${review.status}`}>
+              <div key={i} className="bg-surface-alt rounded-md px-2.5 py-2 mb-1.5">
+                <div className="flex items-center gap-2 text-xs">
+                  <span className="font-semibold text-content">Cycle {review.cycle}</span>
+                  <span className={`text-[10px] font-semibold px-1.5 py-px rounded-sm uppercase ${review.status === 'approved' ? 'bg-[#16a34a22] text-[#16a34a]' : 'bg-[#dc262622] text-[#dc2626]'}`}>
                     {review.status === 'approved' ? 'Approved' : 'Rejected'}
                   </span>
-                  <span className="qa-sheet-review-time">{formatDate(review.timestamp)}</span>
+                  <span className="text-content-secondary text-[11px] ml-auto">{formatDate(review.timestamp)}</span>
                 </div>
-                {review.reason && <div className="qa-sheet-review-reason">{review.reason}</div>}
+                {review.reason && <div className="mt-1.5 text-xs text-content-secondary whitespace-pre-wrap leading-snug max-h-[120px] overflow-y-auto">{review.reason}</div>}
               </div>
             ))}
           </div>
         )}
 
         {notes.length === 0 ? (
-          <div className="qa-sheet-empty">No issues reported yet.</div>
+          <div className="text-xs text-content-muted p-4 text-center">No issues reported yet.</div>
         ) : (
-          <div className="qa-sheet-notes-list">
+          <div className="flex flex-col gap-2">
             {notes.map((note: any) => (
-              <div key={note.id} className="qa-sheet-note">
+              <div key={note.id} className="bg-surface-raised border border-edge rounded px-3 py-2.5">
                 {editingNoteId === note.id ? (
-                  <div className="qa-sheet-edit-form">
+                  <div className="flex flex-col gap-2">
                     <textarea
-                      className="qa-sheet-textarea"
+                      className="w-full bg-surface-raised border border-edge rounded text-content font-mono text-xs px-3 py-2.5 resize-y leading-relaxed focus:outline-none focus:border-accent placeholder:text-content-muted"
                       value={editText}
                       onChange={e => setEditText(e.target.value)}
                       rows={4}
                       autoFocus
                     />
-                    <div className="qa-sheet-form-btns">
-                      <button className="qa-sheet-add-btn" onClick={() => handleUpdateNote(note.id)}>Save</button>
-                      <button className="qa-sheet-cancel-btn" onClick={() => setEditingNoteId(null)}>Cancel</button>
+                    <div className="flex gap-2">
+                      <button className="bg-transparent border border-accent rounded text-accent font-mono text-[11px] px-3.5 py-1.5 cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white" onClick={() => handleUpdateNote(note.id)}>Save</button>
+                      <button className="bg-transparent border border-edge rounded text-content-secondary font-mono text-[11px] px-3.5 py-1.5 cursor-pointer hover:border-content hover:text-content" onClick={() => setEditingNoteId(null)}>Cancel</button>
                     </div>
                   </div>
                 ) : (
                   <>
-                    <div className="qa-sheet-note-text">{note.text}</div>
-                    <div className="qa-sheet-note-meta">
-                      <span className="qa-sheet-note-date">{formatDate(note.created_at || note.timestamp)}</span>
+                    <div className="text-xs text-content leading-relaxed whitespace-pre-wrap break-words">{note.text}</div>
+                    <div className="flex items-center justify-between mt-2">
+                      <span className="text-[10px] text-content-muted">{formatDate(note.created_at || note.timestamp)}</span>
                       {isEditable && (
-                        <span className="qa-sheet-note-actions">
-                          <button className="qa-sheet-action-btn" onClick={() => { setEditingNoteId(note.id); setEditText(note.text); }}>Edit</button>
-                          <button className="qa-sheet-action-btn delete" onClick={() => handleDeleteNote(note.id)}>Delete</button>
+                        <span className="flex gap-1.5">
+                          <button className="bg-transparent border-none text-content-muted text-[11px] font-mono cursor-pointer px-1.5 py-0.5 rounded-sm hover:bg-surface hover:text-content" onClick={() => { setEditingNoteId(note.id); setEditText(note.text); }}>Edit</button>
+                          <button className="bg-transparent border-none text-content-muted text-[11px] font-mono cursor-pointer px-1.5 py-0.5 rounded-sm hover:bg-surface hover:text-error" onClick={() => handleDeleteNote(note.id)}>Delete</button>
                         </span>
                       )}
                     </div>
@@ -164,20 +147,20 @@ export function QaIssueSheet() {
         )}
 
         {isEditable && (
-          <div className="qa-sheet-add-form">
+          <div className="flex flex-col gap-2 mt-auto pt-3 border-t border-edge">
             <textarea
-              className="qa-sheet-textarea"
+              className="w-full bg-surface-raised border border-edge rounded text-content font-mono text-xs px-3 py-2.5 resize-y leading-relaxed focus:outline-none focus:border-accent placeholder:text-content-muted"
               placeholder="Describe the issue..."
               rows={4}
               value={newNoteText}
               onChange={e => setNewNoteText(e.target.value)}
             />
-            <div className="qa-sheet-form-btns">
-              <button className="qa-sheet-add-btn" onClick={handleAddNote}>Add Issue</button>
+            <div className="flex gap-2">
+              <button className="bg-transparent border border-accent rounded text-accent font-mono text-[11px] px-3.5 py-1.5 cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white" onClick={handleAddNote}>Add Issue</button>
             </div>
           </div>
         )}
       </div>
-    </div>
+    </SideSheet>
   );
 }

package/templates/assistkick-product-system/packages/frontend/src/components/SidePanel.tsx

@@ -3,7 +3,8 @@ import { marked } from 'marked';
 import { useSidePanelStore } from '../stores/useSidePanelStore';
 import { useGraphStore } from '../stores/useGraphStore';
 import { useGraphUIStore } from '../stores/useGraphUIStore';
-import { getTaskCssClass, getTaskIcon, shouldShowTaskList } from '../utils/task_status';
+import { getTaskCssClass, getTaskIcon, getTaskIconClass, getTaskNameClass, shouldShowTaskList } from '../utils/task_status';
+import { SideSheet } from './ds/SideSheet';
 
 export function SidePanel() {
   const {
@@ -32,14 +33,12 @@ export function SidePanel() {
     return edges;
   };
 
+  const title = node ? `${node.name} (${node.id})` : '';
+
   if (!node) return (
-    <div className={`side-panel${isOpen ? ' open' : ''}`} id="side-panel">
-      <div className="panel-header">
-        <span className="panel-title" />
-        <button className="panel-close" onClick={close}>&times;</button>
-      </div>
-      <div className="panel-body" />
-    </div>
+    <SideSheet isOpen={isOpen} onClose={close} title="" zIndex={200}>
+      <div className="panel-body text-sm leading-relaxed" />
+    </SideSheet>
   );
 
   const statusLabel = (node.status || 'draft').replace(/_/g, ' ');
@@ -48,34 +47,30 @@ export function SidePanel() {
   const edges = findEdges(node.id);
 
   return (
-    <div className={`side-panel${isOpen ? ' open' : ''}`} id="side-panel">
-      <div className="panel-header">
-        <span className="panel-title">{node.name} ({node.id})</span>
-        <button className="panel-close" onClick={close}>&times;</button>
-      </div>
-      <div className="panel-body">
-        <div className="panel-status-section">
-          <span className="panel-type-badge">{typeLabel}</span>
-          <span className={`panel-status-badge panel-status-${node.status || 'draft'}`}>{statusLabel}</span>
-          <span className="panel-completeness">{completeness}% complete</span>
+    <SideSheet isOpen={isOpen} onClose={close} title={title} zIndex={200}>
+      <div className="panel-body text-sm leading-relaxed">
+        <div className="flex items-center gap-2 mb-3 pb-2.5 border-b border-edge flex-wrap">
+          <span className="text-[10px] text-content-muted uppercase tracking-wide bg-surface-raised px-2 py-0.5 rounded-sm">{typeLabel}</span>
+          <span className={`text-[10px] px-2 py-0.5 rounded-sm font-semibold capitalize panel-status-${node.status || 'draft'}`}>{statusLabel}</span>
+          <span className="text-[11px] text-content-secondary ml-auto">{completeness}% complete</span>
         </div>
         {shouldShowTaskList(tasks) && (
-          <div className="panel-task-list">
+          <div className="my-2 border border-edge rounded">
             <button
-              className="panel-task-list-toggle"
+              className="bg-none border-none text-content font-mono text-xs cursor-pointer py-1.5 px-2 w-full text-left flex items-center gap-1.5 hover:text-content hover:bg-surface-raised"
               onClick={toggleTasks}
             >
-              <span className={`panel-task-list-chevron${expandedTasks ? ' expanded' : ''}`}>{'\u25B6'}</span>
+              <span className={`inline-block text-[9px] transition-transform duration-150${expandedTasks ? ' rotate-90' : ''}`}>{'\u25B6'}</span>
               Tasks ({tasks!.completed}/{tasks!.total})
             </button>
             {expandedTasks && tasks!.items?.length > 0 && (
-              <div className="panel-task-list-items">
+              <div className="px-2 pt-1 pb-1.5 flex flex-col gap-[3px] border-t border-edge">
                 {tasks!.items.map((task: any, idx: number) => (
                   <div key={idx} className={getTaskCssClass(task.status)}>
-                    <span className="kanban-task-icon">
+                    <span className={`shrink-0 w-3 text-center text-[10px] ${getTaskIconClass(task.status)}`}>
                       {getTaskIcon(task.status)}
                     </span>
-                    <span className="kanban-task-name">{task.name}</span>
+                    <span className={getTaskNameClass(task.status)}>{task.name}</span>
                   </div>
                 ))}
               </div>
@@ -84,21 +79,21 @@ export function SidePanel() {
         )}
         <div dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }} />
         {workSummaries.length > 0 && (
-          <div className="panel-work-summary">
+          <div className="mt-3 border-t border-edge pt-2">
             <button
-              className="panel-work-summary-toggle"
+              className="bg-none border-none text-content-secondary text-[13px] font-mono cursor-pointer py-1 w-full text-left hover:text-content"
               onClick={toggleSummaries}
             >
               {expandedSummaries ? '\u25BC' : '\u25B6'} Work Summary ({workSummaries.length} cycle{workSummaries.length !== 1 ? 's' : ''})
             </button>
             {expandedSummaries && (
-              <div className="panel-work-summary-details">
+              <div className="mt-2 text-xs text-content-secondary">
                 {workSummaries.map((ws, idx) => (
-                  <div key={idx} className="panel-work-summary-cycle">
-                    <div className="panel-work-summary-cycle-header">Cycle {ws.cycle}</div>
+                  <div key={idx} className="mb-3 pb-2 border-b border-edge last:border-b-0 last:mb-0">
+                    <div className="font-semibold font-mono text-content mb-1">Cycle {ws.cycle}</div>
                     {ws.filesCreated?.length > 0 && (
-                      <div className="panel-work-summary-files panel-work-summary-files-created">
-                        <span className="panel-work-summary-label">Created:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#4caf50' }}>Created:</span>
                         <ul>
                           {ws.filesCreated.map((f, fi) => (
                             <li key={fi}>{f}</li>
@@ -107,8 +102,8 @@ export function SidePanel() {
                       </div>
                     )}
                     {ws.filesUpdated?.length > 0 && (
-                      <div className="panel-work-summary-files panel-work-summary-files-updated">
-                        <span className="panel-work-summary-label">Updated:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#ff9800' }}>Updated:</span>
                         <ul>
                           {ws.filesUpdated.map((f, fi) => (
                             <li key={fi}>{f}</li>
@@ -117,8 +112,8 @@ export function SidePanel() {
                       </div>
                     )}
                     {ws.filesDeleted?.length > 0 && (
-                      <div className="panel-work-summary-files panel-work-summary-files-deleted">
-                        <span className="panel-work-summary-label">Deleted:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#f44336' }}>Deleted:</span>
                         <ul>
                           {ws.filesDeleted.map((f, fi) => (
                             <li key={fi}>{f}</li>
@@ -127,14 +122,14 @@ export function SidePanel() {
                       </div>
                     )}
                     {ws.approach && (
-                      <div className="panel-work-summary-approach">
-                        <span className="panel-work-summary-label">Approach:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider">Approach:</span>
                         <p>{ws.approach}</p>
                       </div>
                     )}
                     {ws.decisions?.length > 0 && (
-                      <div className="panel-work-summary-decisions">
-                        <span className="panel-work-summary-label">Decisions:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider">Decisions:</span>
                         <ul>
                           {ws.decisions.map((d, di) => (
                             <li key={di}>{d}</li>
@@ -149,21 +144,21 @@ export function SidePanel() {
           </div>
         )}
         {edges.length > 0 && (
-          <div className="panel-edges-section">
-            <h3>Relationships</h3>
-            <ul className="panel-edge-list">
+          <div className="mt-4 pt-3 border-t border-edge">
+            <h3 className="text-xs text-content mb-2 uppercase tracking-wide">Relationships</h3>
+            <ul className="list-none p-0 m-0 flex flex-col gap-1">
               {edges.map((edge, i) => {
                 const neighborNode = graphData?.nodes.find((n: any) => n.id === edge.neighborId);
                 const name = neighborNode ? neighborNode.name : edge.neighborId;
                 const direction = edge.direction === 'outgoing' ? '\u2192' : '\u2190';
                 return (
-                  <li key={i} className="panel-edge-item">
-                    <span className="panel-edge-direction">{direction}</span>
-                    <span className="panel-edge-relation">{edge.relation.replace(/_/g, ' ')}</span>
-                    <a className="panel-edge-link" href="#" onClick={(e) => { e.preventDefault(); onEdgeClick?.(edge.neighborId); }}>
+                  <li key={i} className="flex items-center gap-1.5 px-1.5 py-1 rounded-sm transition-background duration-150 hover:bg-surface-raised">
+                    <span className="text-[11px] text-content-muted w-3.5 text-center shrink-0">{direction}</span>
+                    <span className="text-[10px] text-content-muted min-w-20 shrink-0">{edge.relation.replace(/_/g, ' ')}</span>
+                    <a className="text-xs text-accent no-underline cursor-pointer flex-1 overflow-hidden text-ellipsis whitespace-nowrap hover:underline" href="#" onClick={(e) => { e.preventDefault(); onEdgeClick?.(edge.neighborId); }}>
                       {name}
                     </a>
-                    <span className="panel-edge-id">{edge.neighborId}</span>
+                    <span className="text-[10px] text-content-muted shrink-0">{edge.neighborId}</span>
                   </li>
                 );
               })}
@@ -171,6 +166,6 @@ export function SidePanel() {
           </div>
         )}
       </div>
-    </div>
+    </SideSheet>
   );
 }