feat(dashboard): brain icon for Models in the sidebar, Topology destination node with cpu-ai icon and rounder corners, dragged nodes no longer snap back on refresh, Alerts filters inside the Events tab without the intro text

design-system/registry/components.json

@@ -1109,6 +1109,14 @@
         "canvas.css"
       ]
     },
+    "is-sink": {
+      "classes": [
+        "is-sink"
+      ],
+      "files": [
+        "canvas.css"
+      ]
+    },
     "is-success": {
       "classes": [
         "is-success"
@@ -2236,8 +2244,8 @@
   "stats": {
     "tokens": 58,
     "darkOverrides": 50,
-    "blocks": 222,
-    "classes": 240,
+    "blocks": 223,
+    "classes": 241,
     "canonicalRules": 5,
     "ghostRules": 5
   }

design-system/registry/llms.txt

@@ -72,7 +72,7 @@
 ### sidebar
 --sidebar-width-collapsed: 60px
 
-## Blocks (222 BEM blocks, 240 classes)
+## Blocks (223 BEM blocks, 241 classes)
 actions (shell.css): actions
 agent-type-select (shell.css): agent-type-select__option
 alert-row (shell.css): alert-row
@@ -179,6 +179,7 @@ is-pulse (base.css): is-pulse
 is-round (canvas.css): is-round
 is-selected (base.css, canvas.css): is-selected
 is-selecting (canvas.css): is-selecting
+is-sink (canvas.css): is-sink
 is-success (shell.css): is-success
 is-unread (shell.css): is-unread
 is-unseen (shell.css): is-unseen

docs/releases/0.28.1.md

@@ -0,0 +1,9 @@
+# Thinker 0.28.1
+
+```bash
+docker pull tmsoftbrasil/thinker:0.28.1
+```
+
+## Mudanças
+
+- feat(dashboard): brain icon for Models in the sidebar, Topology destination node with cpu-ai icon and rounder corners, dragged nodes no longer snap back on refresh, Alerts filters inside the Events tab without the intro text

packages/frontend/src/components/flow/FlowCanvas.tsx

@@ -70,10 +70,19 @@ function Canvas({
   const [selecting, setSelecting] = useState(false);
 
   useEffect(() => {
-    // A data refresh or a saved move keeps the user's selection.
+    // A data refresh or a saved move keeps the user's selection, and never
+    // moves a node that is being dragged (it would jump back, then return).
     setNodes((prev) => {
-      const selected = new Set(prev.filter((n) => n.selected).map((n) => n.id));
-      return graph.nodes.map((n) => (selected.has(n.id) ? { ...n, selected: true } : n));
+      const current = new Map(prev.map((n) => [n.id, n]));
+      return graph.nodes.map((n) => {
+        const old = current.get(n.id);
+        if (!old?.selected && !old?.dragging) return n;
+        return {
+          ...n,
+          selected: old.selected,
+          ...(old.dragging ? { dragging: true, position: old.position } : {}),
+        };
+      });
     });
     setEdges(
       validEdges(graph.nodes, graph.edges).map((e) => ({

packages/frontend/src/components/flow/nodes.tsx

@@ -29,6 +29,7 @@ function StepNodeView({ data, selected }: NodeProps<FlowNode>) {
         className={cx(
           'n8n-box',
           data.round && 'is-round',
+          data.sink && 'is-sink',
           data.badge ? 'has-badge' : null,
           data.state && `is-${data.state}`,
           selected && 'is-selected',

packages/frontend/src/components/flow/types.ts

@@ -43,6 +43,8 @@ export interface FlowNodeData extends Record<string, unknown> {
   state?: 'active' | 'error' | 'idle';
   /** For steps: a circle instead of a square (where traffic ends). */
   round?: boolean;
+  /** For steps: the end of the flow (a destination host), with rounder corners. */
+  sink?: boolean;
   /** Where a double-click goes. */
   href?: string;
 }

packages/frontend/src/config/navigation.tsx

@@ -17,7 +17,7 @@ import {
   type LucideIcon,
   Network,
   BellRing,
-  Boxes,
+  Brain,
 } from 'lucide-react';
 import { t, type TranslationKey } from '../i18n/index.js';
 
@@ -71,7 +71,7 @@ export const NAVIGATION: NavGroup[] = [
         icon: CreditCard,
         match: ['/providers/connections'],
       },
-      { key: 'models', to: '/providers/models', label: 'nav.models', icon: Boxes },
+      { key: 'models', to: '/providers/models', label: 'nav.models', icon: Brain },
     ],
   },
   {

packages/frontend/src/pages/Alerts.tsx

@@ -83,50 +83,6 @@ export default function Alerts() {
     <div className="page full">
       <title>{t('alerts.pageTitle')}</title>
       <meta name="description" content={t('alerts.subtitle')} />
-      <div className="page-head">
-        <p className="m-0 max-w-2xl text-sm text-muted">{t('alerts.subtitle')}</p>
-        {view === 'events' ? (
-          <div className="page-actions w-full lg:w-auto lg:justify-end">
-            <button
-              type="button"
-              className={cx(
-                'feedback-tag btn btn-sm',
-                unread ? 'feedback-tag--selected' : 'btn-ghost',
-              )}
-              aria-pressed={unread}
-              onClick={() => setParam('unread', unread ? '' : '1')}
-            >
-              {t('alerts.filter.unread')}
-            </button>
-            <div className="w-full sm:w-40">
-              <Select
-                value={level}
-                onChange={(v) => setParam('level', v)}
-                options={levelOptions}
-                label={t('alerts.filter.level')}
-              />
-            </div>
-            <div className="w-full sm:w-44">
-              <Select
-                value={category}
-                onChange={(v) => setParam('category', v)}
-                options={categoryOptions}
-                label={t('alerts.filter.category')}
-              />
-            </div>
-            <Button
-              variant="ghost"
-              size="sm"
-              disabled={busy || !data || data.unread === 0}
-              onClick={() => void markAll()}
-            >
-              <Check size={14} />
-              {t('alerts.markAllRead')}
-            </Button>
-          </div>
-        ) : null}
-      </div>
-
       <Tabs<View>
         className="mb-4"
         label={t('alerts.title')}
@@ -142,6 +98,47 @@ export default function Alerts() {
         ]}
       />
 
+      {view === 'events' ? (
+        <div className="page-actions mb-4 w-full">
+          <button
+            type="button"
+            className={cx(
+              'feedback-tag btn btn-sm',
+              unread ? 'feedback-tag--selected' : 'btn-ghost',
+            )}
+            aria-pressed={unread}
+            onClick={() => setParam('unread', unread ? '' : '1')}
+          >
+            {t('alerts.filter.unread')}
+          </button>
+          <div className="w-full sm:w-40">
+            <Select
+              value={level}
+              onChange={(v) => setParam('level', v)}
+              options={levelOptions}
+              label={t('alerts.filter.level')}
+            />
+          </div>
+          <div className="w-full sm:w-44">
+            <Select
+              value={category}
+              onChange={(v) => setParam('category', v)}
+              options={categoryOptions}
+              label={t('alerts.filter.category')}
+            />
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={busy || !data || data.unread === 0}
+            onClick={() => void markAll()}
+          >
+            <Check size={14} />
+            {t('alerts.markAllRead')}
+          </Button>
+        </div>
+      ) : null}
+
       {view === 'requests' ? (
         <FailedRequests items={failed.data?.items ?? null} total={failed.data?.total ?? 0} />
       ) : events.error ? (

packages/frontend/src/pages/topology-adapter.ts

@@ -2,14 +2,14 @@ import { createElement } from 'react';
 import {
   Bot,
   BrainCircuit,
+  CpuAi,
   CreditCard,
   Globe,
   GlobeLock,
   HandPlatter,
   HardDrive,
   House,
   KeyRound,
-  MapPin,
   Plug,
   Server,
   Waypoints,
@@ -315,8 +315,9 @@ export function buildTopologyGraph(
         type: 'node',
         data: {
           kind: 'node',
-          icon: lucide(MapPin),
+          icon: lucide(CpuAi),
           title: dest.host,
+          sink: true,
           subtitle: t('shell.flow.destination'),
           tooltip: usageTooltip(`${t('shell.flow.destination')} · ${dest.host}`, dest),
           state: nodeState(dest),

packages/frontend/src/styles/canvas.css

@@ -217,6 +217,10 @@
   .n8n-box.is-round {
     border-radius: 50%;
   }
+  /* The end of the flow (a destination host): rounder on every corner. */
+  .n8n-box.is-sink {
+    border-radius: 36px;
+  }
   .n8n-box.is-idle {
     border-style: dashed;
   }

packages/thinker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thinker",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "private": true,
   "description": "Canonical release version for the Thinker Docker image. This package holds no code — the real backend and frontend live in ../backend and ../frontend. See README.md for details."
 }