feat: add Notion-like Todo view with push-to-board, brand gradient, and dev proxy

- New /todos route: quick-add drafts with drag-and-drop reorder, inline editing,
  priority cycling, bulk select, and push-to-board (localStorage-persisted via Zustand)
- Brand alignment: gradient wordmark logo matching engram.sensai.co.in landing page
- IssuePanel: added Chat button to navigate to /task/:id from board
- Vite dev proxy: /api and /ws passthrough for local development
- New files: useTodoStore.ts, TodoView.tsx, checkbox.tsx (shadcn/radix)
- Modified: App.tsx, AppBar.tsx, IssuePanel.tsx, index.css, vite.config.ts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: VivekKumar314e

engram-bridge/engram_bridge/channels/web-ui/src/App.tsx

@@ -9,6 +9,7 @@ import { ChatView } from "@/views/ChatView";
 import { BoardView } from "@/views/BoardView";
 import { TaskChatView } from "@/views/TaskChatView";
 import { MemoryView } from "@/views/MemoryView";
+import { TodoView } from "@/views/TodoView";
 import { CommandBar } from "@/components/dialogs/CommandBar";
 import { SettingsDialog } from "@/components/dialogs/SettingsDialog";
 import { IssuePanel } from "@/components/issue/IssuePanel";
@@ -29,6 +30,7 @@ function AppInner() {
 
         <Routes>
           <Route path="/" element={<ChatView />} />
+          <Route path="/todos" element={<TodoView />} />
           <Route path="/board" element={<BoardView />} />
           <Route path="/task/:taskId" element={<TaskChatView />} />
           <Route path="/memory" element={<MemoryView />} />

engram-bridge/engram_bridge/channels/web-ui/src/components/issue/IssuePanel.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from "react";
-import { X, Trash2, Plus, Send } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { X, Trash2, Plus, Send, MessageSquare } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -33,6 +34,7 @@ export function IssuePanel({ issue, createMode, defaultStatusId, onClose, onIssu
   const [newAssignee, setNewAssignee] = useState("");
   const [saving, setSaving] = useState(false);
 
+  const navigate = useNavigate();
   const titleRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -149,6 +151,18 @@ export function IssuePanel({ issue, createMode, defaultStatusId, onClose, onIssu
             )}
           </div>
           <div className="flex items-center gap-1">
+            {!createMode && issue && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => { onClose(); navigate(`/task/${issue.id}`); }}
+                className="h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
+                title="Open task chat"
+              >
+                <MessageSquare className="h-3.5 w-3.5" />
+                Chat
+              </Button>
+            )}
             {!createMode && issue && (
               <Button variant="ghost" size="sm" onClick={handleDelete} className="h-7 w-7 p-0 text-destructive hover:text-destructive">
                 <Trash2 className="h-3.5 w-3.5" />

engram-bridge/engram_bridge/channels/web-ui/src/components/layout/AppBar.tsx

@@ -1,10 +1,10 @@
 import { useLocation, useNavigate } from "react-router-dom";
 import {
-  Brain,
   Wifi,
   WifiOff,
   Loader2,
   MessageSquare,
+  ListTodo,
   LayoutDashboard,
   Database,
   ChevronDown,
@@ -22,6 +22,7 @@ interface Props {
 
 const NAV_TABS = [
   { path: "/", label: "Chat", icon: MessageSquare },
+  { path: "/todos", label: "Todos", icon: ListTodo },
   { path: "/board", label: "Board", icon: LayoutDashboard },
   { path: "/memory", label: "Memory", icon: Database },
 ] as const;
@@ -53,12 +54,18 @@ export function AppBar({ onOpenSettings }: Props) {
     <header className="flex items-center justify-between px-4 py-2.5 border-b border-border bg-background">
       <div className="flex items-center gap-4">
         {/* Logo */}
-        <div className="flex items-center gap-2.5">
-          <div className="w-7 h-7 rounded-lg flex items-center justify-center bg-primary">
-            <Brain className="h-4 w-4 text-primary-foreground" />
-          </div>
-          <h1 className="text-sm font-semibold tracking-tight">engram</h1>
-        </div>
+        <a
+          href="/"
+          onClick={(e) => { e.preventDefault(); navigate("/"); }}
+          className="flex items-center hover:opacity-80 transition-opacity"
+        >
+          <span
+            className="engram-gradient-text font-bold tracking-[-0.025em]"
+            style={{ fontSize: "1.35rem", lineHeight: "1.5rem", fontFamily: "'Space Grotesk', sans-serif" }}
+          >
+            engram
+          </span>
+        </a>
 
         {/* Project selector */}
         {currentProject && (

engram-bridge/engram_bridge/channels/web-ui/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

engram-bridge/engram_bridge/channels/web-ui/src/index.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
@@ -114,3 +115,15 @@
 .thinking-dot:nth-child(1) { animation: pulse-dots 1.4s infinite 0s; }
 .thinking-dot:nth-child(2) { animation: pulse-dots 1.4s infinite 0.2s; }
 .thinking-dot:nth-child(3) { animation: pulse-dots 1.4s infinite 0.4s; }
+
+/* Engram brand gradient (matches landing page) */
+.engram-gradient-text {
+  background: linear-gradient(135deg, #e8722a 0%, #e85d45 30%, #d4607a 60%, #ff8a2b 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.engram-gradient-bg {
+  background: linear-gradient(135deg, #e8722a 0%, #e85d45 30%, #d4607a 60%, #ff8a2b 100%);
+}

engram-bridge/engram_bridge/channels/web-ui/src/stores/useTodoStore.ts

@@ -0,0 +1,94 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import type { Priority } from "@/types";
+
+export interface TodoDraft {
+  id: string;
+  title: string;
+  priority: Priority;
+  selected: boolean;
+  createdAt: string;
+}
+
+interface TodoState {
+  drafts: TodoDraft[];
+  addDraft: (title: string) => void;
+  updateDraftTitle: (id: string, title: string) => void;
+  updateDraftPriority: (id: string, priority: Priority) => void;
+  removeDraft: (id: string) => void;
+  toggleSelect: (id: string) => void;
+  selectAll: () => void;
+  deselectAll: () => void;
+  reorder: (fromIndex: number, toIndex: number) => void;
+  removeDrafts: (ids: string[]) => void;
+}
+
+export const useTodoStore = create<TodoState>()(
+  persist(
+    (set) => ({
+      drafts: [],
+
+      addDraft: (title) =>
+        set((s) => ({
+          drafts: [
+            ...s.drafts,
+            {
+              id: crypto.randomUUID(),
+              title,
+              priority: "medium" as Priority,
+              selected: false,
+              createdAt: new Date().toISOString(),
+            },
+          ],
+        })),
+
+      updateDraftTitle: (id, title) =>
+        set((s) => ({
+          drafts: s.drafts.map((d) => (d.id === id ? { ...d, title } : d)),
+        })),
+
+      updateDraftPriority: (id, priority) =>
+        set((s) => ({
+          drafts: s.drafts.map((d) => (d.id === id ? { ...d, priority } : d)),
+        })),
+
+      removeDraft: (id) =>
+        set((s) => ({
+          drafts: s.drafts.filter((d) => d.id !== id),
+        })),
+
+      toggleSelect: (id) =>
+        set((s) => ({
+          drafts: s.drafts.map((d) =>
+            d.id === id ? { ...d, selected: !d.selected } : d,
+          ),
+        })),
+
+      selectAll: () =>
+        set((s) => ({
+          drafts: s.drafts.map((d) => ({ ...d, selected: true })),
+        })),
+
+      deselectAll: () =>
+        set((s) => ({
+          drafts: s.drafts.map((d) => ({ ...d, selected: false })),
+        })),
+
+      reorder: (fromIndex, toIndex) =>
+        set((s) => {
+          const drafts = [...s.drafts];
+          const [moved] = drafts.splice(fromIndex, 1);
+          drafts.splice(toIndex, 0, moved);
+          return { drafts };
+        }),
+
+      removeDrafts: (ids) =>
+        set((s) => ({
+          drafts: s.drafts.filter((d) => !ids.includes(d.id)),
+        })),
+    }),
+    {
+      name: "engram-todos",
+    },
+  ),
+);