I mean, it's at a good place rn...

panel/src/store/index.ts

@@ -0,0 +1,2 @@
+export { useUIStore } from "./ui-store";
+export { useNotificationStore } from "./notifications-store";

panel/src/store/notifications-store.ts

@@ -0,0 +1,52 @@
+import { create } from "zustand";
+import type { Notification } from "@/types";
+
+interface NotificationState {
+  notifications: Notification[];
+  unreadCount: number;
+  pendingAckCount: number;
+  
+  // Actions
+  addNotification: (notification: Notification) => void;
+  markAsRead: (id: string) => void;
+  markAsAcknowledged: (id: string) => void;
+  setNotifications: (notifications: Notification[]) => void;
+  setCounts: (unread: number, pendingAck: number) => void;
+  clearAll: () => void;
+}
+
+export const useNotificationStore = create<NotificationState>((set) => ({
+  notifications: [],
+  unreadCount: 0,
+  pendingAckCount: 0,
+
+  addNotification: (notification) =>
+    set((state) => ({
+      notifications: [notification, ...state.notifications].slice(0, 50),
+      unreadCount: state.unreadCount + (notification.is_read ? 0 : 1),
+      pendingAckCount: state.pendingAckCount + (notification.requires_ack && !notification.is_acknowledged ? 1 : 0),
+    })),
+
+  markAsRead: (id) =>
+    set((state) => ({
+      notifications: state.notifications.map((n) =>
+        n.id === id ? { ...n, is_read: true } : n
+      ),
+      unreadCount: Math.max(0, state.unreadCount - 1),
+    })),
+
+  markAsAcknowledged: (id) =>
+    set((state) => ({
+      notifications: state.notifications.map((n) =>
+        n.id === id ? { ...n, is_acknowledged: true } : n
+      ),
+      pendingAckCount: Math.max(0, state.pendingAckCount - 1),
+    })),
+
+  setNotifications: (notifications) => set({ notifications }),
+
+  setCounts: (unread, pendingAck) =>
+    set({ unreadCount: unread, pendingAckCount: pendingAck }),
+
+  clearAll: () => set({ notifications: [], unreadCount: 0, pendingAckCount: 0 }),
+}));

panel/src/store/ui-store.ts

@@ -0,0 +1,45 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import type { Team } from "@/types";
+
+interface UIState {
+  // Sidebar
+  sidebarOpen: boolean;
+  sidebarCollapsed: boolean;
+  
+  // Theme
+  theme: "light" | "dark" | "system";
+  
+  // Current context
+  currentTeam: Team | null;
+  
+  // Actions
+  toggleSidebar: () => void;
+  setSidebarCollapsed: (collapsed: boolean) => void;
+  setTheme: (theme: "light" | "dark" | "system") => void;
+  setCurrentTeam: (team: Team | null) => void;
+}
+
+export const useUIStore = create<UIState>()(
+  persist(
+    (set) => ({
+      sidebarOpen: true,
+      sidebarCollapsed: false,
+      theme: "system",
+      currentTeam: null,
+
+      toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+      setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+      setTheme: (theme) => set({ theme }),
+      setCurrentTeam: (team) => set({ currentTeam: team }),
+    }),
+    {
+      name: "roboco-ui-storage",
+      partialize: (state) => ({
+        sidebarCollapsed: state.sidebarCollapsed,
+        theme: state.theme,
+        currentTeam: state.currentTeam,
+      }),
+    }
+  )
+);