From c5ba0285fa381150c2feee7c50d19b0c14b6ef6d Mon Sep 17 00:00:00 2001
From: Artur Pokusin <gh@pokusin.com>
Date: Wed, 23 Jul 2025 15:24:47 -0700
Subject: [PATCH 1/2] feat: add dedicated file tab

---
 .../components/data-sources/LocalFilesTab.tsx |  2 +-
 .../data-sources/files/FileBrowser.tsx        | 15 +++++++++++
 app/src/renderer/src/routeTree.gen.ts         | 26 +++++++++++++++++++
 app/src/renderer/src/routes/files/index.tsx   | 10 +++++++
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 app/src/renderer/src/components/data-sources/files/FileBrowser.tsx
 create mode 100644 app/src/renderer/src/routes/files/index.tsx

diff --git a/app/src/renderer/src/components/data-sources/LocalFilesTab.tsx b/app/src/renderer/src/components/data-sources/LocalFilesTab.tsx
index 744177b65..809b8ae1e 100644
--- a/app/src/renderer/src/components/data-sources/LocalFilesTab.tsx
+++ b/app/src/renderer/src/components/data-sources/LocalFilesTab.tsx
@@ -87,7 +87,7 @@ export default function LocalFilesTab() {
   }, [])
 
   return (
-    <div className="flex flex-col h-full gap-10">
+    <div className="flex flex-col h-full gap-10 w-full">
       <h2 className="text-2xl font-semibold">Files</h2>
       <div
         className={cn(
diff --git a/app/src/renderer/src/components/data-sources/files/FileBrowser.tsx b/app/src/renderer/src/components/data-sources/files/FileBrowser.tsx
new file mode 100644
index 000000000..d23c7c7ea
--- /dev/null
+++ b/app/src/renderer/src/components/data-sources/files/FileBrowser.tsx
@@ -0,0 +1,15 @@
+import LocalFilesTab from '@renderer/components/data-sources/LocalFilesTab'
+import LocalFolderSync from '@renderer/components/data-sources/LocalFolderSync'
+import { ScrollArea } from '@renderer/components/ui/scroll-area'
+
+// dual pane interface?
+export function FileBrowser() {
+  return (
+    <ScrollArea className="flex flex-col h-full w-full">
+      <div className="flex flex-col w-full h-full gap-10 max-w-4xl mx-auto justify-center p-6">
+        <LocalFilesTab />
+        <LocalFolderSync />
+      </div>
+    </ScrollArea>
+  )
+}
diff --git a/app/src/renderer/src/routeTree.gen.ts b/app/src/renderer/src/routeTree.gen.ts
index 40229017a..d2d006fd8 100644
--- a/app/src/renderer/src/routeTree.gen.ts
+++ b/app/src/renderer/src/routeTree.gen.ts
@@ -17,6 +17,7 @@ import { Route as OnboardingImport } from './routes/onboarding'
 import { Route as AdminImport } from './routes/admin'
 import { Route as IndexImport } from './routes/index'
 import { Route as HolonIndexImport } from './routes/holon/index'
+import { Route as FilesIndexImport } from './routes/files/index'
 import { Route as SettingsPermissionsImport } from './routes/settings.permissions'
 import { Route as SettingsDataSourcesImport } from './routes/settings.data-sources'
 import { Route as SettingsCustomizeImport } from './routes/settings.customize'
@@ -63,6 +64,12 @@ const HolonIndexRoute = HolonIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const FilesIndexRoute = FilesIndexImport.update({
+  id: '/files/',
+  path: '/files/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const SettingsPermissionsRoute = SettingsPermissionsImport.update({
   id: '/permissions',
   path: '/permissions',
@@ -193,6 +200,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsPermissionsImport
       parentRoute: typeof SettingsImport
     }
+    '/files/': {
+      id: '/files/'
+      path: '/files'
+      fullPath: '/files'
+      preLoaderRoute: typeof FilesIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/holon/': {
       id: '/holon/'
       path: '/holon'
@@ -238,6 +252,7 @@ export interface FileRoutesByFullPath {
   '/settings/customize': typeof SettingsCustomizeRoute
   '/settings/data-sources': typeof SettingsDataSourcesRoute
   '/settings/permissions': typeof SettingsPermissionsRoute
+  '/files': typeof FilesIndexRoute
   '/holon': typeof HolonIndexRoute
 }
 
@@ -254,6 +269,7 @@ export interface FileRoutesByTo {
   '/settings/customize': typeof SettingsCustomizeRoute
   '/settings/data-sources': typeof SettingsDataSourcesRoute
   '/settings/permissions': typeof SettingsPermissionsRoute
+  '/files': typeof FilesIndexRoute
   '/holon': typeof HolonIndexRoute
 }
 
@@ -271,6 +287,7 @@ export interface FileRoutesById {
   '/settings/customize': typeof SettingsCustomizeRoute
   '/settings/data-sources': typeof SettingsDataSourcesRoute
   '/settings/permissions': typeof SettingsPermissionsRoute
+  '/files/': typeof FilesIndexRoute
   '/holon/': typeof HolonIndexRoute
 }
 
@@ -289,6 +306,7 @@ export interface FileRouteTypes {
     | '/settings/customize'
     | '/settings/data-sources'
     | '/settings/permissions'
+    | '/files'
     | '/holon'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -304,6 +322,7 @@ export interface FileRouteTypes {
     | '/settings/customize'
     | '/settings/data-sources'
     | '/settings/permissions'
+    | '/files'
     | '/holon'
   id:
     | '__root__'
@@ -319,6 +338,7 @@ export interface FileRouteTypes {
     | '/settings/customize'
     | '/settings/data-sources'
     | '/settings/permissions'
+    | '/files/'
     | '/holon/'
   fileRoutesById: FileRoutesById
 }
@@ -331,6 +351,7 @@ export interface RootRouteChildren {
   TasksRoute: typeof TasksRoute
   ChatChatIdRoute: typeof ChatChatIdRoute
   HolonThreadIdRoute: typeof HolonThreadIdRoute
+  FilesIndexRoute: typeof FilesIndexRoute
   HolonIndexRoute: typeof HolonIndexRoute
 }
 
@@ -342,6 +363,7 @@ const rootRouteChildren: RootRouteChildren = {
   TasksRoute: TasksRoute,
   ChatChatIdRoute: ChatChatIdRoute,
   HolonThreadIdRoute: HolonThreadIdRoute,
+  FilesIndexRoute: FilesIndexRoute,
   HolonIndexRoute: HolonIndexRoute,
 }
 
@@ -362,6 +384,7 @@ export const routeTree = rootRoute
         "/tasks",
         "/chat/$chatId",
         "/holon/$threadId",
+        "/files/",
         "/holon/"
       ]
     },
@@ -413,6 +436,9 @@ export const routeTree = rootRoute
       "filePath": "settings.permissions.tsx",
       "parent": "/settings"
     },
+    "/files/": {
+      "filePath": "files/index.tsx"
+    },
     "/holon/": {
       "filePath": "holon/index.tsx"
     }
diff --git a/app/src/renderer/src/routes/files/index.tsx b/app/src/renderer/src/routes/files/index.tsx
new file mode 100644
index 000000000..c5f58937c
--- /dev/null
+++ b/app/src/renderer/src/routes/files/index.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { FileBrowser } from '@renderer/components/data-sources/files/FileBrowser'
+
+export const Route = createFileRoute('/files/')({
+  component: RouteComponent
+})
+
+function RouteComponent() {
+  return <FileBrowser />
+}

From 7d5c6f47b7cb9b76ac0a3d883bc606323054ce20 Mon Sep 17 00:00:00 2001
From: Artur Pokusin <gh@pokusin.com>
Date: Wed, 23 Jul 2025 15:27:41 -0700
Subject: [PATCH 2/2] feat: add FolderIcon and Files button to Sidebar
 component

---
 .../renderer/src/components/chat/Sidebar.tsx  | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/app/src/renderer/src/components/chat/Sidebar.tsx b/app/src/renderer/src/components/chat/Sidebar.tsx
index bd0055c78..e73a3412b 100644
--- a/app/src/renderer/src/components/chat/Sidebar.tsx
+++ b/app/src/renderer/src/components/chat/Sidebar.tsx
@@ -28,7 +28,8 @@ import {
   ChevronDown,
   ChevronUp,
   Globe,
-  AlarmCheckIcon
+  AlarmCheckIcon,
+  FolderIcon
 } from 'lucide-react'
 import { useMutation } from '@apollo/client'
 import { client } from '@renderer/graphql/lib'
@@ -342,6 +343,39 @@ export function Sidebar({ chats, setSidebarOpen, shortcuts, collapsed = false }:
             </Tooltip>
           </TooltipProvider>
 
+          <TooltipProvider>
+            <Tooltip delayDuration={collapsed ? 300 : 1000}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  data-active={location.pathname === '/files'}
+                  className={cn(
+                    'group h-9 transition-all',
+                    collapsed
+                      ? 'w-10 p-0 justify-center text-foreground hover:bg-accent [&[data-active=true]]:text-foreground [&[data-active=true]]:bg-accent'
+                      : 'w-full justify-start px-2 text-sidebar-foreground hover:text-sidebar-accent-foreground [&[data-active=true]]:text-sidebar-accent-foreground [&[data-active=true]]:bg-sidebar-accent'
+                  )}
+                  onClick={() => navigate({ to: '/files' })}
+                >
+                  <FolderIcon
+                    className={cn(
+                      'w-4 h-4 transition-colors duration-100',
+                      collapsed
+                        ? 'w-5 h-5 text-foreground/60 group-hover:text-foreground'
+                        : 'text-sidebar-foreground/60 group-hover:text-sidebar-foreground'
+                    )}
+                  />
+                  {!collapsed && <span className="text-sm">Files</span>}
+                </Button>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right" align="center">
+                  <span>Tasks</span>
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
+
           <TooltipProvider>
             <Tooltip delayDuration={collapsed ? 300 : 1000}>
               <TooltipTrigger asChild>