feat: improve sidebar menu

2026-01-20 14:04:21 +01:00 · 2025-09-03 03:23:59 +09:00
parent 521a36812b
commit d9a0f17ce7
12 changed files with 774 additions and 268 deletions
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-hover-card": "^1.1.15",
    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
    "@tanstack/react-query": "^5.85.5",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
      '@radix-ui/react-slot':
        specifier: ^1.2.3
        version: 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
      '@tanstack/react-query':
        specifier: ^5.85.5
        version: 5.85.5(react@19.1.1)
@@ -891,6 +894,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-compose-refs@1.1.2':
    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
    peerDependencies:
@@ -922,6 +938,15 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  '@radix-ui/react-dismissable-layer@1.1.11':
    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
    peerDependencies:
@@ -1031,6 +1056,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-slot@1.2.3':
    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
    peerDependencies:
@@ -1040,6 +1078,19 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/react-tabs@1.1.13':
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-use-callback-ref@1.1.1':
    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
    peerDependencies:
@@ -3798,6 +3849,18 @@ snapshots:
      '@types/react': 19.1.12
      '@types/react-dom': 19.1.9(@types/react@19.1.12)

+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.12)(react@19.1.1)':
    dependencies:
      react: 19.1.1
@@ -3832,6 +3895,12 @@ snapshots:
      '@types/react': 19.1.12
      '@types/react-dom': 19.1.9(@types/react@19.1.12)

+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
@@ -3933,6 +4002,23 @@ snapshots:
      '@types/react': 19.1.12
      '@types/react-dom': 19.1.9(@types/react@19.1.12)

+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
  '@radix-ui/react-slot@1.2.3(@types/react@19.1.12)(react@19.1.1)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
@@ -3940,6 +4026,22 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.1.12

+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.12)(react@19.1.1)':
    dependencies:
      react: 19.1.1
--- a/src/app/projects/[projectId]/components/ProjectPage.tsx
+++ b/src/app/projects/[projectId]/components/ProjectPage.tsx
@@ -8,7 +8,8 @@ import {
  PlusIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useId } from "react";
+import { useEffect } from "react";
+import { SettingsControls } from "@/components/SettingsControls";
 import { Button } from "@/components/ui/button";
 import {
  Card,
@@ -17,18 +18,16 @@ import {
  CardHeader,
  CardTitle,
 } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import { configQueryConfig, useConfig } from "../../../hooks/useConfig";
+import { useConfig } from "../../../hooks/useConfig";
 import { projectQueryConfig, useProject } from "../hooks/useProject";
 import { firstCommandToTitle } from "../services/firstCommandToTitle";
 import { NewChatModal } from "./newChat/NewChatModal";

 export const ProjectPageContent = ({ projectId }: { projectId: string }) => {
-  const checkboxId = useId();
  const {
    data: { project, sessions },
  } = useProject(projectId);
-  const { config, updateConfig } = useConfig();
+  const { config } = useConfig();
  const queryClient = useQueryClient();

  // biome-ignore lint/correctness/useExhaustiveDependencies: invalidate when config changed
@@ -38,6 +37,12 @@ export const ProjectPageContent = ({ projectId }: { projectId: string }) => {
    });
  }, [config.hideNoUserMessageSession, config.unifySameTitleSession]);

+  const handleConfigChange = () => {
+    void queryClient.invalidateQueries({
+      queryKey: projectQueryConfig(projectId).queryKey,
+    });
+  };
+
  return (
    <div className="container mx-auto px-4 py-8">
      <header className="mb-8">
@@ -78,57 +83,8 @@ export const ProjectPageContent = ({ projectId }: { projectId: string }) => {
          </h2>

          {/* Filter Controls */}
-          <div className="mb-6 p-4 bg-muted/50 rounded-lg space-y-4">
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id={checkboxId}
-                checked={config?.hideNoUserMessageSession}
-                onCheckedChange={async () => {
-                  updateConfig({
-                    ...config,
-                    hideNoUserMessageSession: !config?.hideNoUserMessageSession,
-                  });
-                  await queryClient.invalidateQueries({
-                    queryKey: configQueryConfig.queryKey,
-                  });
-                }}
-              />
-              <label
-                htmlFor={checkboxId}
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                Hide sessions without user messages
-              </label>
-            </div>
-            <p className="text-xs text-muted-foreground mt-1 ml-6">
-              Only show sessions that contain user commands or messages
-            </p>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id={`${checkboxId}-unify`}
-                checked={config?.unifySameTitleSession}
-                onCheckedChange={async () => {
-                  updateConfig({
-                    ...config,
-                    unifySameTitleSession: !config?.unifySameTitleSession,
-                  });
-                  await queryClient.invalidateQueries({
-                    queryKey: configQueryConfig.queryKey,
-                  });
-                }}
-              />
-              <label
-                htmlFor={`${checkboxId}-unify`}
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                Unify sessions with same title
-              </label>
-            </div>
-            <p className="text-xs text-muted-foreground mt-1 ml-6">
-              Show only the latest session when multiple sessions have the same
-              title
-            </p>
+          <div className="mb-6 p-4 bg-muted/50 rounded-lg">
+            <SettingsControls onConfigChange={handleConfigChange} />
          </div>

          {sessions.length === 0 ? (
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx
@@ -144,6 +144,7 @@ export const SessionPageContent: FC<{
              projectId={projectId}
              sessionId={sessionId}
              isPausedTask={isPausedTask}
+              isRunningTask={isRunningTask}
            />
          </main>
        </div>
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/resumeChat/ResumeChat.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/resumeChat/ResumeChat.tsx
@@ -1,21 +1,9 @@
 import { useMutation } from "@tanstack/react-query";
-import {
-  AlertCircleIcon,
-  LoaderIcon,
-  MessageSquareIcon,
-  SendIcon,
-} from "lucide-react";
+import { AlertCircleIcon, LoaderIcon, SendIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { type FC, useId, useRef, useState } from "react";

 import { Button } from "../../../../../../../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../../../../../../../components/ui/card";
 import { Textarea } from "../../../../../../../components/ui/textarea";
 import { honoClient } from "../../../../../../../lib/api/client";
 import {
@@ -27,7 +15,8 @@ export const ResumeChat: FC<{
  projectId: string;
  sessionId: string;
  isPausedTask: boolean;
-}> = ({ projectId, sessionId, isPausedTask }) => {
+  isRunningTask: boolean;
+}> = ({ projectId, sessionId, isPausedTask, isRunningTask }) => {
  const router = useRouter();
  const textareaRef = useRef<HTMLTextAreaElement>(null);

@@ -84,83 +73,71 @@ export const ResumeChat: FC<{
  };

  return (
-    <Card className="border-t rounded-t-none border-x-0 bg-background/50 backdrop-blur-sm mt-10">
-      <CardHeader className="pb-4">
-        <div className="flex items-center gap-2">
-          <MessageSquareIcon className="w-5 h-5 text-primary" />
-          <CardTitle className="text-lg">Continue Conversation</CardTitle>
+    <div className="border-t border-border/50 bg-muted/20 p-4 mt-6">
+      {resumeChat.error && (
+        <div className="flex items-center gap-2 p-3 mb-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md">
+          <AlertCircleIcon className="w-4 h-4" />
+          <span>Failed to resume chat. Please try again.</span>
        </div>
-        <CardDescription>
-          Start a new conversation based on this session's context
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {resumeChat.error && (
-          <div className="flex items-center gap-2 p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md">
-            <AlertCircleIcon className="w-4 h-4" />
-            <span>Failed to resume chat. Please try again.</span>
-          </div>
-        )}
+      )}

-        <div className="space-y-3">
-          <div className="relative">
-            <Textarea
-              ref={textareaRef}
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Type your message here... (Start with / for commands, Shift+Enter to send)"
-              className="min-h-[80px] resize-none"
-              disabled={resumeChat.isPending}
-              maxLength={4000}
-              aria-label="Message input with command completion"
-              aria-describedby={helpId}
-              aria-expanded={message.startsWith("/")}
-              aria-haspopup="listbox"
-              role="combobox"
-              aria-autocomplete="list"
-            />
-            <CommandCompletion
-              ref={completionRef}
-              projectId={projectId}
-              inputValue={message}
-              onCommandSelect={handleCommandSelect}
-              className="absolute top-full left-0 right-0"
-            />
-          </div>
-
-          <div className="flex items-center justify-between">
-            <span className="text-xs text-muted-foreground" id={helpId}>
-              {message.length}/4000 characters • Use arrow keys to navigate
-              commands
-            </span>
-
-            <Button
-              onClick={handleSubmit}
-              disabled={!message.trim() || resumeChat.isPending}
-              size="lg"
-              className="gap-2"
-            >
-              {resumeChat.isPending ? (
-                <>
-                  <LoaderIcon className="w-4 h-4 animate-spin" />
-                  Starting... This may take a while.
-                </>
-              ) : isPausedTask ? (
-                <>
-                  <SendIcon className="w-4 h-4" />
-                  Send
-                </>
-              ) : (
-                <>
-                  <SendIcon className="w-4 h-4" />
-                  Resume
-                </>
-              )}
-            </Button>
-          </div>
+      <div className="space-y-2">
+        <div className="relative">
+          <Textarea
+            ref={textareaRef}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type your message... (Start with / for commands, Shift+Enter to send)"
+            className="min-h-[60px] resize-none"
+            disabled={resumeChat.isPending}
+            maxLength={4000}
+            aria-label="Message input with command completion"
+            aria-describedby={helpId}
+            aria-expanded={message.startsWith("/")}
+            aria-haspopup="listbox"
+            role="combobox"
+            aria-autocomplete="list"
+          />
+          <CommandCompletion
+            ref={completionRef}
+            projectId={projectId}
+            inputValue={message}
+            onCommandSelect={handleCommandSelect}
+            className="absolute top-full left-0 right-0"
+          />
        </div>
-      </CardContent>
-    </Card>
+
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground" id={helpId}>
+            {message.length}/4000
+          </span>
+
+          <Button
+            onClick={handleSubmit}
+            disabled={!message.trim() || resumeChat.isPending}
+            size="default"
+            className="gap-2"
+          >
+            {resumeChat.isPending ? (
+              <>
+                <LoaderIcon className="w-4 h-4 animate-spin" />
+                Starting... This may take a while.
+              </>
+            ) : isPausedTask || isRunningTask ? (
+              <>
+                <SendIcon className="w-4 h-4" />
+                Send
+              </>
+            ) : (
+              <>
+                <SendIcon className="w-4 h-4" />
+                Resume
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
  );
 };
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx
@@ -1,92 +1,12 @@
 "use client";

-import { MessageSquareIcon, PanelLeftIcon, PlusIcon } from "lucide-react";
-import Link from "next/link";
+import { ListTodoIcon, MessageSquareIcon, SettingsIcon } from "lucide-react";
 import { type FC, useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
 import { cn } from "@/lib/utils";
-import type { Session } from "../../../../../../../server/service/types";
-import { NewChatModal } from "../../../../components/newChat/NewChatModal";
 import { useProject } from "../../../../hooks/useProject";
-import { firstCommandToTitle } from "../../../../services/firstCommandToTitle";
-
-const SidebarContent: FC<{
-  sessions: Session[];
-  currentSessionId: string;
-  projectId: string;
-}> = ({ sessions, currentSessionId, projectId }) => (
-  <div className="h-full flex flex-col bg-sidebar text-sidebar-foreground">
-    <div className="border-b border-sidebar-border p-4">
-      <div className="flex items-center justify-between mb-2">
-        <h2 className="font-semibold text-lg">Sessions</h2>
-        <NewChatModal
-          projectId={projectId}
-          trigger={
-            <Button size="sm" variant="outline" className="gap-1.5 mr-5">
-              <PlusIcon className="w-3.5 h-3.5" />
-              New
-            </Button>
-          }
-        />
-      </div>
-      <p className="text-xs text-sidebar-foreground/70">
-        {sessions.length} total
-      </p>
-    </div>
-
-    <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
-      {sessions.map((session) => {
-        const isActive = session.id === currentSessionId;
-        const title =
-          session.meta.firstCommand !== null
-            ? firstCommandToTitle(session.meta.firstCommand)
-            : session.id;
-
-        return (
-          <Link
-            key={session.id}
-            href={`/projects/${projectId}/sessions/${encodeURIComponent(
-              session.id,
-            )}`}
-            className={cn(
-              "block rounded-lg p-2.5 transition-all duration-200 hover:bg-blue-50/60 hover:border-blue-300/60 hover:shadow-sm border border-sidebar-border/40 bg-sidebar/30",
-              isActive &&
-                "bg-blue-100 border-blue-400 shadow-md ring-1 ring-blue-200/50 hover:bg-blue-100 hover:border-blue-400",
-            )}
-          >
-            <div className="space-y-1.5">
-              <h3 className="text-sm font-medium line-clamp-2 leading-tight text-sidebar-foreground">
-                {title}
-              </h3>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-1 text-xs text-sidebar-foreground/70">
-                  <MessageSquareIcon className="w-3 h-3" />
-                  <span>{session.meta.messageCount}</span>
-                </div>
-                {session.meta.lastModifiedAt && (
-                  <span className="text-xs text-sidebar-foreground/60">
-                    {new Date(session.meta.lastModifiedAt).toLocaleDateString(
-                      "en-US",
-                      {
-                        month: "short",
-                        day: "numeric",
-                      },
-                    )}
-                  </span>
-                )}
-              </div>
-            </div>
-          </Link>
-        );
-      })}
-    </div>
-  </div>
-);
+import { SessionsTab } from "./SessionsTab";
+import { SettingsTab } from "./SettingsTab";
+import { TasksTab } from "./TasksTab";

 export const SessionSidebar: FC<{
  currentSessionId: string;
@@ -96,51 +16,106 @@ export const SessionSidebar: FC<{
  const {
    data: { sessions },
  } = useProject(projectId);
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [activeTab, setActiveTab] = useState<"sessions" | "tasks" | "settings">(
+    "sessions",
+  );
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const handleTabClick = (tab: "sessions" | "tasks" | "settings") => {
+    if (activeTab === tab && isExpanded) {
+      // If clicking the active tab while expanded, collapse
+      setIsExpanded(false);
+    } else {
+      // If clicking a different tab or expanding, show that tab
+      setActiveTab(tab);
+      setIsExpanded(true);
+    }
+  };
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case "sessions":
+        return (
+          <SessionsTab
+            sessions={sessions}
+            currentSessionId={currentSessionId}
+            projectId={projectId}
+          />
+        );
+      case "tasks":
+        return <TasksTab projectId={projectId} />;
+      case "settings":
+        return <SettingsTab />;
+      default:
+        return null;
+    }
+  };

  return (
-    <Collapsible
-      open={!isCollapsed}
-      onOpenChange={(open) => setIsCollapsed(!open)}
-      className={cn("hidden md:flex h-full", className)}
-    >
-      <div className="relative h-full">
-        <div
-          className={cn(
-            "h-full border-r border-sidebar-border transition-all duration-300 ease-in-out",
-            isCollapsed ? "w-12" : "w-72 lg:w-80",
-          )}
-        >
-          <CollapsibleTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute -right-3 top-4 z-10 bg-background border border-sidebar-border shadow-sm"
+    <div className={cn("hidden md:flex h-full", className)}>
+      <div
+        className={cn(
+          "h-full border-r border-sidebar-border transition-all duration-300 ease-in-out flex bg-sidebar text-sidebar-foreground",
+          isExpanded ? "w-72 lg:w-80" : "w-12",
+        )}
+      >
+        {/* Vertical Icon Menu - Always Visible */}
+        <div className="w-12 flex flex-col border-r border-sidebar-border bg-sidebar/50">
+          <div className="flex flex-col p-2 space-y-1">
+            <button
+              type="button"
+              onClick={() => handleTabClick("sessions")}
+              className={cn(
+                "w-8 h-8 flex items-center justify-center rounded-md transition-colors",
+                "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                activeTab === "sessions" && isExpanded
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
+                  : "text-sidebar-foreground/70",
+              )}
+              title="Sessions"
            >
-              <PanelLeftIcon
-                className={cn(
-                  "w-4 h-4 transition-transform duration-200",
-                  isCollapsed && "rotate-180",
-                )}
-              />
-            </Button>
-          </CollapsibleTrigger>
+              <MessageSquareIcon className="w-4 h-4" />
+            </button>

-          <CollapsibleContent className="h-full data-[state=closed]:animate-slide-out-to-left data-[state=open]:animate-slide-in-from-left">
-            <SidebarContent
-              sessions={sessions}
-              currentSessionId={currentSessionId}
-              projectId={projectId}
-            />
-          </CollapsibleContent>
+            <button
+              type="button"
+              onClick={() => handleTabClick("tasks")}
+              className={cn(
+                "w-8 h-8 flex items-center justify-center rounded-md transition-colors",
+                "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                activeTab === "tasks" && isExpanded
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
+                  : "text-sidebar-foreground/70",
+              )}
+              title="Tasks"
+            >
+              <ListTodoIcon className="w-4 h-4" />
+            </button>

-          {isCollapsed && (
-            <div className="h-full bg-sidebar border-r border-sidebar-border flex flex-col items-center pt-16">
-              <MessageSquareIcon className="w-5 h-5 text-sidebar-foreground/70" />
-            </div>
-          )}
+            <button
+              type="button"
+              onClick={() => handleTabClick("settings")}
+              className={cn(
+                "w-8 h-8 flex items-center justify-center rounded-md transition-colors",
+                "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                activeTab === "settings" && isExpanded
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
+                  : "text-sidebar-foreground/70",
+              )}
+              title="Settings"
+            >
+              <SettingsIcon className="w-4 h-4" />
+            </button>
+          </div>
        </div>
+
+        {/* Content Area - Only shown when expanded */}
+        {isExpanded && (
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {renderContent()}
+          </div>
+        )}
      </div>
-    </Collapsible>
+    </div>
  );
 };
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionsTab.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionsTab.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { MessageSquareIcon, PlusIcon } from "lucide-react";
+import Link from "next/link";
+import type { FC } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { Session } from "../../../../../../../server/service/types";
+import { NewChatModal } from "../../../../components/newChat/NewChatModal";
+import { firstCommandToTitle } from "../../../../services/firstCommandToTitle";
+import { aliveTasksAtom } from "../../store/aliveTasksAtom";
+
+export const SessionsTab: FC<{
+  sessions: Session[];
+  currentSessionId: string;
+  projectId: string;
+}> = ({ sessions, currentSessionId, projectId }) => {
+  const aliveTasks = useAtomValue(aliveTasksAtom);
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-sidebar-border p-4">
+        <div className="flex items-center justify-between mb-2">
+          <h2 className="font-semibold text-lg">Sessions</h2>
+          <NewChatModal
+            projectId={projectId}
+            trigger={
+              <Button size="sm" variant="outline" className="gap-1.5">
+                <PlusIcon className="w-3.5 h-3.5" />
+                New
+              </Button>
+            }
+          />
+        </div>
+        <p className="text-xs text-sidebar-foreground/70">
+          {sessions.length} total
+        </p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
+        {sessions.map((session) => {
+          const isActive = session.id === currentSessionId;
+          const title =
+            session.meta.firstCommand !== null
+              ? firstCommandToTitle(session.meta.firstCommand)
+              : session.id;
+
+          const aliveTask = aliveTasks.find(
+            (task) => task.sessionId === session.id,
+          );
+          const isRunning = aliveTask?.status === "running";
+          const isPaused = aliveTask?.status === "paused";
+
+          return (
+            <Link
+              key={session.id}
+              href={`/projects/${projectId}/sessions/${encodeURIComponent(
+                session.id,
+              )}`}
+              className={cn(
+                "block rounded-lg p-2.5 transition-all duration-200 hover:bg-blue-50/60 hover:border-blue-300/60 hover:shadow-sm border border-sidebar-border/40 bg-sidebar/30",
+                isActive &&
+                  "bg-blue-100 border-blue-400 shadow-md ring-1 ring-blue-200/50 hover:bg-blue-100 hover:border-blue-400",
+              )}
+            >
+              <div className="space-y-1.5">
+                <div className="flex items-start justify-between gap-2">
+                  <h3 className="text-sm font-medium line-clamp-2 leading-tight text-sidebar-foreground flex-1">
+                    {title}
+                  </h3>
+                  {(isRunning || isPaused) && (
+                    <Badge
+                      variant={isRunning ? "default" : "secondary"}
+                      className={cn(
+                        "text-xs",
+                        isRunning && "bg-green-500 text-white",
+                        isPaused && "bg-yellow-500 text-white",
+                      )}
+                    >
+                      {isRunning ? "Running" : "Paused"}
+                    </Badge>
+                  )}
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-1 text-xs text-sidebar-foreground/70">
+                    <MessageSquareIcon className="w-3 h-3" />
+                    <span>{session.meta.messageCount}</span>
+                  </div>
+                  {session.meta.lastModifiedAt && (
+                    <span className="text-xs text-sidebar-foreground/60">
+                      {new Date(session.meta.lastModifiedAt).toLocaleDateString(
+                        "en-US",
+                        {
+                          month: "short",
+                          day: "numeric",
+                        },
+                      )}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SettingsTab.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SettingsTab.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import type { FC } from "react";
+import { SettingsControls } from "@/components/SettingsControls";
+
+export const SettingsTab: FC = () => {
+  return (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-sidebar-border p-4">
+        <h2 className="font-semibold text-lg">Settings</h2>
+        <p className="text-xs text-sidebar-foreground/70">
+          Display and behavior preferences
+        </p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-6">
+        {/* Session Display Settings */}
+        <div className="space-y-4">
+          <h3 className="font-medium text-sm text-sidebar-foreground">
+            Session Display
+          </h3>
+
+          <SettingsControls />
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/TaskCard.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/TaskCard.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { PauseIcon, PlayIcon, XIcon } from "lucide-react";
+import Link from "next/link";
+import type { FC } from "react";
+import { Button } from "@/components/ui/button";
+
+type TaskType = {
+  id: string;
+  status: "running" | "paused";
+  sessionId: string;
+  userMessageId: string;
+};
+
+export const TaskCard: FC<{
+  task: TaskType;
+  projectId: string;
+  onAbortTask: (sessionId: string) => void;
+  onCopyTaskId: (taskId: string) => void;
+  isAbortPending: boolean;
+}> = ({ task, projectId, onAbortTask, onCopyTaskId, isAbortPending }) => (
+  <Link
+    href={`/projects/${projectId}/sessions/${encodeURIComponent(task.sessionId)}`}
+    className="block rounded-lg p-3 border border-sidebar-border/40 bg-sidebar/30 hover:bg-sidebar-accent/20 transition-colors space-y-2 group"
+  >
+    <div className="flex items-start justify-between gap-2">
+      <div className="flex items-center gap-2 min-w-0">
+        {task.status === "running" ? (
+          <div className="flex items-center gap-1">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+            <PlayIcon className="w-3 h-3 text-green-600" />
+          </div>
+        ) : (
+          <div className="flex items-center gap-1">
+            <div className="w-2 h-2 bg-orange-500 rounded-full" />
+            <PauseIcon className="w-3 h-3 text-orange-600" />
+          </div>
+        )}
+        <span className="text-xs font-medium text-sidebar-foreground">
+          {task.status.toUpperCase()}
+        </span>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 hover:opacity-100 transition-opacity"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onAbortTask(task.sessionId);
+        }}
+        disabled={isAbortPending}
+        title="Abort task"
+      >
+        <XIcon className="w-3 h-3" />
+      </Button>
+    </div>
+
+    <div className="space-y-1">
+      <div className="text-xs text-sidebar-foreground/70">
+        Task ID:
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onCopyTaskId(task.id);
+          }}
+          className="ml-1 font-mono hover:text-sidebar-foreground transition-colors"
+          title="Click to copy"
+        >
+          {task.id.slice(-8)}
+        </button>
+      </div>
+
+      <div className="text-xs text-sidebar-foreground/70">
+        Session:
+        <span className="ml-1 font-mono text-sidebar-foreground">
+          {task.sessionId.slice(-8)}
+        </span>
+      </div>
+
+      {task.userMessageId && (
+        <div className="text-xs text-sidebar-foreground/70">
+          Message:
+          <span className="ml-1 font-mono">{task.userMessageId.slice(-8)}</span>
+        </div>
+      )}
+    </div>
+  </Link>
+);
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/TasksTab.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/TasksTab.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { ListTodoIcon } from "lucide-react";
+import type { FC } from "react";
+import { honoClient } from "@/lib/api/client";
+import { aliveTasksAtom } from "../../store/aliveTasksAtom";
+import { TaskCard } from "./TaskCard";
+
+export const TasksTab: FC<{ projectId: string }> = ({ projectId }) => {
+  const [aliveTasks] = useAtom(aliveTasksAtom);
+
+  const abortTask = useMutation({
+    mutationFn: async (sessionId: string) => {
+      const response = await honoClient.api.tasks.abort.$post({
+        json: { sessionId },
+      });
+
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+
+      return response.json();
+    },
+  });
+
+  const copyTaskId = (taskId: string) => {
+    navigator.clipboard.writeText(taskId);
+  };
+
+  // Group tasks by status
+  const runningTasks = aliveTasks.filter((task) => task.status === "running");
+  const pausedTasks = aliveTasks.filter((task) => task.status === "paused");
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-sidebar-border p-4">
+        <h2 className="font-semibold text-lg">Alive Sessions</h2>
+        <p className="text-xs text-sidebar-foreground/70">
+          {runningTasks.length} running, {pausedTasks.length} paused
+        </p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-2 space-y-4">
+        {aliveTasks.length === 0 ? (
+          <div className="flex-1 flex items-center justify-center pt-8">
+            <div className="text-center text-sidebar-foreground/60">
+              <ListTodoIcon className="w-8 h-8 mx-auto mb-2 opacity-50" />
+              <p className="text-sm">No alive sessions</p>
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* Running Tasks Section */}
+            {runningTasks.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 px-1">
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                  <h3 className="text-xs font-semibold text-sidebar-foreground uppercase tracking-wide">
+                    Running ({runningTasks.length})
+                  </h3>
+                </div>
+                <div className="space-y-2">
+                  {runningTasks.map((task) => (
+                    <TaskCard
+                      key={task.id}
+                      task={task}
+                      projectId={projectId}
+                      onAbortTask={(sessionId) => abortTask.mutate(sessionId)}
+                      onCopyTaskId={copyTaskId}
+                      isAbortPending={abortTask.isPending}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Paused Tasks Section */}
+            {pausedTasks.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 px-1">
+                  <div className="w-2 h-2 bg-orange-500 rounded-full" />
+                  <h3 className="text-xs font-semibold text-sidebar-foreground uppercase tracking-wide">
+                    Paused ({pausedTasks.length})
+                  </h3>
+                </div>
+                <div className="space-y-2">
+                  {pausedTasks.map((task) => (
+                    <TaskCard
+                      key={task.id}
+                      task={task}
+                      projectId={projectId}
+                      onAbortTask={(sessionId) => abortTask.mutate(sessionId)}
+                      onCopyTaskId={copyTaskId}
+                      isAbortPending={abortTask.isPending}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/src/components/SettingsControls.tsx
+++ b/src/components/SettingsControls.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { type FC, useId } from "react";
+import { configQueryConfig, useConfig } from "@/app/hooks/useConfig";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface SettingsControlsProps {
+  showLabels?: boolean;
+  showDescriptions?: boolean;
+  className?: string;
+  onConfigChange?: () => void;
+}
+
+export const SettingsControls: FC<SettingsControlsProps> = ({
+  showLabels = true,
+  showDescriptions = true,
+  className = "",
+  onConfigChange,
+}: SettingsControlsProps) => {
+  const checkboxId = useId();
+  const { config, updateConfig } = useConfig();
+  const queryClient = useQueryClient();
+
+  const handleHideNoUserMessageChange = async () => {
+    const newConfig = {
+      ...config,
+      hideNoUserMessageSession: !config?.hideNoUserMessageSession,
+    };
+    updateConfig(newConfig);
+    await queryClient.invalidateQueries({
+      queryKey: configQueryConfig.queryKey,
+    });
+    await queryClient.invalidateQueries({
+      queryKey: ["projects"],
+    });
+    onConfigChange?.();
+  };
+
+  const handleUnifySameTitleChange = async () => {
+    const newConfig = {
+      ...config,
+      unifySameTitleSession: !config?.unifySameTitleSession,
+    };
+    updateConfig(newConfig);
+    await queryClient.invalidateQueries({
+      queryKey: configQueryConfig.queryKey,
+    });
+    await queryClient.invalidateQueries({
+      queryKey: ["projects"],
+    });
+    onConfigChange?.();
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id={checkboxId}
+          checked={config?.hideNoUserMessageSession}
+          onCheckedChange={handleHideNoUserMessageChange}
+        />
+        {showLabels && (
+          <label
+            htmlFor={checkboxId}
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            Hide sessions without user messages
+          </label>
+        )}
+      </div>
+      {showDescriptions && (
+        <p className="text-xs text-muted-foreground mt-1 ml-6">
+          Only show sessions that contain user commands or messages
+        </p>
+      )}
+
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id={`${checkboxId}-unify`}
+          checked={config?.unifySameTitleSession}
+          onCheckedChange={handleUnifySameTitleChange}
+        />
+        {showLabels && (
+          <label
+            htmlFor={`${checkboxId}-unify`}
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            Unify sessions with same title
+          </label>
+        )}
+      </div>
+      {showDescriptions && (
+        <p className="text-xs text-muted-foreground mt-1 ml-6">
+          Show only the latest session when multiple sessions have the same
+          title
+        </p>
+      )}
+    </div>
+  );
+};
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,56 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    data-slot="tabs-list"
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground gap-1",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    data-slot="tabs-trigger"
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 gap-2 [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    data-slot="tabs-content"
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };