feat(notifications): deep-link bell rows to source stack and container logs (#692)

Add stack_name and container_name columns to notification_history so bell
rows can act as jump points. Producers (AutoHeal, Docker events) pass the
container context through dispatchAlert; the panel renders routable rows
as buttons that load the target stack and, when a container name is
present, open its logs modal. Non-structural notifications stay as
passive display rows.

frontend/src/components/EditorLayout.tsx

@@ -239,6 +239,7 @@ export default function EditorLayout() {
   const [gitSourcePendingMap, setGitSourcePendingMap] = useState<Record<string, boolean>>({});
   const monacoEditorRef = useRef<import('monaco-editor').editor.IStandaloneCodeEditor | null>(null);
   const pendingStackLoadRef = useRef<string | null>(null);
+  const pendingLogsRef = useRef<{ stackName: string; containerName: string } | null>(null);
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [createMode, setCreateMode] = useState<'empty' | 'git' | 'docker-run'>('empty');
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -1044,6 +1045,27 @@ export default function EditorLayout() {
     };
   }, [containers]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Resolve a pending container name (from notification click) to a live
+  // container id once the target stack's container list loads, then dispatch
+  // the logs event. Only consume when the current stack matches the pending
+  // target — prevents a canceled unsaved-load from leaking the pending name
+  // into an unrelated container refresh. Container ids churn across
+  // recreations, so we store the name and resolve here instead of storing an
+  // id at dispatch time.
+  useEffect(() => {
+    const pending = pendingLogsRef.current;
+    if (!pending || selectedFile !== pending.stackName || containers.length === 0) return;
+    pendingLogsRef.current = null;
+    const match = containers.find(c =>
+      (c.Names ?? []).some(n => n.replace(/^\//, '') === pending.containerName),
+    );
+    if (match) {
+      window.dispatchEvent(new CustomEvent<SenchoOpenLogsDetail>(SENCHO_OPEN_LOGS_EVENT, {
+        detail: { containerId: match.Id, containerName: pending.containerName },
+      }));
+    }
+  }, [containers, selectedFile]);
+
   const hasUnsavedChanges = () =>
     content !== originalContent || envContent !== originalEnvContent;
 
@@ -1157,6 +1179,21 @@ export default function EditorLayout() {
     }
   };
 
+  const navigateToNotification = (notif: NotificationItem) => {
+    if (!notif.stack_name) return;
+    pendingLogsRef.current = notif.container_name
+      ? { stackName: notif.stack_name, containerName: notif.container_name }
+      : null;
+    const targetNode = notif.nodeId !== undefined
+      ? nodes.find(n => n.id === notif.nodeId)
+      : activeNode;
+    if (targetNode && targetNode.id !== activeNode?.id) {
+      loadFileOnNode(targetNode, notif.stack_name);
+    } else {
+      loadFile(notif.stack_name);
+    }
+  };
+
   const changeEnvFile = async (file: string) => {
     setSelectedEnvFile(file);
     setIsFileLoading(true);
@@ -2536,6 +2573,7 @@ export default function EditorLayout() {
               onMarkAllRead={markAllRead}
               onClearAll={clearAllNotifications}
               onDelete={deleteNotification}
+              onNavigate={navigateToNotification}
             />
 
 

frontend/src/components/NotificationPanel.tsx

@@ -89,6 +89,7 @@ interface NotificationPanelProps {
     onMarkAllRead: () => void;
     onClearAll: () => void;
     onDelete: (notif: NotificationItem) => void;
+    onNavigate?: (notif: NotificationItem) => void;
 }
 
 export function NotificationPanel({
@@ -97,8 +98,10 @@ export function NotificationPanel({
     onMarkAllRead,
     onClearAll,
     onDelete,
+    onNavigate,
 }: NotificationPanelProps) {
     const [filter, setFilter] = useState<NotifFilter>('all');
+    const [open, setOpen] = useState(false);
 
     const unreadCount = useMemo(
         () => notifications.filter((n) => !n.is_read).length,
@@ -137,8 +140,14 @@ export function NotificationPanel({
             </span>
         ) : null;
 
+    const handleNavigate = (notif: NotificationItem) => {
+        if (!onNavigate || !notif.stack_name) return;
+        onNavigate(notif);
+        setOpen(false);
+    };
+
     return (
-        <Popover>
+        <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <Button
                     variant="ghost"
@@ -225,6 +234,7 @@ export function NotificationPanel({
                                             notif.nodeId !== undefined && remoteNodeIds.has(notif.nodeId)
                                         }
                                         onDelete={onDelete}
+                                        onNavigate={onNavigate ? handleNavigate : undefined}
                                     />
                                 ))}
                             </div>
@@ -240,22 +250,22 @@ interface NotificationRowProps {
     notif: NotificationItem;
     showNodeName: boolean;
     onDelete: (notif: NotificationItem) => void;
+    onNavigate?: (notif: NotificationItem) => void;
 }
 
-function NotificationRow({ notif, showNodeName, onDelete }: NotificationRowProps) {
+function NotificationRow({ notif, showNodeName, onDelete, onNavigate }: NotificationRowProps) {
     const config = LEVEL_CONFIG[notif.level];
     const Icon = config.icon;
     const isUnread = !notif.is_read;
+    const isRoutable = Boolean(onNavigate && notif.stack_name);
 
-    return (
-        <div className="group relative flex items-start gap-3 border-b border-card-border/40 px-5 py-3 transition-colors last:border-b-0 hover:bg-accent/40">
-            <div
-                className={cn(
-                    'absolute inset-y-0 left-0 w-[3px] transition-opacity',
-                    config.railClass,
-                    isUnread ? 'opacity-100' : 'opacity-30',
-                )}
-            />
+    const surfaceClasses = cn(
+        'flex w-full items-start gap-3 px-5 py-3 text-left transition-colors',
+        isRoutable && 'cursor-pointer hover:bg-accent/40 focus-visible:bg-accent/40 focus-visible:outline-none',
+    );
+
+    const content = (
+        <>
             <Icon
                 className={cn('mt-0.5 h-4 w-4 flex-shrink-0', config.iconClass)}
                 strokeWidth={1.5}
@@ -281,14 +291,41 @@ function NotificationRow({ notif, showNodeName, onDelete }: NotificationRowProps
                     <span className="tabular-nums">{formatRelative(notif.timestamp)}</span>
                 </div>
             </div>
+        </>
+    );
+
+    const ariaLabel = isRoutable
+        ? (notif.container_name
+            ? `Open ${notif.stack_name} and view logs for ${notif.container_name}`
+            : `Open ${notif.stack_name}`)
+        : undefined;
+
+    return (
+        <div className="group relative border-b border-card-border/40 last:border-b-0">
+            <div
+                className={cn(
+                    'pointer-events-none absolute inset-y-0 left-0 z-10 w-[3px] transition-opacity',
+                    config.railClass,
+                    isUnread ? 'opacity-100' : 'opacity-30',
+                )}
+            />
+            {isRoutable ? (
+                <button
+                    type="button"
+                    className={surfaceClasses}
+                    onClick={() => onNavigate?.(notif)}
+                    aria-label={ariaLabel}
+                >
+                    {content}
+                </button>
+            ) : (
+                <div className={surfaceClasses}>{content}</div>
+            )}
             <Button
                 variant="ghost"
                 size="icon"
-                className="absolute right-2 top-2 h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    onDelete(notif);
-                }}
+                className="absolute right-2 top-2 z-20 h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+                onClick={() => onDelete(notif)}
                 title="Dismiss"
             >
                 <X className="h-3 w-3" strokeWidth={1.5} />

frontend/src/components/dashboard/types.ts

@@ -51,6 +51,8 @@ export interface NotificationItem {
   is_read: number;
   nodeId?: number;
   nodeName?: string;
+  stack_name?: string;
+  container_name?: string;
 }
 
 export interface StackStatusEntry {