@mndrk/agx 2.1.0 → 2.2.0

package/cloud-runtime/standalone/apps/local/components/linear/LinearWorkerConfig.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import { ChevronDown, ChevronRight, Pause, Play, RefreshCw } from "lucide-react";
+import { ChevronDown, ChevronRight, Play, RefreshCw } from "lucide-react";
 import { ScheduleConditionPicker, SimpleDropdown } from "@/components/scheduling/ScheduleConditionPicker";
 import {
   LINEAR_WORKER_DEFAULT_PROMPT,
@@ -21,6 +21,7 @@ interface TeamOption {
 
 interface LinearWorkerConfigProps {
   projectId?: string;
+  onJobLoaded?: (jobId: string | null) => void;
 }
 
 function formatNextRun(
@@ -87,6 +88,7 @@ function CollapsibleSection({
 
 export default function LinearWorkerConfig({
   projectId,
+  onJobLoaded,
 }: LinearWorkerConfigProps) {
   const [job, setJob] = useState<PromptJob | null>(null);
   const [teams, setTeams] = useState<TeamOption[]>([]);
@@ -120,13 +122,16 @@ export default function LinearWorkerConfig({
         setCadence(data.job.cronExpr || data.job.cadence || "*/30 * * * *");
         setCondition(data.job.condition || "");
         setTeamId(data.job.teamId || "");
+        onJobLoaded?.(data.job.id);
+      } else {
+        onJobLoaded?.(null);
       }
     } catch {
       // ignore
     } finally {
       setLoading(false);
     }
-  }, [projectId]);
+  }, [projectId, onJobLoaded]);
 
   const fetchTeams = useCallback(async () => {
     if (!projectId) return;
@@ -216,6 +221,26 @@ export default function LinearWorkerConfig({
     }
   }, [job, projectId, handleSave]);
 
+  const [runningNow, setRunningNow] = useState(false);
+
+  const handleRunNow = useCallback(async () => {
+    if (!job) return;
+    setRunningNow(true);
+    try {
+      await fetch("/api/prompt-jobs/poll", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ jobId: job.id }),
+      });
+      // Refresh status after triggering
+      setTimeout(fetchWorker, 1000);
+    } catch {
+      // ignore
+    } finally {
+      setRunningNow(false);
+    }
+  }, [job, fetchWorker]);
+
   if (loading) {
     return (
       <div className="flex items-center gap-2 py-12 justify-center text-sm text-[var(--muted-foreground)]">
@@ -234,15 +259,6 @@ export default function LinearWorkerConfig({
         <div className="flex items-center gap-4 text-xs text-[var(--muted-foreground)]">
           {job && (
             <>
-              <span
-                className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${
-                  isActive
-                    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
-                    : "border-yellow-500/30 bg-yellow-500/10 text-yellow-400"
-                }`}
-              >
-                {job.state}
-              </span>
               <span>
                 Next: <span className="text-[var(--foreground)]">{formatNextRun(job.nextRunAt, job.state)}</span>
               </span>
@@ -260,26 +276,45 @@ export default function LinearWorkerConfig({
             </>
           )}
         </div>
-        <button
-          type="button"
-          disabled={saving}
-          onClick={handleToggle}
-          className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
-            isActive
-              ? "border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
-              : "border-emerald-500/30 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20"
-          }`}
-        >
-          {isActive ? (
-            <>
-              <Pause size={12} /> Pause
-            </>
-          ) : (
-            <>
-              <Play size={12} /> {job ? "Resume" : "Enable"}
-            </>
+        <div className="flex items-center gap-3">
+          {/* Run Now button */}
+          {job && (
+            <button
+              type="button"
+              disabled={runningNow || saving}
+              onClick={handleRunNow}
+              className="flex items-center gap-1.5 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-1.5 text-xs font-medium text-blue-400 transition-colors hover:bg-blue-500/20 disabled:opacity-40"
+            >
+              {runningNow ? (
+                <RefreshCw size={12} className="animate-spin" />
+              ) : (
+                <Play size={12} />
+              )}
+              Run now
+            </button>
           )}
-        </button>
+          {/* Enable / Disable toggle */}
+          <button
+            type="button"
+            disabled={saving}
+            onClick={handleToggle}
+            className="relative flex items-center gap-2.5 rounded-lg border border-[var(--card-border)] bg-[var(--muted)] px-3 py-1.5 text-xs font-medium text-[var(--foreground)] transition-colors hover:border-[var(--muted-foreground)]"
+          >
+            {/* Toggle track */}
+            <span
+              className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors ${
+                isActive ? "bg-emerald-500" : "bg-[var(--card-border)]"
+              }`}
+            >
+              <span
+                className={`inline-block h-3 w-3 rounded-full bg-white transition-transform ${
+                  isActive ? "translate-x-3.5" : "translate-x-0.5"
+                }`}
+              />
+            </span>
+            {isActive ? "Enabled" : "Disabled"}
+          </button>
+        </div>
       </div>
 
       {/* Main layout: Left (prompts) | Right (config) */}

package/cloud-runtime/standalone/apps/local/components/linear/LinearWorkerRunLog.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { RefreshCw, CheckCircle2, XCircle, Clock, Loader2, Ban } from "lucide-react";
+import type { PromptRun } from "@/src/prompt-scheduler/types";
+
+interface LinearWorkerRunLogProps {
+  jobId: string | null;
+}
+
+function StatusIcon({ status }: { status: PromptRun["status"] }) {
+  switch (status) {
+    case "success":
+      return <CheckCircle2 size={14} className="text-emerald-400" />;
+    case "failed":
+      return <XCircle size={14} className="text-red-400" />;
+    case "running":
+      return <Loader2 size={14} className="text-blue-400 animate-spin" />;
+    case "queued":
+      return <Clock size={14} className="text-yellow-400" />;
+    case "cancelled":
+      return <Ban size={14} className="text-[var(--muted-foreground)]" />;
+    default:
+      return <Clock size={14} className="text-[var(--muted-foreground)]" />;
+  }
+}
+
+function statusLabel(status: PromptRun["status"]): string {
+  return status.charAt(0).toUpperCase() + status.slice(1);
+}
+
+function statusColor(status: PromptRun["status"]): string {
+  switch (status) {
+    case "success":
+      return "text-emerald-400";
+    case "failed":
+      return "text-red-400";
+    case "running":
+      return "text-blue-400";
+    case "queued":
+      return "text-yellow-400";
+    case "cancelled":
+      return "text-[var(--muted-foreground)]";
+    default:
+      return "text-[var(--muted-foreground)]";
+  }
+}
+
+function formatDuration(ms: number | null): string {
+  if (ms === null) return "—";
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 3_600_000) return `${Math.round(ms / 60_000)}m ${Math.round((ms % 60_000) / 1000)}s`;
+  return `${Math.round(ms / 3_600_000)}h ${Math.round((ms % 3_600_000) / 60_000)}m`;
+}
+
+function formatTime(iso: string | null): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  return d.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+export default function LinearWorkerRunLog({ jobId }: LinearWorkerRunLogProps) {
+  const [runs, setRuns] = useState<PromptRun[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const initialFetch = useRef(false);
+
+  const fetchRuns = useCallback(async () => {
+    if (!jobId) {
+      setLoading(false);
+      return;
+    }
+    try {
+      const res = await fetch(`/api/prompt-jobs/${jobId}/runs`);
+      if (!res.ok) return;
+      const data = await res.json();
+      setRuns(data.runs ?? []);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [jobId]);
+
+  useEffect(() => {
+    if (!initialFetch.current) {
+      initialFetch.current = true;
+      fetchRuns();
+    }
+  }, [fetchRuns]);
+
+  // Poll for updates
+  useEffect(() => {
+    const interval = setInterval(fetchRuns, 10_000);
+    return () => clearInterval(interval);
+  }, [fetchRuns]);
+
+  if (!jobId) {
+    return (
+      <div className="flex items-center justify-center py-16 text-sm text-[var(--muted-foreground)]">
+        No worker configured yet. Enable the worker to see run history.
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 py-12 justify-center text-sm text-[var(--muted-foreground)]">
+        <RefreshCw size={14} className="animate-spin" />
+        Loading run history...
+      </div>
+    );
+  }
+
+  if (runs.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-16 text-sm text-[var(--muted-foreground)]">
+        No runs yet. The worker will log runs here once it starts executing.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      {/* Header */}
+      <div className="grid grid-cols-[minmax(0,1fr)_100px_140px_140px_90px] gap-3 px-4 py-2 text-[10px] font-semibold text-[var(--muted-foreground)] uppercase tracking-widest border-b border-[var(--card-border)]">
+        <span>Status</span>
+        <span>Duration</span>
+        <span>Started</span>
+        <span>Finished</span>
+        <span>Run ID</span>
+      </div>
+
+      {/* Rows */}
+      <div className="max-h-[60vh] overflow-y-auto">
+        {runs.map((run) => (
+          <div key={run.id}>
+            <button
+              type="button"
+              onClick={() => setExpandedId(expandedId === run.id ? null : run.id)}
+              className="grid w-full grid-cols-[minmax(0,1fr)_100px_140px_140px_90px] gap-3 px-4 py-2.5 text-left text-sm transition-colors hover:bg-[var(--card-bg)] rounded-lg"
+            >
+              <span className={`flex items-center gap-2 font-medium ${statusColor(run.status)}`}>
+                <StatusIcon status={run.status} />
+                {statusLabel(run.status)}
+              </span>
+              <span className="text-[var(--muted-foreground)]">
+                {formatDuration(run.durationMs)}
+              </span>
+              <span className="text-[var(--muted-foreground)]">
+                {formatTime(run.startedAt)}
+              </span>
+              <span className="text-[var(--muted-foreground)]">
+                {formatTime(run.finishedAt)}
+              </span>
+              <span className="text-[var(--muted-foreground)] font-mono text-xs truncate">
+                {run.id.slice(0, 8)}
+              </span>
+            </button>
+
+            {/* Expanded detail */}
+            {expandedId === run.id && (run.output || run.error) && (
+              <div className="mx-4 mb-2 rounded-lg border border-[var(--card-border)] bg-[var(--muted)] overflow-hidden">
+                {run.error && (
+                  <div className="px-4 py-3 border-b border-[var(--card-border)]">
+                    <div className="text-[10px] font-semibold text-red-400 uppercase tracking-widest mb-1">Error</div>
+                    <pre className="text-xs text-red-300 whitespace-pre-wrap font-mono">{run.error}</pre>
+                  </div>
+                )}
+                {run.output && (
+                  <div className="px-4 py-3">
+                    <div className="text-[10px] font-semibold text-[var(--muted-foreground)] uppercase tracking-widest mb-1">Output</div>
+                    <pre className="text-xs text-[var(--foreground)] whitespace-pre-wrap font-mono max-h-[300px] overflow-y-auto">{run.output}</pre>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/projects/ObjectiveScheduledTasksPanel.tsx

@@ -577,41 +577,45 @@ export function ObjectiveScheduledTasksPanel({
                 const isFailed = run.status === "failed";
                 const isRunning = run.status === "running";
                 return (
-                  <div
-                    key={run.id}
-                    className="flex items-center gap-3 py-2 px-2 rounded-md text-xs"
-                  >
-                    <span
-                      className={`flex size-5 shrink-0 items-center justify-center rounded-full border ${
-                        isSuccess
-                          ? "border-emerald-500/40 text-emerald-400"
-                          : isFailed
-                            ? "border-[var(--status-failed-border)] text-[var(--destructive)]"
-                            : isRunning
-                              ? "border-sky-500/40 text-sky-400"
-                              : "border-[var(--border)] text-[var(--muted-foreground)]"
-                      }`}
-                    >
-                      {isSuccess ? (
-                        <Check className="h-3 w-3" />
-                      ) : isFailed ? (
-                        <XCircle className="h-3 w-3" />
-                      ) : (
-                        <span className={`block size-1.5 rounded-full ${isRunning ? "bg-sky-400 animate-pulse" : "bg-current"}`} />
-                      )}
-                    </span>
-                    <span className="truncate text-[var(--muted-foreground)]">
-                      {run.jobName}
-                    </span>
-                    <span className="ml-auto shrink-0 text-[11px] text-[var(--muted-foreground)]">
-                      {formatDateTime(ts)}
-                    </span>
-                    {run.durationMs != null && (
-                      <span className="shrink-0 font-mono text-[11px] text-[var(--muted-foreground)]">
-                        {run.durationMs < 1000
-                          ? `${run.durationMs}ms`
-                          : `${Math.round(run.durationMs / 1000)}s`}
+                  <div key={run.id} className="py-2 px-2 rounded-md text-xs">
+                    <div className="flex items-center gap-3">
+                      <span
+                        className={`flex size-5 shrink-0 items-center justify-center rounded-full border ${
+                          isSuccess
+                            ? "border-emerald-500/40 text-emerald-400"
+                            : isFailed
+                              ? "border-[var(--status-failed-border)] text-[var(--destructive)]"
+                              : isRunning
+                                ? "border-sky-500/40 text-sky-400"
+                                : "border-[var(--border)] text-[var(--muted-foreground)]"
+                        }`}
+                      >
+                        {isSuccess ? (
+                          <Check className="h-3 w-3" />
+                        ) : isFailed ? (
+                          <XCircle className="h-3 w-3" />
+                        ) : (
+                          <span className={`block size-1.5 rounded-full ${isRunning ? "bg-sky-400 animate-pulse" : "bg-current"}`} />
+                        )}
                       </span>
+                      <span className="truncate text-[var(--muted-foreground)]">
+                        {run.jobName}
+                      </span>
+                      <span className="ml-auto shrink-0 text-[11px] text-[var(--muted-foreground)]">
+                        {formatDateTime(ts)}
+                      </span>
+                      {run.durationMs != null && (
+                        <span className="shrink-0 font-mono text-[11px] text-[var(--muted-foreground)]">
+                          {run.durationMs < 1000
+                            ? `${run.durationMs}ms`
+                            : `${Math.round(run.durationMs / 1000)}s`}
+                        </span>
+                      )}
+                    </div>
+                    {isFailed && run.error && (
+                      <p className="mt-1 ml-8 text-[11px] leading-snug text-[var(--destructive)] opacity-80 line-clamp-2">
+                        {run.error}
+                      </p>
                     )}
                   </div>
                 );

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

@@ -87,6 +87,35 @@ function WorkspaceSidebarBrandLogo({ compact = false }: { compact?: boolean }) {
   );
 }
 
+function RailTooltip({ label, children }: { label: string; children: React.ReactElement }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  const show = () => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setPos({ top: rect.top + rect.height / 2, left: rect.right + 8 });
+  };
+  const hide = () => setPos(null);
+
+  return (
+    <div ref={ref} onMouseEnter={show} onMouseLeave={hide} style={{ display: "contents" }}>
+      {children}
+      {pos &&
+        createPortal(
+          <div
+            className="workspace-sidebar__rail-tooltip"
+            style={{ top: pos.top, left: pos.left, transform: "translateY(-50%)" }}
+          >
+            {label}
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}
+
 function ProjectDropdown({
   projects,
   activeProjectId,
@@ -127,7 +156,7 @@ function ProjectDropdown({
   }, [open]);
 
   return (
-    <div className="px-3 pt-3 pb-2" ref={dropdownRef}>
+    <div className="relative px-3 pt-3 pb-2" ref={dropdownRef}>
       <button
         type="button"
         onClick={() => setOpen(!open)}
@@ -139,7 +168,7 @@ function ProjectDropdown({
       </button>
 
       {open && (
-        <div className="mt-1 rounded-lg border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] shadow-lg overflow-hidden">
+        <div className="absolute left-3 right-3 z-50 mt-1 rounded-lg border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] shadow-lg overflow-hidden">
           <div className="p-2 border-b border-[var(--app-shell-border)]">
             <div className="flex items-center gap-2 rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] px-2 py-1.5">
               <Search size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
@@ -695,6 +724,9 @@ export function WorkspaceSidebar({
       return null;
     }
 
+    const collapsedProject = nonDefaultProjects.find((p) => p.id === activeProjectId) ?? nonDefaultProjects[0];
+    const collapsedSlug = collapsedProject?.slug;
+
     return (
       <aside
         id="workspace-sidebar"
@@ -712,21 +744,90 @@ export function WorkspaceSidebar({
             <WorkspaceSidebarBrandLogo compact />
           </button>
         </div>
+
+        {collapsedSlug && (
+          <nav className="workspace-sidebar__collapsed-rail">
+            <RailTooltip label="Home">
+              <Link href={`/projects/${collapsedSlug}`} className={`workspace-sidebar__rail-icon${activeProjectView === "home" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <Home size={16} />
+              </Link>
+            </RailTooltip>
+
+            <div className="workspace-sidebar__rail-separator" />
+
+            <RailTooltip label="Objectives">
+              <Link href={`/projects/${collapsedSlug}/objectives`} className={`workspace-sidebar__rail-icon${activeProjectView === "objectives" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <Target size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Linear">
+              <Link href={`/projects/${collapsedSlug}/linear`} className={`workspace-sidebar__rail-icon${activeProjectView === "linear" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <LinearIcon size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Scheduled Tasks">
+              <Link href={`/projects/${collapsedSlug}/automations`} className={`workspace-sidebar__rail-icon${activeProjectView === "automations" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <Zap size={16} />
+              </Link>
+            </RailTooltip>
+
+            <div className="workspace-sidebar__rail-separator" />
+
+            <RailTooltip label="Terminal">
+              <Link href={`/projects/${collapsedSlug}/terminal`} className={`workspace-sidebar__rail-icon${activeProjectView === "terminal" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <TerminalSquare size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Chat">
+              <button
+                type="button"
+                className={`workspace-sidebar__rail-icon${activeProjectView === "thread" ? " workspace-sidebar__rail-icon--active" : ""}`}
+                onClick={() => {
+                  const projectThreads = sortedWorkspaces.filter((t) => collapsedProject.thread_ids?.includes(t.id));
+                  const threadId = collapsedProject.thread_ids?.find((id) => threads.some((t) => t.id === id)) ?? projectThreads[0]?.id;
+                  if (threadId) onSelectThread(threadId);
+                }}
+              >
+                <MessageSquare size={16} />
+              </button>
+            </RailTooltip>
+
+            <div className="workspace-sidebar__rail-separator" />
+
+            <RailTooltip label="Teams">
+              <Link href={`/projects/${collapsedSlug}/teams`} className={`workspace-sidebar__rail-icon${activeProjectView === "teams" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <Users size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Folders">
+              <Link href={`/projects/${collapsedSlug}/folders`} className={`workspace-sidebar__rail-icon${activeProjectView === "folders" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <FolderGit2 size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Env Variables">
+              <Link href={`/projects/${collapsedSlug}/env-vars`} className={`workspace-sidebar__rail-icon${activeProjectView === "env-vars" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <KeyRound size={16} />
+              </Link>
+            </RailTooltip>
+          </nav>
+        )}
+
         <div className="mt-auto p-2">
-          <a
-            href="https://discord.gg/G9afUYKKY3"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center justify-center w-8 h-8 rounded-lg text-white transition-colors"
-            style={{ backgroundColor: '#5865F2' }}
-            onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#4752C4')}
-            onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#5865F2')}
-            title="Join Discord"
-          >
-            <svg width="14" height="14" viewBox="0 0 71 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-              <path d="M60.1 4.9A58.5 58.5 0 0045.4.2a.2.2 0 00-.2.1 40.8 40.8 0 00-1.8 3.7 54 54 0 00-16.2 0A37.4 37.4 0 0025.4.3a.2.2 0 00-.2-.1A58.4 58.4 0 0010.5 4.9a.2.2 0 00-.1.1C1.5 18.7-.9 32.2.3 45.5v.1a58.8 58.8 0 0017.7 9a.2.2 0 00.3-.1 42 42 0 003.6-5.9.2.2 0 00-.1-.3 38.8 38.8 0 01-5.5-2.6.2.2 0 01 0-.4l1.1-.9a.2.2 0 01.2 0 42 42 0 0035.6 0 .2.2 0 01.2 0l1.1.9a.2.2 0 010 .4 36.4 36.4 0 01-5.5 2.6.2.2 0 00-.1.3 47.2 47.2 0 003.6 5.9.2.2 0 00.3.1 58.6 58.6 0 0017.7-9v-.1c1.4-15.2-2.4-28.4-10-40.1a.2.2 0 00-.1-.1zM23.7 37.3c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7zm23.3 0c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7z"/>
-            </svg>
-          </a>
+          <RailTooltip label="Join Discord">
+            <a
+              href="https://discord.gg/G9afUYKKY3"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="workspace-sidebar__rail-icon"
+              style={{ backgroundColor: '#5865F2', color: 'white' }}
+              onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#4752C4')}
+              onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#5865F2')}
+            >
+              <svg width="14" height="14" viewBox="0 0 71 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M60.1 4.9A58.5 58.5 0 0045.4.2a.2.2 0 00-.2.1 40.8 40.8 0 00-1.8 3.7 54 54 0 00-16.2 0A37.4 37.4 0 0025.4.3a.2.2 0 00-.2-.1A58.4 58.4 0 0010.5 4.9a.2.2 0 00-.1.1C1.5 18.7-.9 32.2.3 45.5v.1a58.8 58.8 0 0017.7 9a.2.2 0 00.3-.1 42 42 0 003.6-5.9.2.2 0 00-.1-.3 38.8 38.8 0 01-5.5-2.6.2.2 0 01 0-.4l1.1-.9a.2.2 0 01.2 0 42 42 0 0035.6 0 .2.2 0 01.2 0l1.1.9a.2.2 0 010 .4 36.4 36.4 0 01-5.5 2.6.2.2 0 00-.1.3 47.2 47.2 0 003.6 5.9.2.2 0 00.3.1 58.6 58.6 0 0017.7-9v-.1c1.4-15.2-2.4-28.4-10-40.1a.2.2 0 00-.1-.1zM23.7 37.3c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7zm23.3 0c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7z"/>
+              </svg>
+            </a>
+          </RailTooltip>
         </div>
       </aside>
     );
@@ -807,7 +908,7 @@ export function WorkspaceSidebar({
           return (
             <nav className="workspace-sidebar__section">
               {/* Home (standalone) */}
-              <div className="px-2 mb-3">
+              <div className="px-2 mt-2 mb-3">
                 <div className="workspace-sidebar__workspace-item">
                     <Link
                       href={`/projects/${selectedProject.slug}`}