@mndrk/agx 2.0.56 → 2.2.0

package/cloud-runtime/standalone/apps/local/components/setup/TeamsStep.tsx

@@ -1,18 +1,60 @@
 // components/setup/TeamsStep.tsx
 "use client";
 
-import { useState, useCallback } from "react";
-import { Check, ChevronDown, Users, X } from "lucide-react";
+import { useState, useCallback, useRef, useEffect } from "react";
+import { Check, ChevronDown, ChevronRight, Users, X } from "lucide-react";
 import { listTeamTemplates, getTemplateVariant, type TeamTemplate, type TeamTemplateVariant, type TeamTemplateId, type AgentPreset } from "@/lib/team-catalog";
+import { useProviders } from "@/hooks/useProviders";
 import { SetupLayout } from "./SetupLayout";
 
+export interface AgentOverride {
+  agentId: string;
+  provider?: string;
+  model?: string;
+}
+
 export interface SelectedTeam {
   templateId: TeamTemplateId;
   variantId?: string;
   name: string;
   agents: AgentPreset[];
+  provider?: string;
+  model?: string;
+  agentOverrides?: AgentOverride[];
 }
 
+/** Well-known models per provider for the combobox suggestions. */
+const MODEL_SUGGESTIONS: Record<string, string[]> = {
+  claude: [
+    "claude-opus-4-20250514",
+    "claude-sonnet-4-20250514",
+    "claude-haiku-4-20250514",
+  ],
+  codex: [
+    "o4-mini",
+    "o3",
+    "gpt-4.1",
+    "gpt-4.1-mini",
+    "gpt-4.1-nano",
+  ],
+  gemini: [
+    "gemini-2.5-pro",
+    "gemini-2.5-flash",
+    "gemini-2.0-flash",
+  ],
+  ollama: [
+    "qwen3:8b",
+    "devstral",
+    "qwen2.5-coder:14b",
+    "llama3.3:70b",
+    "deepseek-coder-v2:16b",
+  ],
+  zai: [
+    "claude-opus-4-20250514",
+    "claude-sonnet-4-20250514",
+  ],
+};
+
 interface TeamsStepProps {
   selectedTeams: SelectedTeam[];
   onChange: (teams: SelectedTeam[]) => void;
@@ -27,20 +69,195 @@ const STYLE_COLORS: Record<string, string> = {
   analytical: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300",
 };
 
-function AgentPreview({ agent }: { agent: AgentPreset }) {
-  const styleClass = STYLE_COLORS[agent.style] ?? STYLE_COLORS.balanced;
+/** Searchable combobox: text input with dropdown suggestions, allows custom values. */
+function ModelCombobox({
+  value,
+  onChange,
+  suggestions,
+  placeholder = "Model name...",
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  suggestions: string[];
+  placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const filtered = suggestions.filter((s) =>
+    s.toLowerCase().includes((filter || value).toLowerCase())
+  );
+
   return (
-    <div className="flex items-center gap-2 py-1.5">
-      <div className="w-7 h-7 rounded-full bg-[var(--secondary)] flex items-center justify-center text-[12px] font-semibold text-[var(--foreground)]">
-        {agent.name.charAt(0)}
+    <div ref={wrapperRef} className="relative flex-1">
+      <input
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => {
+          onChange(e.target.value);
+          setFilter(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        className="w-full h-8 px-2.5 text-[12px] rounded-md border border-[var(--card-border)] bg-[var(--background)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:outline-none focus:border-[var(--foreground)]/40 transition-colors"
+      />
+      {open && filtered.length > 0 && (
+        <div className="absolute z-50 top-full left-0 right-0 mt-1 max-h-[160px] overflow-y-auto rounded-md border border-[var(--card-border)] bg-[var(--background)] shadow-lg">
+          {filtered.map((s) => (
+            <button
+              key={s}
+              type="button"
+              onClick={() => {
+                onChange(s);
+                setFilter("");
+                setOpen(false);
+              }}
+              className={`w-full text-left px-2.5 py-1.5 text-[12px] transition-colors hover:bg-[var(--secondary)] ${
+                s === value ? "text-[var(--foreground)] font-medium" : "text-[var(--muted-foreground)]"
+              }`}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Provider dropdown + model combobox, compact layout. */
+function ProviderModelSelector({
+  provider,
+  model,
+  onProviderChange,
+  onModelChange,
+  providers,
+  label,
+}: {
+  provider: string;
+  model: string;
+  onProviderChange: (v: string) => void;
+  onModelChange: (v: string) => void;
+  providers: { id: string; label: string }[];
+  label?: string;
+}) {
+  const suggestions = MODEL_SUGGESTIONS[provider] ?? [];
+
+  return (
+    <div className="space-y-1.5">
+      {label && (
+        <span className="text-[11px] font-medium text-[var(--muted-foreground)] uppercase tracking-wide">{label}</span>
+      )}
+      <div className="flex items-center gap-2">
+        <select
+          value={provider}
+          onChange={(e) => {
+            onProviderChange(e.target.value);
+            // Clear model when provider changes
+            onModelChange("");
+          }}
+          className="h-8 px-2 text-[12px] rounded-md border border-[var(--card-border)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:border-[var(--foreground)]/40 transition-colors appearance-none cursor-pointer pr-6"
+          style={{ backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 6px center" }}
+        >
+          <option value="">Provider...</option>
+          {providers.map((p) => (
+            <option key={p.id} value={p.id}>{p.label}</option>
+          ))}
+        </select>
+        <ModelCombobox
+          value={model}
+          onChange={onModelChange}
+          suggestions={suggestions}
+          placeholder={provider ? "Select or type model..." : "Select a provider first"}
+        />
       </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-[13px] font-medium text-[var(--foreground)]">{agent.name}</span>
-          <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${styleClass}`}>{agent.style}</span>
+    </div>
+  );
+}
+
+function AgentPreview({
+  agent,
+  override,
+  teamProvider,
+  teamModel,
+  providers,
+  onOverrideChange,
+}: {
+  agent: AgentPreset;
+  override?: AgentOverride;
+  teamProvider?: string;
+  teamModel?: string;
+  providers: { id: string; label: string }[];
+  onOverrideChange: (agentId: string, override: AgentOverride | undefined) => void;
+}) {
+  const styleClass = STYLE_COLORS[agent.style] ?? STYLE_COLORS.balanced;
+  const hasOverride = override && (override.provider || override.model);
+  const [showOverride, setShowOverride] = useState(!!hasOverride);
+  const effectiveProvider = override?.provider || teamProvider || "";
+  const effectiveModel = override?.model || teamModel || "";
+
+  return (
+    <div className="py-1.5">
+      <div className="flex items-center gap-2">
+        <div className="w-7 h-7 rounded-full bg-[var(--secondary)] flex items-center justify-center text-[12px] font-semibold text-[var(--foreground)]">
+          {agent.name.charAt(0)}
         </div>
-        <p className="text-[11px] text-[var(--muted-foreground)] truncate">{agent.title}</p>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-[13px] font-medium text-[var(--foreground)]">{agent.name}</span>
+            <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${styleClass}`}>{agent.style}</span>
+            {hasOverride && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300">custom</span>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            <p className="text-[11px] text-[var(--muted-foreground)] truncate">{agent.title}</p>
+            {(teamProvider || teamModel) && !hasOverride && effectiveModel && (
+              <span className="text-[10px] text-[var(--muted-foreground)] opacity-60 shrink-0">
+                ({effectiveModel})
+              </span>
+            )}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            if (showOverride) {
+              onOverrideChange(agent.id, undefined);
+              setShowOverride(false);
+            } else {
+              setShowOverride(true);
+            }
+          }}
+          className="p-1 rounded hover:bg-[var(--background)] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+          title={showOverride ? "Remove override" : "Override provider/model"}
+        >
+          <ChevronRight className={`w-3 h-3 transition-transform ${showOverride ? "rotate-90" : ""}`} />
+        </button>
       </div>
+      {showOverride && (
+        <div className="mt-1.5 ml-9">
+          <ProviderModelSelector
+            provider={override?.provider || ""}
+            model={override?.model || ""}
+            onProviderChange={(p) => onOverrideChange(agent.id, { agentId: agent.id, provider: p || undefined, model: override?.model })}
+            onModelChange={(m) => onOverrideChange(agent.id, { agentId: agent.id, provider: override?.provider, model: m || undefined })}
+            providers={providers}
+          />
+        </div>
+      )}
     </div>
   );
 }
@@ -86,6 +303,7 @@ function TemplateCard({
 
 export function TeamsStep({ selectedTeams, onChange, onNext, onBack }: TeamsStepProps) {
   const templates = listTeamTemplates();
+  const { providers } = useProviders();
   const [expandedTemplate, setExpandedTemplate] = useState<TeamTemplateId | null>(null);
   const [selectedVariant, setSelectedVariant] = useState<Record<string, string>>({});
 
@@ -138,10 +356,42 @@ export function TeamsStep({ selectedTeams, onChange, onNext, onBack }: TeamsStep
     [selectedTeams, onChange]
   );
 
+  const handleTeamProviderChange = useCallback(
+    (templateId: TeamTemplateId, provider: string) => {
+      onChange(selectedTeams.map((t) =>
+        t.templateId === templateId ? { ...t, provider: provider || undefined } : t
+      ));
+    },
+    [selectedTeams, onChange]
+  );
+
+  const handleTeamModelChange = useCallback(
+    (templateId: TeamTemplateId, model: string) => {
+      onChange(selectedTeams.map((t) =>
+        t.templateId === templateId ? { ...t, model: model || undefined } : t
+      ));
+    },
+    [selectedTeams, onChange]
+  );
+
+  const handleAgentOverrideChange = useCallback(
+    (templateId: TeamTemplateId, agentId: string, override: AgentOverride | undefined) => {
+      onChange(selectedTeams.map((t) => {
+        if (t.templateId !== templateId) return t;
+        const overrides = (t.agentOverrides ?? []).filter((o) => o.agentId !== agentId);
+        if (override && (override.provider || override.model)) {
+          overrides.push(override);
+        }
+        return { ...t, agentOverrides: overrides.length > 0 ? overrides : undefined };
+      }));
+    },
+    [selectedTeams, onChange]
+  );
+
   return (
     <SetupLayout
-      currentStep={3}
-      totalSteps={3}
+      currentStep={4}
+      totalSteps={4}
       footer={
         <div className="flex items-center justify-between">
           <button type="button" onClick={onBack} className="text-[14px] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors">
@@ -179,8 +429,31 @@ export function TeamsStep({ selectedTeams, onChange, onNext, onBack }: TeamsStep
                   <X className="w-3.5 h-3.5" />
                 </button>
               </div>
+
+              {/* Team-level provider/model selector */}
+              <div className="pl-6 mb-2">
+                <ProviderModelSelector
+                  provider={team.provider || ""}
+                  model={team.model || ""}
+                  onProviderChange={(p) => handleTeamProviderChange(team.templateId, p)}
+                  onModelChange={(m) => handleTeamModelChange(team.templateId, m)}
+                  providers={providers}
+                  label="Default provider & model"
+                />
+              </div>
+
               <div className="pl-6 space-y-0.5">
-                {team.agents.map((agent) => <AgentPreview key={agent.id} agent={agent} />)}
+                {team.agents.map((agent) => (
+                  <AgentPreview
+                    key={agent.id}
+                    agent={agent}
+                    override={team.agentOverrides?.find((o) => o.agentId === agent.id)}
+                    teamProvider={team.provider}
+                    teamModel={team.model}
+                    providers={providers}
+                    onOverrideChange={(agentId, override) => handleAgentOverrideChange(team.templateId, agentId, override)}
+                  />
+                ))}
               </div>
             </div>
           ))}

package/cloud-runtime/standalone/apps/local/components/terminal/ProjectTerminal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { useParams } from "next/navigation";
 import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { useTerminalTabsStore } from "@/state/terminalTabs";
 import { useUrlSelection } from "@/hooks/useUrlSelection";
@@ -18,6 +19,8 @@ const GRID_MAX_ROW_SPAN = 4;
 const GRID_MIN_ROW_HEIGHT_PX = 320;
 const GRID_MAX_ROW_HEIGHT_PX = 520;
 
+const DEFAULT_PROJECT_KEY = "__global__";
+
 type EditingTerminal = {
   sessionId: string;
   terminalId: string;
@@ -38,8 +41,11 @@ type ResizeState = {
 type TerminalLayoutMode = "single" | "split" | "grid";
 
 export default function ProjectTerminal() {
+  const params = useParams<{ slug?: string }>();
+  const projectId = params?.slug ?? DEFAULT_PROJECT_KEY;
+
   const { isTouchLayout } = useInputCapabilities();
-  const sessions = useTerminalTabsStore((s) => s.sessions);
+  const sessions = useTerminalTabsStore((s) => s.getProjectSessions(projectId));
   const createSession = useTerminalTabsStore((s) => s.createSession);
   const closeSession = useTerminalTabsStore((s) => s.closeSession);
   const renameSession = useTerminalTabsStore((s) => s.renameSession);
@@ -78,10 +84,10 @@ export default function ProjectTerminal() {
   // Auto-create first session if none exist
   useEffect(() => {
     if (sessions.length === 0) {
-      const id = createSession();
+      const id = createSession(projectId);
       replaceSelection({ session: id });
     }
-  }, [sessions.length, createSession, replaceSelection]);
+  }, [sessions.length, createSession, replaceSelection, projectId]);
 
   // Auto-select first session if none selected but sessions exist
   useEffect(() => {
@@ -171,7 +177,7 @@ export default function ProjectTerminal() {
         ),
       );
 
-      updateTerminalLayout(resizeState.sessionId, resizeState.terminalId, {
+      updateTerminalLayout(projectId, resizeState.sessionId, resizeState.terminalId, {
         colSpan: nextColSpan,
         rowSpan: nextRowSpan,
       });
@@ -190,10 +196,10 @@ export default function ProjectTerminal() {
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
     };
-  }, [resizeState, updateTerminalLayout]);
+  }, [resizeState, updateTerminalLayout, projectId]);
 
   function handleCreate() {
-    const id = createSession();
+    const id = createSession(projectId);
     replaceSelection({ session: id });
     setTouchSessionListOpen(false);
   }
@@ -210,12 +216,12 @@ export default function ProjectTerminal() {
         // Best-effort cleanup. The session is still removed from the UI.
       });
     });
-    closeSession(id);
+    closeSession(projectId, id);
   }
 
   function handleAddTerminal() {
     if (!selectedSession) return;
-    addTerminal(selectedSession.id);
+    addTerminal(projectId, selectedSession.id);
   }
 
   function handleCloseTerminal(sessionId: string, terminalId: string) {
@@ -231,7 +237,7 @@ export default function ProjectTerminal() {
     ).catch(() => {
       // Best-effort cleanup. The terminal is still removed from the UI.
     });
-    closeTerminal(sessionId, terminalId);
+    closeTerminal(projectId, sessionId, terminalId);
   }
 
   function handleStartRenameTerminal(sessionId: string, terminal: TerminalInstance) {
@@ -243,7 +249,7 @@ export default function ProjectTerminal() {
     if (!editingTerminal) return;
     const nextTitle = editingTitle.trim();
     if (nextTitle) {
-      renameTerminal(editingTerminal.sessionId, editingTerminal.terminalId, nextTitle);
+      renameTerminal(projectId, editingTerminal.sessionId, editingTerminal.terminalId, nextTitle);
     }
     setEditingTerminal(null);
     setEditingTitle("");
@@ -254,6 +260,10 @@ export default function ProjectTerminal() {
     setTouchSessionListOpen(false);
   }
 
+  function handleRenameSession(id: string, title: string) {
+    renameSession(projectId, id, title);
+  }
+
   function terminalStatusDotClass(status: TerminalStatus): string {
     if (status === "active") return "bg-emerald-400";
     if (status === "connecting") return "bg-amber-400";
@@ -372,10 +382,10 @@ export default function ProjectTerminal() {
             key={terminal.id}
             tabId={terminal.id}
             onSessionReady={(backendSessionId) =>
-              setTerminalSessionId(sessionId, terminal.id, backendSessionId)
+              setTerminalSessionId(projectId, sessionId, terminal.id, backendSessionId)
             }
             onStatusChange={(status) =>
-              updateTerminalStatus(sessionId, terminal.id, status)
+              updateTerminalStatus(projectId, sessionId, terminal.id, status)
             }
           />
         </div>
@@ -413,7 +423,7 @@ export default function ProjectTerminal() {
                   onSelect={handleSelect}
                   onCreate={handleCreate}
                   onClose={handleClose}
-                  onRename={renameSession}
+                  onRename={handleRenameSession}
                 />
               </div>
             </>
@@ -513,7 +523,7 @@ export default function ProjectTerminal() {
               onSelect={handleSelect}
               onCreate={handleCreate}
               onClose={handleClose}
-              onRename={renameSession}
+              onRename={handleRenameSession}
             />
           </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}`}