feat: remove alive sessoins tab

src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { ListTodoIcon, MessageSquareIcon, SettingsIcon } from "lucide-react";
+import { MessageSquareIcon, SettingsIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 import { useProject } from "../../../../hooks/useProject";
 import { SessionsTab } from "./SessionsTab";
 import { SettingsTab } from "./SettingsTab";
-import { TasksTab } from "./TasksTab";
 
 export const SessionSidebar: FC<{
   currentSessionId: string;
@@ -25,12 +24,12 @@ export const SessionSidebar: FC<{
   const {
     data: { sessions },
   } = useProject(projectId);
-  const [activeTab, setActiveTab] = useState<"sessions" | "tasks" | "settings">(
+  const [activeTab, setActiveTab] = useState<"sessions" | "settings">(
     "sessions",
   );
   const [isExpanded, setIsExpanded] = useState(true);
 
-  const handleTabClick = (tab: "sessions" | "tasks" | "settings") => {
+  const handleTabClick = (tab: "sessions" | "settings") => {
     if (activeTab === tab && isExpanded) {
       // If clicking the active tab while expanded, collapse
       setIsExpanded(false);
@@ -51,8 +50,6 @@ export const SessionSidebar: FC<{
             projectId={projectId}
           />
         );
-      case "tasks":
-        return <TasksTab projectId={projectId} />;
       case "settings":
         return <SettingsTab />;
       default:
@@ -85,21 +82,6 @@ export const SessionSidebar: FC<{
             <MessageSquareIcon className="w-4 h-4" />
           </button>
 
-          <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>
-
           <button
             type="button"
             onClick={() => handleTabClick("settings")}

src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionsTab.tsx

@@ -19,6 +19,39 @@ export const SessionsTab: FC<{
 }> = ({ sessions, currentSessionId, projectId }) => {
   const aliveTasks = useAtomValue(aliveTasksAtom);
 
+  // Sort sessions: Running > Paused > Others, then by lastModifiedAt (newest first)
+  const sortedSessions = [...sessions].sort((a, b) => {
+    const aTask = aliveTasks.find((task) => task.sessionId === a.id);
+    const bTask = aliveTasks.find((task) => task.sessionId === b.id);
+
+    const aStatus = aTask?.status;
+    const bStatus = bTask?.status;
+
+    // Define priority: running = 0, paused = 1, others = 2
+    const getPriority = (status: string | undefined) => {
+      if (status === "running") return 0;
+      if (status === "paused") return 1;
+      return 2;
+    };
+
+    const aPriority = getPriority(aStatus);
+    const bPriority = getPriority(bStatus);
+
+    // First sort by priority
+    if (aPriority !== bPriority) {
+      return aPriority - bPriority;
+    }
+
+    // Then sort by lastModifiedAt (newest first)
+    const aTime = a.meta.lastModifiedAt
+      ? new Date(a.meta.lastModifiedAt).getTime()
+      : 0;
+    const bTime = b.meta.lastModifiedAt
+      ? new Date(b.meta.lastModifiedAt).getTime()
+      : 0;
+    return bTime - aTime;
+  });
+
   return (
     <div className="h-full flex flex-col">
       <div className="border-b border-sidebar-border p-4">
@@ -40,7 +73,7 @@ export const SessionsTab: FC<{
       </div>
 
       <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
-        {sessions.map((session) => {
+        {sortedSessions.map((session) => {
           const isActive = session.id === currentSessionId;
           const title =
             session.meta.firstCommand !== null

src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/TaskCard.tsx

@@ -1,92 +0,0 @@
-"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>
-);

src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/TasksTab.tsx

@@ -1,107 +0,0 @@
-"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>
-  );
-};