fix(panel): UI revamp — settings layout, journals/kanban scroll, agent item, projects

- Settings: cards reordered to User Info / Appearance / Data & Refresh /
  Transcript Retention / Notifications / Connection Info (the 3x2 grid)
- Journals: the page now fills the viewport; the agent list and the entry
  detail each scroll inside their own panel — removes the page + list +
  fixed-500px triple scrollbar (real layout, not bolted-on magic heights)
- Agent item: distinct per-team avatar with initials, clear selected/hover
  states, truncation, focus ring (was a generic icon repeated on every row)
- Kanban: the board fills the viewport and each column's card list scrolls
  inside it, so a full Done column no longer overflows down the page
- Projects: drop the misleading Workspace column — it read the legacy
  per-project workspace_path (never set in the per-agent workspace model), so
  it always showed 'No workspace'

panel/src/app/(dashboard)/journals/page.tsx

@@ -136,9 +136,9 @@ function JournalsPageContent() {
   const selectedAgent = agents?.find((a) => a.agent_id === selectedAgentId);
 
   return (
-    <div className="space-y-6">
+    <div className="flex h-full flex-col gap-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between shrink-0">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">Agent Journals</h1>
           <p className="text-muted-foreground">
@@ -151,12 +151,12 @@ function JournalsPageContent() {
         </Button>
       </div>
 
-      {/* Main Content */}
-      <div className="grid grid-cols-12 gap-6">
+      {/* Main Content — one screen; the agent list and the detail each scroll inside */}
+      <div className="grid grid-cols-12 gap-6 flex-1 min-h-0">
         {/* Sidebar */}
-        <div className="col-span-12 lg:col-span-3">
-          <Card>
-            <CardContent className="p-3">
+        <div className="col-span-12 lg:col-span-3 min-h-0">
+          <Card className="h-full flex flex-col">
+            <CardContent className="p-3 flex flex-1 flex-col min-h-0">
               {/* Agent Search */}
               <div className="relative mb-3">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -180,9 +180,9 @@ function JournalsPageContent() {
         </div>
 
         {/* Journal Content */}
-        <div className="col-span-12 lg:col-span-9">
-          <Card>
-            <CardContent className="p-6">
+        <div className="col-span-12 lg:col-span-9 min-h-0">
+          <Card className="h-full flex flex-col">
+            <CardContent className="p-6 flex-1 min-h-0 overflow-hidden">
               {selectedAgent ? (
                 <JournalView
                   agent={selectedAgent}

panel/src/app/(dashboard)/settings/page.tsx

@@ -31,7 +31,7 @@ import { TranscriptRetentionCard } from "@/components/settings/transcript-retent
 export default function SettingsPage() {
   const { theme, setTheme } = useTheme();
   const { sidebarCollapsed, setSidebarCollapsed } = useUIStore();
-  
+
   // Local state for settings (would be persisted in a real app)
   const [notificationsEnabled, setNotificationsEnabled] = useState(true);
   const [soundEnabled, setSoundEnabled] = useState(true);
@@ -52,8 +52,35 @@ export default function SettingsPage() {
         </p>
       </div>
 
-      {/* Cards grid — two columns on large screens */}
+      {/* Cards grid — two columns on large screens. Order (row,col):
+          User Info (1,1) · Appearance (1,2) · Data & Refresh (2,1) ·
+          Transcript Retention (2,2) · Notifications (3,1) · Connection Info (3,2). */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* User Info */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <User className="h-5 w-5" />
+              User Info
+            </CardTitle>
+            <CardDescription>Your account information</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center gap-4">
+              <div className="h-16 w-16 rounded-full bg-primary flex items-center justify-center">
+                <span className="text-primary-foreground font-bold text-2xl">CEO</span>
+              </div>
+              <div>
+                <p className="font-semibold text-lg">Renzo</p>
+                <p className="text-sm text-muted-foreground">Chief Executive Officer</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Agent ID: 00000000-0000-0000-0000-000000000001
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
         {/* Appearance */}
         <Card>
           <CardHeader>
@@ -98,45 +125,6 @@ export default function SettingsPage() {
           </CardContent>
         </Card>
 
-        {/* Notifications */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Bell className="h-5 w-5" />
-              Notifications
-            </CardTitle>
-            <CardDescription>Configure how you receive updates</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <Label>Enable Notifications</Label>
-                <p className="text-sm text-muted-foreground">
-                  Receive real-time notifications from agents
-                </p>
-              </div>
-              <Switch
-                checked={notificationsEnabled}
-                onCheckedChange={setNotificationsEnabled}
-              />
-            </div>
-            <Separator />
-            <div className="flex items-center justify-between">
-              <div>
-                <Label>Sound Alerts</Label>
-                <p className="text-sm text-muted-foreground">
-                  Play sound for important notifications
-                </p>
-              </div>
-              <Switch
-                checked={soundEnabled}
-                onCheckedChange={setSoundEnabled}
-                disabled={!notificationsEnabled}
-              />
-            </div>
-          </CardContent>
-        </Card>
-
         {/* Data & Refresh */}
         <Card>
           <CardHeader>
@@ -189,6 +177,45 @@ export default function SettingsPage() {
         {/* Transcript Retention (panel-tunable; persisted server-side) */}
         <TranscriptRetentionCard />
 
+        {/* Notifications */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Bell className="h-5 w-5" />
+              Notifications
+            </CardTitle>
+            <CardDescription>Configure how you receive updates</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <Label>Enable Notifications</Label>
+                <p className="text-sm text-muted-foreground">
+                  Receive real-time notifications from agents
+                </p>
+              </div>
+              <Switch
+                checked={notificationsEnabled}
+                onCheckedChange={setNotificationsEnabled}
+              />
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between">
+              <div>
+                <Label>Sound Alerts</Label>
+                <p className="text-sm text-muted-foreground">
+                  Play sound for important notifications
+                </p>
+              </div>
+              <Switch
+                checked={soundEnabled}
+                onCheckedChange={setSoundEnabled}
+                disabled={!notificationsEnabled}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
         {/* Connection Info */}
         <Card>
           <CardHeader>
@@ -212,31 +239,6 @@ export default function SettingsPage() {
             </p>
           </CardContent>
         </Card>
-
-        {/* User Info */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <User className="h-5 w-5" />
-              User Info
-            </CardTitle>
-            <CardDescription>Your account information</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center gap-4">
-              <div className="h-16 w-16 rounded-full bg-primary flex items-center justify-center">
-                <span className="text-primary-foreground font-bold text-2xl">CEO</span>
-              </div>
-              <div>
-                <p className="font-semibold text-lg">Renzo</p>
-                <p className="text-sm text-muted-foreground">Chief Executive Officer</p>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Agent ID: 00000000-0000-0000-0000-000000000001
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
       </div>
 
       {/* Save Button */}