@mndrk/agx 2.3.3 → 2.4.2

package/cloud-runtime/standalone/apps/local/components/thread/WorkspaceSidebar.tsx

@@ -22,18 +22,23 @@ import {
   MessageSquare,
   TerminalSquare,
   KeyRound,
+  ArrowUpCircle,
 } from "lucide-react";
 import Link from "next/link";
 import type { Thread } from "@/lib/storage";
 import type { Participant } from "@/lib/types";
 import type { ProjectRepo, ProjectWithAgents, ProjectWithRepos, UpdateProjectPayload } from "@/hooks/useProjects";
 import { useInputCapabilities } from "@/hooks/useInputCapabilities";
+import { useUpdateCheck } from "@/hooks/useUpdateCheck";
 import { useFocusManagement } from "@/hooks/useFocusManagement";
 import type { SidebarStageResult } from "@/hooks/useSidebarStage";
 import { agentAvatarUrl, AgentForm, type AgentFormData } from "@/components/chat-ui/ParticipantBar";
 import ProjectModal, { createProjectPayload, useProjectFormState } from "@/components/ProjectModal";
 import { readProjectObjectivesWorkspace } from "@/lib/project-objectives";
-import { LinearIcon } from "@/components/linear/LinearIcon";
+import { TaskTrackingNav } from "@/components/tracking/TaskTrackingNav";
+import { LinearIcon } from "@/lib/tracker/adapters/linear/linear-icon";
+import { useTrackerConnections } from "@/hooks/useTrackerConnections";
+import type { TrackerConnectionEntry } from "@/hooks/useSidebarStage";
 
 interface WorkspaceSidebarProps {
   threads: Thread[];
@@ -67,9 +72,10 @@ interface WorkspaceSidebarProps {
   onUpdateParticipant?: (participant: Participant) => Promise<unknown>;
   onSelectProject?: (projectId: string) => void;
   activeProjectId?: string | null;
-  activeProjectView?: "home" | "objectives" | "teams" | "thread" | "automations" | "linear" | "terminal" | "env-vars" | "folders" | null;
+  activeProjectView?: "home" | "objectives" | "teams" | "thread" | "automations" | "linear" | "tracking" | "terminal" | "env-vars" | "folders" | null;
   onAddTeam?: (projectId: string) => void;
   stageShow?: SidebarStageResult["show"];
+  trackerConnections?: TrackerConnectionEntry[];
 }
 
 function WorkspaceSidebarBrandLogo({ compact = false }: { compact?: boolean }) {
@@ -265,8 +271,10 @@ export function WorkspaceSidebar({
   onWidthChange,
   onAddTeam,
   stageShow: stageShowProp,
+  trackerConnections: trackerConnectionsProp = [],
 }: WorkspaceSidebarProps) {
   const { isTouchLayout, isPhone } = useInputCapabilities();
+  const { updateAvailable } = useUpdateCheck();
   const resizing = useRef(false);
   const lastX = useRef(0);
   const emptyCtaRef = useRef<HTMLButtonElement | null>(null);
@@ -569,9 +577,10 @@ export function WorkspaceSidebar({
   const threadById = new Map(threads.map((thread) => [thread.id, thread]));
   const nonDefaultProjects = projectsProp.filter((project) => !project.is_default);
   const selectedProject = nonDefaultProjects.find((p) => p.id === activeProjectId) ?? nonDefaultProjects[0] ?? null;
+  const { connections: trackerConnections } = useTrackerConnections(selectedProject?.id ?? null);
   const stageShow = stageShowProp ?? {
     home: true, threads: true, terminal: true, objectives: false,
-    objectivesIsNew: false, linear: false, teams: false, folders: false,
+    objectivesIsNew: false, tracking: false, teams: false, folders: false,
     scheduledTasks: false, envVars: false,
   };
 
@@ -761,7 +770,7 @@ export function WorkspaceSidebar({
               </Link>
             </RailTooltip>
 
-            {(stageShow.objectives || stageShow.linear || stageShow.scheduledTasks) && (
+            {(stageShow.objectives || stageShow.tracking || stageShow.scheduledTasks) && (
               <div className="workspace-sidebar__rail-separator" />
             )}
 
@@ -772,10 +781,10 @@ export function WorkspaceSidebar({
                 </Link>
               </RailTooltip>
             )}
-            {stageShow.linear && (
-              <RailTooltip label="Tasks">
-                <Link href={`/projects/${collapsedSlug}/linear`} className={`workspace-sidebar__rail-icon${activeProjectView === "linear" ? " workspace-sidebar__rail-icon--active" : ""}`}>
-                  <LinearIcon size={16} />
+            {stageShow.tracking && (
+              <RailTooltip label="Task Tracking">
+                <Link href={`/projects/${collapsedSlug}/tracking`} className={`workspace-sidebar__rail-icon${(activeProjectView === "linear" || activeProjectView === "tracking") ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                  <LinearIcon className="h-4 w-4" />
                 </Link>
               </RailTooltip>
             )}
@@ -836,7 +845,17 @@ export function WorkspaceSidebar({
           </nav>
         )}
 
-        <div className="mt-auto p-2">
+        <div className="mt-auto p-2 flex flex-col gap-2">
+          {updateAvailable && collapsedSlug && (
+            <RailTooltip label="Update available">
+              <Link
+                href={`/projects/${collapsedSlug}/terminal?cmd=${encodeURIComponent("agx update && agx chat start")}`}
+                className="workspace-sidebar__rail-icon"
+              >
+                <ArrowUpCircle size={16} />
+              </Link>
+            </RailTooltip>
+          )}
           <RailTooltip label="Join Discord">
             <a
               href="https://discord.gg/G9afUYKKY3"
@@ -919,7 +938,10 @@ export function WorkspaceSidebar({
           const isActiveProject = selectedProject.id === activeProjectId;
           const isActiveProjectHome = isActiveProject && activeProjectView === "home";
           const isActiveProjectObjectives = isActiveProject && activeProjectView === "objectives";
-          const isActiveProjectLinear = isActiveProject && activeProjectView === "linear";
+          const isActiveProjectTracking = isActiveProject && (activeProjectView === "linear" || activeProjectView === "tracking");
+          const activeTrackerFromUrl = typeof window !== "undefined"
+            ? window.location.pathname.match(/\/tracking\/([^/]+)/)?.[1] ?? null
+            : null;
           const isActiveProjectAutomations = isActiveProject && activeProjectView === "automations";
           const isActiveProjectTerminal = isActiveProject && activeProjectView === "terminal";
           const isActiveProjectThread = isActiveProject && activeProjectView === "thread" && primaryProjectThreadId === activeThreadId;
@@ -928,7 +950,7 @@ export function WorkspaceSidebar({
           const isActiveProjectEnvVars = isActiveProject && activeProjectView === "env-vars";
           const navActivity = navActivityByProject[selectedProject.id];
 
-          const showWorkGroup = stageShow.objectives || stageShow.linear || stageShow.scheduledTasks;
+          const showWorkGroup = stageShow.objectives || stageShow.scheduledTasks;
           const showSettingsGroup = stageShow.teams || stageShow.folders || stageShow.envVars;
 
           return (
@@ -986,40 +1008,6 @@ export function WorkspaceSidebar({
                         </Link>
                       </div>
                     )}
-                    {stageShow.linear && (
-                      <div className="workspace-sidebar__workspace-item group/linear flex items-center">
-                        <Link
-                          href={`/projects/${selectedProject.slug}/linear`}
-                          onClick={closeTouchDrawer}
-                          className={`workspace-sidebar__nav-item flex-1 ${isActiveProjectLinear ? "workspace-sidebar__nav-item--active" : ""}`}
-                          aria-current={isActiveProjectLinear ? "page" : undefined}
-                        >
-                          <LinearIcon size={14} className="flex-shrink-0 text-[var(--muted-foreground)]" />
-                          <span className="workspace-sidebar__workspace-title text-sm">Tasks</span>
-                          {navActivity?.linear.length > 0 && (
-                            <span className="inline-flex items-center -space-x-1 ml-auto shrink-0">
-                              {navActivity.linear.slice(0, 3).map((dot) => {
-                                const agent = participants.find((p) => p.id === dot.agentId);
-                                return (
-                                  <span key={dot.agentId} className="relative inline-block" title={agent?.name}>
-                                    <img src={agentAvatarUrl(agent?.id ?? dot.agentId, 16, dot.color)} alt={agent?.name ?? ""} className="h-3.5 w-3.5 rounded-full ring-[1.5px] ring-[var(--app-shell-pane)]" />
-                                    <span className="absolute -bottom-px -right-px h-1.5 w-1.5 rounded-full bg-green-500 ring-[1px] ring-[var(--app-shell-pane)]" />
-                                  </span>
-                                );
-                              })}
-                            </span>
-                          )}
-                        </Link>
-                        <Link
-                          href={`/projects/${selectedProject.slug}/linear?settings=true`}
-                          onClick={closeTouchDrawer}
-                          className="flex h-5 w-5 items-center justify-center rounded opacity-0 group-hover/linear:opacity-100 hover:bg-[var(--sidebar-hover)] transition-opacity"
-                          title="Linear settings"
-                        >
-                          <Settings size={11} className="text-[var(--muted-foreground)]" />
-                        </Link>
-                      </div>
-                    )}
                     {stageShow.scheduledTasks && (
                       <div className="workspace-sidebar__workspace-item">
                         <Link
@@ -1037,6 +1025,24 @@ export function WorkspaceSidebar({
                 </div>
               )}
 
+              {/* Task Tracking — own section */}
+              {stageShow.tracking && (
+                <div className="mb-3">
+                  <div className="workspace-sidebar__section-header">
+                    <p className="workspace-sidebar__section-label">Task Tracking</p>
+                  </div>
+                  <div className="px-2 flex flex-col gap-0.5">
+                    <TaskTrackingNav
+                      projectSlug={selectedProject.slug}
+                      trackerConnections={trackerConnectionsProp}
+                      activeTrackerType={activeTrackerFromUrl}
+                      isTrackingActive={isActiveProjectTracking}
+                      onLinkClick={closeTouchDrawer}
+                    />
+                  </div>
+                </div>
+              )}
+
               {/* Tools group — always visible */}
               <div className="mb-3">
                 <div className="workspace-sidebar__section-header">
@@ -1141,7 +1147,16 @@ export function WorkspaceSidebar({
 
       </div>
 
-      <div className="mt-auto px-3 pb-3">
+      <div className="mt-auto px-3 pb-3 flex flex-col gap-2">
+        {updateAvailable && selectedProject && (
+          <Link
+            href={`/projects/${selectedProject.slug}/terminal?cmd=${encodeURIComponent("agx update && agx chat start")}`}
+            className="flex items-center justify-center gap-2 w-full py-2 rounded-lg text-sm font-medium transition-colors text-[var(--foreground)] bg-[var(--app-shell-subtle)] hover:bg-[var(--app-shell-border)]"
+          >
+            <ArrowUpCircle size={14} />
+            Update available
+          </Link>
+        )}
         <a
           href="https://discord.gg/G9afUYKKY3"
           target="_blank"

package/cloud-runtime/standalone/apps/local/components/tracker/FolderRow.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import React, { useState, useCallback, useRef } from "react";
+import { ChevronDown, ChevronRight, FolderOpen, Folder, X, StickyNote } from "lucide-react";
+import { useDroppable } from "@dnd-kit/core";
+import { NoteSticker } from "@/components/tracker/NoteSticker";
+
+interface FolderRowProps {
+  groupId: string;
+  name: string;
+  count: number;
+  collapsed: boolean;
+  selected: boolean;
+  onToggleCollapse: () => void;
+  onSelect: () => void;
+  onUngroup?: () => void;
+  projectSlug?: string;
+}
+
+export function FolderRow({
+  groupId,
+  name,
+  count,
+  collapsed,
+  selected,
+  onToggleCollapse,
+  onSelect,
+  onUngroup,
+  projectSlug,
+}: FolderRowProps) {
+  const { setNodeRef, isOver } = useDroppable({ id: groupId });
+
+  const noteButtonRef = useRef<HTMLButtonElement>(null);
+  const [noteOpen, setNoteOpen] = useState(false);
+  const [noteContent, setNoteContent] = useState("");
+  const [noteLoaded, setNoteLoaded] = useState(false);
+  const [hasNote, setHasNote] = useState(false);
+
+  const loadNote = useCallback(async () => {
+    if (!projectSlug || noteLoaded) return;
+    try {
+      const res = await fetch(
+        `/api/tracker/notes?projectSlug=${encodeURIComponent(projectSlug)}&id=${encodeURIComponent(groupId)}&type=group`
+      );
+      const data = await res.json() as { content: string | null };
+      const content = data.content ?? "";
+      setNoteContent(content);
+      setHasNote(content.trim() !== "");
+      setNoteLoaded(true);
+    } catch {
+      setNoteLoaded(true);
+    }
+  }, [projectSlug, groupId, noteLoaded]);
+
+  const saveNote = useCallback(async (content: string) => {
+    if (!projectSlug) return;
+    setHasNote(content.trim() !== "");
+    try {
+      await fetch("/api/tracker/notes", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectSlug, id: groupId, type: "group", content }),
+      });
+    } catch {
+      // Silent fail
+    }
+  }, [projectSlug, groupId]);
+
+  const handleNoteClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!noteOpen) {
+      void loadNote();
+    }
+    setNoteOpen((prev) => !prev);
+  }, [noteOpen, loadNote]);
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`group relative flex cursor-pointer items-center gap-2 pl-[24px] pr-4 py-2 text-sm transition-colors ${
+        selected
+          ? "bg-[var(--card-bg)]"
+          : "hover:bg-[var(--card-bg)]/50"
+      } ${isOver ? "bg-[var(--primary)]/10 border-l-2 border-l-[var(--primary)]" : ""}`}
+      onClick={onSelect}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      }}
+    >
+      {selected && (
+        <div className="absolute left-0 top-0 bottom-0 w-[3px] rounded-r-full bg-blue-500" />
+      )}
+      <button
+        type="button"
+        className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleCollapse();
+        }}
+        aria-label={collapsed ? "Expand folder" : "Collapse folder"}
+      >
+        {collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
+      </button>
+      <span className="shrink-0 text-[var(--muted-foreground)]">
+        {collapsed ? <Folder size={14} /> : <FolderOpen size={14} />}
+      </span>
+      <span className={`min-w-0 flex-1 truncate text-xs font-medium ${selected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]"}`}>
+        {name}
+      </span>
+      <span className="shrink-0 rounded-full bg-[var(--secondary)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--muted-foreground)]">
+        {count}
+      </span>
+      {projectSlug && (
+        <>
+          <button
+            ref={noteButtonRef}
+            type="button"
+            className={`flex h-5 w-5 shrink-0 items-center justify-center rounded transition-all hover:bg-zinc-700 ${
+              hasNote
+                ? "text-amber-400 opacity-100"
+                : "text-[var(--muted-foreground)] opacity-0 group-hover:opacity-100"
+            }`}
+            onClick={handleNoteClick}
+            title={hasNote ? "Edit group note" : "Add group note"}
+            aria-label={hasNote ? "Edit group note" : "Add group note"}
+          >
+            <StickyNote size={12} className={hasNote ? "fill-current" : ""} />
+          </button>
+          {noteOpen && (
+            <NoteSticker
+              anchorRef={noteButtonRef}
+              value={noteContent}
+              onChange={setNoteContent}
+              onClose={() => setNoteOpen(false)}
+              onSave={saveNote}
+            />
+          )}
+        </>
+      )}
+      {onUngroup && (
+        <button
+          type="button"
+          className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[var(--muted-foreground)] opacity-0 group-hover:opacity-100 hover:text-red-400 transition-all"
+          onClick={(e) => {
+            e.stopPropagation();
+            onUngroup();
+          }}
+          title="Ungroup tickets"
+          aria-label="Ungroup tickets"
+        >
+          <X size={12} />
+        </button>
+      )}
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/tracker/GroupNamePrompt.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { ChevronDown, FolderOpen } from "lucide-react";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+
+interface PendingTicket {
+  id: string;
+  identifier: string;
+  title: string;
+  status?: string;
+}
+
+interface GroupNamePromptProps {
+  tickets: PendingTicket[];
+  onConfirm: (name: string) => void;
+  onCancel: () => void;
+}
+
+export const PENDING_GROUP_DROP_ID = "__pending-group__";
+
+function DraggableTicketRow({ ticket, isLast }: { ticket: PendingTicket; isLast: boolean }) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: ticket.id,
+  });
+  const style = transform
+    ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, opacity: isDragging ? 0.3 : 1, position: "relative" as const, zIndex: isDragging ? 50 : undefined }
+    : undefined;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className="flex items-center gap-3 pl-[48px] pr-4 py-2 text-sm cursor-grab active:cursor-grabbing"
+    >
+      <span className="shrink-0 font-mono text-[11px] leading-none text-[var(--muted-foreground)]/40 select-none">
+        {isLast ? "└──" : "├──"}
+      </span>
+      <span className="shrink-0 whitespace-nowrap font-mono text-xs text-[var(--muted-foreground)]">
+        {ticket.identifier}
+      </span>
+      <span className="min-w-0 flex-1 truncate text-xs text-[var(--muted-foreground)]">
+        {ticket.title}
+      </span>
+      {ticket.status && (
+        <span className="shrink-0 text-xs text-[var(--muted-foreground)]">
+          {ticket.status}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function GroupNamePrompt({ tickets, onConfirm, onCancel }: GroupNamePromptProps) {
+  const [name, setName] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { setNodeRef, isOver } = useDroppable({ id: PENDING_GROUP_DROP_ID });
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = name.trim();
+    const fallback = tickets.map((t) => t.identifier).join(", ");
+    onConfirm(trimmed || fallback || "Untitled");
+  }, [name, onConfirm, tickets]);
+
+  return (
+    <div ref={setNodeRef} className={`mx-0 my-0 transition-colors ${isOver ? "bg-[var(--primary)]/5" : ""}`}>
+      {/* Folder header with inline name input */}
+      <div className="flex items-center gap-2 pl-[24px] pr-4 py-2 bg-[var(--card-bg)]/50">
+        <ChevronDown size={14} className="shrink-0 text-[var(--muted-foreground)]" />
+        <FolderOpen size={14} className="shrink-0 text-[var(--muted-foreground)]" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleSubmit();
+            if (e.key === "Escape") onCancel();
+          }}
+          placeholder={tickets.map((t) => t.identifier).join(", ") || "Name this group..."}
+          className="min-w-0 flex-1 bg-transparent text-xs font-medium text-[var(--foreground)] placeholder:text-[var(--muted-foreground)]/60 outline-none border-b border-[var(--primary)]/40 pb-0.5 focus:border-[var(--primary)]"
+        />
+        <button
+          type="button"
+          className="rounded px-2 py-0.5 text-[10px] font-medium bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90 transition-opacity"
+          onClick={handleSubmit}
+        >
+          Create
+        </button>
+        <button
+          type="button"
+          className="rounded px-2 py-0.5 text-[10px] font-medium text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+          onClick={onCancel}
+        >
+          Cancel
+        </button>
+      </div>
+      {/* Tree preview of grouped tickets — each row is draggable out */}
+      {tickets.map((ticket, idx) => (
+        <DraggableTicketRow key={ticket.id} ticket={ticket} isLast={idx === tickets.length - 1} />
+      ))}
+    </div>
+  );
+}