From d7a8652067e36554bb1a77334ed252877d02a87e Mon Sep 17 00:00:00 2001
From: Peter Kirkham <peter@posthog.com>
Date: Mon, 12 Jan 2026 21:55:35 -0800
Subject: [PATCH 1/2] feat: New history based side nav

---
 .../sidebar/components/HistoryView.tsx        | 136 ++++++++++++++
 .../sidebar/components/SidebarFooter.tsx      |  35 +++-
 .../sidebar/components/SidebarMenu.tsx        | 174 ++++++++++--------
 .../sidebar/components/ViewModeSelector.tsx   |  62 +++++++
 .../features/sidebar/hooks/useSidebarData.ts  |  99 ++++++++++
 .../features/sidebar/stores/sidebarStore.ts   |  22 +++
 6 files changed, 441 insertions(+), 87 deletions(-)
 create mode 100644 apps/array/src/renderer/features/sidebar/components/HistoryView.tsx
 create mode 100644 apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx

diff --git a/apps/array/src/renderer/features/sidebar/components/HistoryView.tsx b/apps/array/src/renderer/features/sidebar/components/HistoryView.tsx
new file mode 100644
index 000000000..83106aa80
--- /dev/null
+++ b/apps/array/src/renderer/features/sidebar/components/HistoryView.tsx
@@ -0,0 +1,136 @@
+import { useTaskExecutionStore } from "@features/task-detail/stores/taskExecutionStore";
+import { Button, Flex } from "@radix-ui/themes";
+import { useWorkspaceStore } from "@/renderer/features/workspace/stores/workspaceStore";
+import type { HistoryData, HistoryTaskData } from "../hooks/useSidebarData";
+import { useSidebarStore } from "../stores/sidebarStore";
+import { TaskItem } from "./items/TaskItem";
+
+interface HistoryViewProps {
+  historyData: HistoryData;
+  activeTaskId: string | null;
+  onTaskClick: (taskId: string) => void;
+  onTaskContextMenu: (taskId: string, e: React.MouseEvent) => void;
+  onTaskDelete: (taskId: string) => void;
+  onTaskTogglePin: (taskId: string) => void;
+}
+
+function HistorySectionLabel({ label }: { label: string }) {
+  return (
+    <div className="px-2 py-1 font-medium font-mono text-[10px] text-gray-10 uppercase tracking-wide">
+      {label}
+    </div>
+  );
+}
+
+interface HistoryTaskItemProps {
+  task: HistoryTaskData;
+  isActive: boolean;
+  onClick: () => void;
+  onContextMenu: (e: React.MouseEvent) => void;
+  onDelete: () => void;
+  onTogglePin: () => void;
+}
+
+function HistoryTaskItem({
+  task,
+  isActive,
+  onClick,
+  onContextMenu,
+  onDelete,
+  onTogglePin,
+}: HistoryTaskItemProps) {
+  const workspaces = useWorkspaceStore.use.workspaces();
+  const taskStates = useTaskExecutionStore((state) => state.taskStates);
+
+  const workspace = workspaces[task.id];
+  const taskState = taskStates[task.id];
+
+  return (
+    <TaskItem
+      id={task.id}
+      label={task.title}
+      isActive={isActive}
+      worktreeName={workspace?.worktreeName ?? undefined}
+      worktreePath={workspace?.worktreePath ?? workspace?.folderPath}
+      workspaceMode={taskState?.workspaceMode}
+      lastActivityAt={task.lastActivityAt}
+      isGenerating={task.isGenerating}
+      isUnread={task.isUnread}
+      isPinned={task.isPinned}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      onDelete={onDelete}
+      onTogglePin={onTogglePin}
+    />
+  );
+}
+
+export function HistoryView({
+  historyData,
+  activeTaskId,
+  onTaskClick,
+  onTaskContextMenu,
+  onTaskDelete,
+  onTaskTogglePin,
+}: HistoryViewProps) {
+  const loadMoreHistory = useSidebarStore((state) => state.loadMoreHistory);
+  const { activeTasks, recentTasks, hasMore } = historyData;
+
+  const hasActiveTasks = activeTasks.length > 0;
+  const hasRecentTasks = recentTasks.length > 0;
+
+  return (
+    <Flex direction="column">
+      {hasActiveTasks && (
+        <>
+          <HistorySectionLabel label="Active" />
+          {activeTasks.map((task) => (
+            <HistoryTaskItem
+              key={task.id}
+              task={task}
+              isActive={activeTaskId === task.id}
+              onClick={() => onTaskClick(task.id)}
+              onContextMenu={(e) => onTaskContextMenu(task.id, e)}
+              onDelete={() => onTaskDelete(task.id)}
+              onTogglePin={() => onTaskTogglePin(task.id)}
+            />
+          ))}
+          {hasRecentTasks && (
+            <div className="mx-2 my-2 border-gray-6 border-t" />
+          )}
+        </>
+      )}
+
+      {hasRecentTasks && (
+        <>
+          <HistorySectionLabel label="Recent" />
+          {recentTasks.map((task) => (
+            <HistoryTaskItem
+              key={task.id}
+              task={task}
+              isActive={activeTaskId === task.id}
+              onClick={() => onTaskClick(task.id)}
+              onContextMenu={(e) => onTaskContextMenu(task.id, e)}
+              onDelete={() => onTaskDelete(task.id)}
+              onTogglePin={() => onTaskTogglePin(task.id)}
+            />
+          ))}
+        </>
+      )}
+
+      {hasMore && (
+        <div className="px-2 py-2">
+          <Button
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={loadMoreHistory}
+            style={{ width: "100%" }}
+          >
+            Show more
+          </Button>
+        </div>
+      )}
+    </Flex>
+  );
+}
diff --git a/apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx b/apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx
index 9e1f3536c..907df20f7 100644
--- a/apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx
+++ b/apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx
@@ -5,10 +5,12 @@ import { useRegisteredFoldersStore } from "@renderer/stores/registeredFoldersSto
 import { trpcVanilla } from "@renderer/trpc";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useCallback } from "react";
+import { useSidebarStore } from "../stores/sidebarStore";
 
 export function SidebarFooter() {
   const addFolder = useRegisteredFoldersStore((state) => state.addFolder);
-  const { toggleSettings } = useNavigationStore();
+  const { toggleSettings, navigateToTaskInput } = useNavigationStore();
+  const viewMode = useSidebarStore((state) => state.viewMode);
 
   const handleAddRepository = useCallback(async () => {
     const selectedPath = await trpcVanilla.os.selectDirectory.query();
@@ -17,6 +19,12 @@ export function SidebarFooter() {
     }
   }, [addFolder]);
 
+  const handleNewTask = useCallback(() => {
+    navigateToTaskInput();
+  }, [navigateToTaskInput]);
+
+  const isHistoryView = viewMode === "history";
+
   return (
     <Box
       style={{
@@ -30,15 +38,22 @@ export function SidebarFooter() {
       }}
     >
       <Flex align="center" gap="2" justify="between">
-        <Button
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={handleAddRepository}
-        >
-          <Plus size={14} weight="bold" />
-          Add repository
-        </Button>
+        {isHistoryView ? (
+          <Button size="1" variant="ghost" color="gray" onClick={handleNewTask}>
+            <Plus size={14} weight="bold" />
+            New task
+          </Button>
+        ) : (
+          <Button
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={handleAddRepository}
+          >
+            <Plus size={14} weight="bold" />
+            Add repository
+          </Button>
+        )}
 
         <IconButton
           size="1"
diff --git a/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx b/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx
index 564b498c6..e655d7d99 100644
--- a/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx
+++ b/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx
@@ -18,11 +18,13 @@ import { useSidebarData } from "../hooks/useSidebarData";
 import { usePinnedTasksStore } from "../stores/pinnedTasksStore";
 import { useSidebarStore } from "../stores/sidebarStore";
 import { useTaskViewedStore } from "../stores/taskViewedStore";
+import { HistoryView } from "./HistoryView";
 import { HomeItem } from "./items/HomeItem";
 import { NewTaskItem } from "./items/NewTaskItem";
 import { TaskItem } from "./items/TaskItem";
 import { SidebarFooter } from "./SidebarFooter";
 import { SortableFolderSection } from "./SortableFolderSection";
+import { ViewModeSelector } from "./ViewModeSelector";
 
 function SidebarMenuComponent() {
   const {
@@ -41,6 +43,7 @@ function SidebarMenuComponent() {
   const toggleSection = useSidebarStore((state) => state.toggleSection);
   const folderOrder = useSidebarStore((state) => state.folderOrder);
   const reorderFolders = useSidebarStore((state) => state.reorderFolders);
+  const viewMode = useSidebarStore((state) => state.viewMode);
   const workspaces = useWorkspaceStore.use.workspaces();
   const taskStates = useTaskExecutionStore((state) => state.taskStates);
   const markAsViewed = useTaskViewedStore((state) => state.markAsViewed);
@@ -196,87 +199,104 @@ function SidebarMenuComponent() {
               onClick={handleHomeClick}
             />
 
+            <div className="px-2 py-1">
+              <ViewModeSelector />
+            </div>
+
             <div className="mx-2 my-2 border-gray-6 border-t" />
 
-            <DragDropProvider
-              onDragOver={handleDragOver}
-              sensors={[
-                PointerSensor.configure({
-                  activationConstraints: {
-                    distance: { value: 5 },
-                  },
-                }),
-              ]}
-            >
-              {sidebarData.folders.map((folder, index) => {
-                const isExpanded = !collapsedSections.has(folder.id);
-                return (
-                  <div key={folder.id}>
-                    {index > 0 && (
-                      <div className="mx-2 my-2 border-gray-6 border-t" />
-                    )}
-                    <SortableFolderSection
-                      id={folder.id}
-                      index={index}
-                      label={folder.name}
-                      icon={
-                        isExpanded ? (
-                          <FolderOpenIcon size={14} weight="regular" />
-                        ) : (
-                          <FolderIcon size={14} weight="regular" />
-                        )
-                      }
-                      isExpanded={isExpanded}
-                      onToggle={() => toggleSection(folder.id)}
-                      onSettingsClick={() => handleFolderSettings(folder.id)}
-                      onContextMenu={(e) =>
-                        handleFolderContextMenu(folder.id, e)
-                      }
-                    >
-                      <NewTaskItem
-                        onClick={() => handleFolderNewTask(folder.id)}
-                      />
-                      {folder.tasks.map((task) => (
-                        <TaskItem
-                          key={task.id}
-                          id={task.id}
-                          label={task.title}
-                          isActive={sidebarData.activeTaskId === task.id}
-                          worktreeName={
-                            workspaces[task.id]?.worktreeName ?? undefined
-                          }
-                          worktreePath={
-                            workspaces[task.id]?.worktreePath ??
-                            workspaces[task.id]?.folderPath
-                          }
-                          workspaceMode={taskStates[task.id]?.workspaceMode}
-                          lastActivityAt={task.lastActivityAt}
-                          isGenerating={task.isGenerating}
-                          isUnread={task.isUnread}
-                          isPinned={task.isPinned}
-                          onClick={() => handleTaskClick(task.id)}
-                          onContextMenu={(e) =>
-                            handleTaskContextMenu(task.id, e)
-                          }
-                          onDelete={() => handleTaskDelete(task.id)}
-                          onTogglePin={() => handleTaskTogglePin(task.id)}
+            {viewMode === "history" ? (
+              <HistoryView
+                historyData={sidebarData.historyData}
+                activeTaskId={sidebarData.activeTaskId}
+                onTaskClick={handleTaskClick}
+                onTaskContextMenu={handleTaskContextMenu}
+                onTaskDelete={handleTaskDelete}
+                onTaskTogglePin={handleTaskTogglePin}
+              />
+            ) : (
+              <DragDropProvider
+                onDragOver={handleDragOver}
+                sensors={[
+                  PointerSensor.configure({
+                    activationConstraints: {
+                      distance: { value: 5 },
+                    },
+                  }),
+                ]}
+              >
+                {sidebarData.folders.map((folder, index) => {
+                  const isExpanded = !collapsedSections.has(folder.id);
+                  return (
+                    <div key={folder.id}>
+                      {index > 0 && (
+                        <div className="mx-2 my-2 border-gray-6 border-t" />
+                      )}
+                      <SortableFolderSection
+                        id={folder.id}
+                        index={index}
+                        label={folder.name}
+                        icon={
+                          isExpanded ? (
+                            <FolderOpenIcon size={14} weight="regular" />
+                          ) : (
+                            <FolderIcon size={14} weight="regular" />
+                          )
+                        }
+                        isExpanded={isExpanded}
+                        onToggle={() => toggleSection(folder.id)}
+                        onSettingsClick={() => handleFolderSettings(folder.id)}
+                        onContextMenu={(e) =>
+                          handleFolderContextMenu(folder.id, e)
+                        }
+                      >
+                        <NewTaskItem
+                          onClick={() => handleFolderNewTask(folder.id)}
                         />
-                      ))}
-                    </SortableFolderSection>
-                  </div>
-                );
-              })}
-              <DragOverlay>
-                {(source) =>
-                  source?.type === "folder" ? (
-                    <div className="flex w-full items-center gap-1 rounded bg-gray-2 px-2 py-1 font-mono text-[12px] text-gray-11 shadow-lg">
-                      <FolderIcon size={14} weight="regular" />
-                      <span className="font-medium">{source.data?.label}</span>
+                        {folder.tasks.map((task) => (
+                          <TaskItem
+                            key={task.id}
+                            id={task.id}
+                            label={task.title}
+                            isActive={sidebarData.activeTaskId === task.id}
+                            worktreeName={
+                              workspaces[task.id]?.worktreeName ?? undefined
+                            }
+                            worktreePath={
+                              workspaces[task.id]?.worktreePath ??
+                              workspaces[task.id]?.folderPath
+                            }
+                            workspaceMode={taskStates[task.id]?.workspaceMode}
+                            lastActivityAt={task.lastActivityAt}
+                            isGenerating={task.isGenerating}
+                            isUnread={task.isUnread}
+                            isPinned={task.isPinned}
+                            onClick={() => handleTaskClick(task.id)}
+                            onContextMenu={(e) =>
+                              handleTaskContextMenu(task.id, e)
+                            }
+                            onDelete={() => handleTaskDelete(task.id)}
+                            onTogglePin={() => handleTaskTogglePin(task.id)}
+                          />
+                        ))}
+                      </SortableFolderSection>
                     </div>
-                  ) : null
-                }
-              </DragOverlay>
-            </DragDropProvider>
+                  );
+                })}
+                <DragOverlay>
+                  {(source) =>
+                    source?.type === "folder" ? (
+                      <div className="flex w-full items-center gap-1 rounded bg-gray-2 px-2 py-1 font-mono text-[12px] text-gray-11 shadow-lg">
+                        <FolderIcon size={14} weight="regular" />
+                        <span className="font-medium">
+                          {source.data?.label}
+                        </span>
+                      </div>
+                    ) : null
+                  }
+                </DragOverlay>
+              </DragDropProvider>
+            )}
           </Flex>
         </Box>
         <SidebarFooter />
diff --git a/apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx b/apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx
new file mode 100644
index 000000000..0530a3a7a
--- /dev/null
+++ b/apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx
@@ -0,0 +1,62 @@
+import { ClockCounterClockwise, Folder } from "@phosphor-icons/react";
+import { Select, Text } from "@radix-ui/themes";
+import { type SidebarViewMode, useSidebarStore } from "../stores/sidebarStore";
+
+const VIEW_OPTIONS = [
+  { value: "folders" as const, label: "Repositories", Icon: Folder },
+  { value: "history" as const, label: "History", Icon: ClockCounterClockwise },
+];
+
+export function ViewModeSelector() {
+  const viewMode = useSidebarStore((state) => state.viewMode);
+  const setViewMode = useSidebarStore((state) => state.setViewMode);
+  const resetHistoryVisibleCount = useSidebarStore(
+    (state) => state.resetHistoryVisibleCount,
+  );
+
+  const handleChange = (value: SidebarViewMode) => {
+    if (value === "history") {
+      resetHistoryVisibleCount();
+    }
+    setViewMode(value);
+  };
+
+  const currentOption = VIEW_OPTIONS.find((o) => o.value === viewMode);
+  const CurrentIcon = currentOption?.Icon ?? Folder;
+
+  return (
+    <Select.Root value={viewMode} onValueChange={handleChange} size="1">
+      <Select.Trigger
+        variant="ghost"
+        style={{
+          fontSize: "var(--font-size-1)",
+          color: "var(--gray-11)",
+          padding: "4px 8px",
+          height: "auto",
+          minHeight: "unset",
+          width: "100%",
+        }}
+      >
+        <span className="flex items-center gap-1.5">
+          <CurrentIcon size={12} />
+          <Text size="1" style={{ fontFamily: "var(--font-mono)" }}>
+            {currentOption?.label}
+          </Text>
+        </span>
+      </Select.Trigger>
+      <Select.Content position="popper" sideOffset={4}>
+        {VIEW_OPTIONS.map((option) => {
+          const OptionIcon = option.Icon;
+          return (
+            <Select.Item key={option.value} value={option.value}>
+              <span className="flex items-center gap-1.5">
+                <OptionIcon size={12} />
+                {option.label}
+              </span>
+            </Select.Item>
+          );
+        })}
+      </Select.Content>
+    </Select.Root>
+  );
+}
diff --git a/apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts b/apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts
index 7144b3f38..28d788496 100644
--- a/apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts
+++ b/apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts
@@ -46,6 +46,18 @@ export interface TaskData {
   isPinned?: boolean;
 }
 
+export interface HistoryTaskData extends TaskData {
+  createdAt: number;
+  folderName?: string;
+}
+
+export interface HistoryData {
+  activeTasks: HistoryTaskData[];
+  recentTasks: HistoryTaskData[];
+  totalCount: number;
+  hasMore: boolean;
+}
+
 export interface SidebarData {
   userName: string;
   isHomeActive: boolean;
@@ -56,6 +68,7 @@ export interface SidebarData {
   isLoading: boolean;
   folders: FolderData[];
   activeTaskId: string | null;
+  historyData: HistoryData;
 }
 
 interface ViewState {
@@ -170,6 +183,76 @@ function getActiveRepository(activeFilters: ActiveFilters): string | null {
   return repositoryFilters.length === 1 ? repositoryFilters[0].value : null;
 }
 
+function buildHistoryData(
+  allTasks: Task[],
+  workspaces: Record<string, Workspace>,
+  folders: RegisteredFolder[],
+  sessions: Record<string, AgentSession>,
+  lastViewedAt: Record<string, number>,
+  localActivityAt: Record<string, number>,
+  pinnedTaskIds: Set<string>,
+  activeTaskId: string | null,
+  visibleCount: number,
+): HistoryData {
+  const getSessionForTask = (taskId: string): AgentSession | undefined => {
+    return Object.values(sessions).find((s) => s.taskId === taskId);
+  };
+
+  // Transform all tasks to HistoryTaskData
+  const historyTasks: HistoryTaskData[] = allTasks.map((task) => {
+    const session = getSessionForTask(task.id);
+    const workspace = workspaces[task.id];
+    const folder = workspace
+      ? folders.find((f) => f.id === workspace.folderId)
+      : undefined;
+
+    const apiUpdatedAt = new Date(task.updated_at).getTime();
+    const localActivity = localActivityAt[task.id];
+    const lastActivityAt = localActivity
+      ? Math.max(apiUpdatedAt, localActivity)
+      : apiUpdatedAt;
+
+    const taskLastViewedAt = lastViewedAt[task.id];
+    const isCurrentlyViewing = activeTaskId === task.id;
+    const isUnread =
+      !isCurrentlyViewing &&
+      taskLastViewedAt !== undefined &&
+      lastActivityAt > taskLastViewedAt;
+
+    return {
+      id: task.id,
+      title: task.title,
+      lastActivityAt,
+      createdAt: new Date(task.created_at).getTime(),
+      isGenerating: session?.isPromptPending ?? false,
+      isUnread,
+      isPinned: pinnedTaskIds.has(task.id),
+      folderName: folder?.name,
+    };
+  });
+
+  // Partition into active (unread) and inactive tasks
+  const activeTasks = historyTasks
+    .filter((t) => t.isUnread)
+    .sort((a, b) => (b.lastActivityAt ?? 0) - (a.lastActivityAt ?? 0));
+
+  const inactiveTasks = historyTasks
+    .filter((t) => !t.isUnread)
+    .sort((a, b) => b.createdAt - a.createdAt);
+
+  // Apply pagination to inactive tasks only (active always shown)
+  const totalCount = allTasks.length;
+  const recentTasks = inactiveTasks.slice(0, visibleCount);
+  const hasMore = inactiveTasks.length > visibleCount;
+
+  return {
+    activeTasks,
+    recentTasks,
+    totalCount,
+    hasMore,
+  };
+}
+
 export function useSidebarData({
   activeView,
   activeFilters,
@@ -183,6 +266,9 @@ export function useSidebarData({
   const localActivityAt = useTaskViewedStore((state) => state.lastActivityAt);
   const folderOrder = useSidebarStore((state) => state.folderOrder);
   const syncFolderOrder = useSidebarStore((state) => state.syncFolderOrder);
+  const historyVisibleCount = useSidebarStore(
+    (state) => state.historyVisibleCount,
+  );
   const pinnedTaskIds = usePinnedTasksStore((state) => state.pinnedTaskIds);
 
   const userName = currentUser?.first_name || currentUser?.email || "Account";
@@ -269,6 +355,18 @@ export function useSidebarData({
     };
   });
 
+  const historyData = buildHistoryData(
+    allTasks,
+    workspaces,
+    folders,
+    sessions,
+    lastViewedAt,
+    localActivityAt,
+    pinnedTaskIds,
+    activeTaskId,
+    historyVisibleCount,
+  );
+
   return {
     userName,
     isHomeActive,
@@ -279,5 +377,6 @@ export function useSidebarData({
     isLoading,
     folders: folderData,
     activeTaskId,
+    historyData,
   };
 }
diff --git a/apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts b/apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts
index a6d851789..aa46e7165 100644
--- a/apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts
+++ b/apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts
@@ -1,6 +1,8 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
+export type SidebarViewMode = "folders" | "history";
+
 interface SidebarStoreState {
   open: boolean;
   hasUserSetOpen: boolean;
@@ -8,6 +10,8 @@ interface SidebarStoreState {
   isResizing: boolean;
   collapsedSections: Set<string>;
   folderOrder: string[];
+  viewMode: SidebarViewMode;
+  historyVisibleCount: number;
 }
 
 interface SidebarStoreActions {
@@ -20,6 +24,9 @@ interface SidebarStoreActions {
   reorderFolders: (fromIndex: number, toIndex: number) => void;
   setFolderOrder: (order: string[]) => void;
   syncFolderOrder: (folderIds: string[]) => void;
+  setViewMode: (mode: SidebarViewMode) => void;
+  loadMoreHistory: () => void;
+  resetHistoryVisibleCount: () => void;
 }
 
 type SidebarStore = SidebarStoreState & SidebarStoreActions;
@@ -33,6 +40,8 @@ export const useSidebarStore = create<SidebarStore>()(
       isResizing: false,
       collapsedSections: new Set<string>(),
       folderOrder: [],
+      viewMode: "history" as SidebarViewMode,
+      historyVisibleCount: 25,
       setOpen: (open) => set({ open, hasUserSetOpen: true }),
       setOpenAuto: (open) =>
         set((state) => (state.hasUserSetOpen ? state : { open })),
@@ -74,6 +83,12 @@ export const useSidebarStore = create<SidebarStore>()(
           }
           return state;
         }),
+      setViewMode: (mode) => set({ viewMode: mode }),
+      loadMoreHistory: () =>
+        set((state) => ({
+          historyVisibleCount: state.historyVisibleCount + 25,
+        })),
+      resetHistoryVisibleCount: () => set({ historyVisibleCount: 25 }),
     }),
     {
       name: "sidebar-storage",
@@ -83,6 +98,8 @@ export const useSidebarStore = create<SidebarStore>()(
         width: state.width,
         collapsedSections: Array.from(state.collapsedSections),
         folderOrder: state.folderOrder,
+        viewMode: state.viewMode,
+        historyVisibleCount: state.historyVisibleCount,
       }),
       merge: (persisted, current) => {
         const persistedState = persisted as {
@@ -91,6 +108,8 @@ export const useSidebarStore = create<SidebarStore>()(
           width?: number;
           collapsedSections?: string[];
           folderOrder?: string[];
+          viewMode?: SidebarViewMode;
+          historyVisibleCount?: number;
         };
         return {
           ...current,
@@ -100,6 +119,9 @@ export const useSidebarStore = create<SidebarStore>()(
           width: persistedState.width ?? current.width,
           collapsedSections: new Set(persistedState.collapsedSections ?? []),
           folderOrder: persistedState.folderOrder ?? [],
+          viewMode: persistedState.viewMode ?? current.viewMode,
+          historyVisibleCount:
+            persistedState.historyVisibleCount ?? current.historyVisibleCount,
         };
       },
     },

From a822df8bac681e3bc6bc6d87381a3eb7844bd5f0 Mon Sep 17 00:00:00 2001
From: Peter Kirkham <peter@posthog.com>
Date: Mon, 12 Jan 2026 22:27:19 -0800
Subject: [PATCH 2/2] feat: New pinned sidenav

---
 .../sidebar/components/PinnedView.tsx         | 105 ++++++++++++++++++
 .../sidebar/components/SidebarFooter.tsx      |   4 +-
 .../sidebar/components/SidebarMenu.tsx        |  18 ++-
 .../sidebar/components/ViewModeSelector.tsx   |   5 +-
 .../features/sidebar/hooks/useSidebarData.ts  |  63 +++++++++++
 .../features/sidebar/stores/sidebarStore.ts   |   2 +-
 6 files changed, 190 insertions(+), 7 deletions(-)
 create mode 100644 apps/array/src/renderer/features/sidebar/components/PinnedView.tsx

diff --git a/apps/array/src/renderer/features/sidebar/components/PinnedView.tsx b/apps/array/src/renderer/features/sidebar/components/PinnedView.tsx
new file mode 100644
index 000000000..bc22e7563
--- /dev/null
+++ b/apps/array/src/renderer/features/sidebar/components/PinnedView.tsx
@@ -0,0 +1,105 @@
+import { useTaskExecutionStore } from "@features/task-detail/stores/taskExecutionStore";
+import { PushPin } from "@phosphor-icons/react";
+import { Flex } from "@radix-ui/themes";
+import { useWorkspaceStore } from "@/renderer/features/workspace/stores/workspaceStore";
+import type { PinnedData, TaskData } from "../hooks/useSidebarData";
+import { TaskItem } from "./items/TaskItem";
+
+interface PinnedViewProps {
+  pinnedData: PinnedData;
+  activeTaskId: string | null;
+  onTaskClick: (taskId: string) => void;
+  onTaskContextMenu: (taskId: string, e: React.MouseEvent) => void;
+  onTaskDelete: (taskId: string) => void;
+  onTaskTogglePin: (taskId: string) => void;
+}
+
+function PinnedTaskItem({
+  task,
+  isActive,
+  onClick,
+  onContextMenu,
+  onDelete,
+  onTogglePin,
+}: {
+  task: TaskData;
+  isActive: boolean;
+  onClick: () => void;
+  onContextMenu: (e: React.MouseEvent) => void;
+  onDelete: () => void;
+  onTogglePin: () => void;
+}) {
+  const workspaces = useWorkspaceStore.use.workspaces();
+  const taskStates = useTaskExecutionStore((state) => state.taskStates);
+
+  const workspace = workspaces[task.id];
+  const taskState = taskStates[task.id];
+
+  return (
+    <TaskItem
+      id={task.id}
+      label={task.title}
+      isActive={isActive}
+      worktreeName={workspace?.worktreeName ?? undefined}
+      worktreePath={workspace?.worktreePath ?? workspace?.folderPath}
+      workspaceMode={taskState?.workspaceMode}
+      lastActivityAt={task.lastActivityAt}
+      isGenerating={task.isGenerating}
+      isUnread={task.isUnread}
+      isPinned={task.isPinned}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      onDelete={onDelete}
+      onTogglePin={onTogglePin}
+    />
+  );
+}
+
+export function PinnedView({
+  pinnedData,
+  activeTaskId,
+  onTaskClick,
+  onTaskContextMenu,
+  onTaskDelete,
+  onTaskTogglePin,
+}: PinnedViewProps) {
+  const { tasks } = pinnedData;
+
+  if (tasks.length === 0) {
+    return (
+      <Flex
+        direction="column"
+        align="center"
+        justify="center"
+        gap="2"
+        py="6"
+        className="text-gray-10"
+      >
+        <PushPin size={24} />
+        <span className="text-[12px]">No pinned tasks</span>
+        <span className="px-4 text-center text-[11px] text-gray-9">
+          Pin tasks from any view to quickly access them here
+        </span>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex direction="column">
+      <div className="px-2 py-1 font-medium font-mono text-[10px] text-gray-10 uppercase tracking-wide">
+        Pinned ({tasks.length})
+      </div>
+      {tasks.map((task) => (
+        <PinnedTaskItem
+          key={task.id}
+          task={task}
+          isActive={activeTaskId === task.id}
+          onClick={() => onTaskClick(task.id)}
+          onContextMenu={(e) => onTaskContextMenu(task.id, e)}
+          onDelete={() => onTaskDelete(task.id)}
+          onTogglePin={() => onTaskTogglePin(task.id)}
+        />
+      ))}
+    </Flex>
+  );
+}
diff --git a/apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx b/apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx
index 907df20f7..6e4173168 100644
--- a/apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx
+++ b/apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx
@@ -23,7 +23,7 @@ export function SidebarFooter() {
     navigateToTaskInput();
   }, [navigateToTaskInput]);
 
-  const isHistoryView = viewMode === "history";
+  const showNewTaskButton = viewMode !== "folders";
 
   return (
     <Box
@@ -38,7 +38,7 @@ export function SidebarFooter() {
       }}
     >
       <Flex align="center" gap="2" justify="between">
-        {isHistoryView ? (
+        {showNewTaskButton ? (
           <Button size="1" variant="ghost" color="gray" onClick={handleNewTask}>
             <Plus size={14} weight="bold" />
             New task
diff --git a/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx b/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx
index e655d7d99..5023d1049 100644
--- a/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx
+++ b/apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx
@@ -22,6 +22,7 @@ import { HistoryView } from "./HistoryView";
 import { HomeItem } from "./items/HomeItem";
 import { NewTaskItem } from "./items/NewTaskItem";
 import { TaskItem } from "./items/TaskItem";
+import { PinnedView } from "./PinnedView";
 import { SidebarFooter } from "./SidebarFooter";
 import { SortableFolderSection } from "./SortableFolderSection";
 import { ViewModeSelector } from "./ViewModeSelector";
@@ -205,7 +206,7 @@ function SidebarMenuComponent() {
 
             <div className="mx-2 my-2 border-gray-6 border-t" />
 
-            {viewMode === "history" ? (
+            {viewMode === "history" && (
               <HistoryView
                 historyData={sidebarData.historyData}
                 activeTaskId={sidebarData.activeTaskId}
@@ -214,7 +215,20 @@ function SidebarMenuComponent() {
                 onTaskDelete={handleTaskDelete}
                 onTaskTogglePin={handleTaskTogglePin}
               />
-            ) : (
+            )}
+
+            {viewMode === "pinned" && (
+              <PinnedView
+                pinnedData={sidebarData.pinnedData}
+                activeTaskId={sidebarData.activeTaskId}
+                onTaskClick={handleTaskClick}
+                onTaskContextMenu={handleTaskContextMenu}
+                onTaskDelete={handleTaskDelete}
+                onTaskTogglePin={handleTaskTogglePin}
+              />
+            )}
+
+            {viewMode === "folders" && (
               <DragDropProvider
                 onDragOver={handleDragOver}
                 sensors={[
diff --git a/apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx b/apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx
index 0530a3a7a..46eca5ce1 100644
--- a/apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx
+++ b/apps/array/src/renderer/features/sidebar/components/ViewModeSelector.tsx
@@ -1,10 +1,11 @@
-import { ClockCounterClockwise, Folder } from "@phosphor-icons/react";
+import { ClockCounterClockwise, Folder, PushPin } from "@phosphor-icons/react";
 import { Select, Text } from "@radix-ui/themes";
 import { type SidebarViewMode, useSidebarStore } from "../stores/sidebarStore";
 
 const VIEW_OPTIONS = [
-  { value: "folders" as const, label: "Repositories", Icon: Folder },
   { value: "history" as const, label: "History", Icon: ClockCounterClockwise },
+  { value: "pinned" as const, label: "Pinned", Icon: PushPin },
+  { value: "folders" as const, label: "Repositories", Icon: Folder },
 ];
 
 export function ViewModeSelector() {
diff --git a/apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts b/apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts
index 28d788496..8e3ecd089 100644
--- a/apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts
+++ b/apps/array/src/renderer/features/sidebar/hooks/useSidebarData.ts
@@ -58,6 +58,10 @@ export interface HistoryData {
   hasMore: boolean;
 }
 
+export interface PinnedData {
+  tasks: TaskData[];
+}
+
 export interface SidebarData {
   userName: string;
   isHomeActive: boolean;
@@ -69,6 +73,7 @@ export interface SidebarData {
   folders: FolderData[];
   activeTaskId: string | null;
   historyData: HistoryData;
+  pinnedData: PinnedData;
 }
 
 interface ViewState {
@@ -253,6 +258,54 @@ function buildHistoryData(
   };
 }
 
+function buildPinnedData(
+  allTasks: Task[],
+  sessions: Record<string, AgentSession>,
+  lastViewedAt: Record<string, number>,
+  localActivityAt: Record<string, number>,
+  pinnedTaskIds: Set<string>,
+  activeTaskId: string | null,
+): PinnedData {
+  const getSessionForTask = (taskId: string): AgentSession | undefined => {
+    return Object.values(sessions).find((s) => s.taskId === taskId);
+  };
+
+  // Filter to only pinned tasks
+  const pinnedTasks = allTasks.filter((task) => pinnedTaskIds.has(task.id));
+
+  // Transform to TaskData
+  const tasks: TaskData[] = pinnedTasks.map((task) => {
+    const session = getSessionForTask(task.id);
+
+    const apiUpdatedAt = new Date(task.updated_at).getTime();
+    const localActivity = localActivityAt[task.id];
+    const lastActivityAt = localActivity
+      ? Math.max(apiUpdatedAt, localActivity)
+      : apiUpdatedAt;
+
+    const taskLastViewedAt = lastViewedAt[task.id];
+    const isCurrentlyViewing = activeTaskId === task.id;
+    const isUnread =
+      !isCurrentlyViewing &&
+      taskLastViewedAt !== undefined &&
+      lastActivityAt > taskLastViewedAt;
+
+    return {
+      id: task.id,
+      title: task.title,
+      lastActivityAt,
+      isGenerating: session?.isPromptPending ?? false,
+      isUnread,
+      isPinned: true,
+    };
+  });
+
+  // Sort by activity
+  tasks.sort((a, b) => (b.lastActivityAt ?? 0) - (a.lastActivityAt ?? 0));
+
+  return { tasks };
+}
+
 export function useSidebarData({
   activeView,
   activeFilters,
@@ -367,6 +420,15 @@ export function useSidebarData({
     historyVisibleCount,
   );
 
+  const pinnedData = buildPinnedData(
+    allTasks,
+    sessions,
+    lastViewedAt,
+    localActivityAt,
+    pinnedTaskIds,
+    activeTaskId,
+  );
+
   return {
     userName,
     isHomeActive,
@@ -378,5 +440,6 @@ export function useSidebarData({
     folders: folderData,
     activeTaskId,
     historyData,
+    pinnedData,
   };
 }
diff --git a/apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts b/apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts
index aa46e7165..16a1529dc 100644
--- a/apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts
+++ b/apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts
@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-export type SidebarViewMode = "folders" | "history";
+export type SidebarViewMode = "folders" | "history" | "pinned";
 
 interface SidebarStoreState {
   open: boolean;