@mndrk/agx 2.0.44 → 2.0.46

package/cloud-runtime/standalone/components/LinearBoard.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import { Check, ChevronDown, Clock, Link2, Play, Search, Settings, User } from "lucide-react";
+import { Check, ChevronDown, Clock, Link2, Play, RefreshCw, Search, Settings, User } from "lucide-react";
 import { useLinearIssues, type LinearIssue } from "@/hooks/useLinearIssues";
 import { useLinearConnection } from "@/hooks/useLinearConnection";
 import { useLinearRuns, type LinearRun } from "@/hooks/useLinearRuns";
@@ -126,6 +126,303 @@ const STATUS_DOT_COLORS: Record<LinearRun["status"], string> = {
   cancelled: "bg-zinc-400",
 };
 
+interface FilterOption {
+  value: string;
+  label: string;
+}
+
+interface FilterSelectProps {
+  label: string;
+  value: string;
+  options: FilterOption[];
+  activeClasses: string;
+  onChange: (value: string) => void;
+}
+
+interface FilterPopdownProps extends FilterSelectProps {
+  emptyLabel?: string;
+}
+
+interface MultiFilterPopdownProps {
+  label: string;
+  values: string[];
+  options: FilterOption[];
+  activeClasses: string;
+  onChange: (value: string[]) => void;
+  emptyLabel?: string;
+}
+
+function FilterSelect({ label, value, options, activeClasses, onChange }: FilterSelectProps) {
+  const isActive = value.trim().length > 0;
+
+  return (
+    <div className="relative">
+      <select
+        aria-label={label}
+        className={`max-w-[160px] appearance-none rounded-full border bg-transparent px-2.5 py-0.5 pr-6 text-[11px] font-medium outline-none transition-colors ${
+          isActive
+            ? activeClasses
+            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
+        }`}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        {options.map((option) => (
+          <option key={`${label}-${option.value || "all"}`} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <ChevronDown
+        size={12}
+        className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-current"
+      />
+    </div>
+  );
+}
+
+function FilterPopdown({
+  label,
+  value,
+  options,
+  activeClasses,
+  onChange,
+  emptyLabel,
+}: FilterPopdownProps) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const selectedOption = options.find((option) => option.value === value) ?? null;
+  const isActive = value.trim().length > 0;
+  const buttonLabel = selectedOption?.label ?? emptyLabel ?? label;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, [open]);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [value]);
+
+  return (
+    <div className="relative" ref={wrapperRef}>
+      <button
+        type="button"
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={`flex max-w-[180px] items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
+          isActive
+            ? activeClasses
+            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
+        }`}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <span className="max-w-[132px] truncate">{buttonLabel}</span>
+        <ChevronDown size={12} className={`shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
+      </button>
+      {open ? (
+        <div
+          role="listbox"
+          aria-label={`${label} options`}
+          className="absolute left-0 top-full z-50 mt-1 min-w-[220px] overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-lg backdrop-blur-sm"
+        >
+          {options.map((option) => {
+            const isSelected = option.value === value;
+            return (
+              <button
+                key={`${label}-${option.value || "all"}`}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
+                  isSelected
+                    ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
+                    : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+                }`}
+                onClick={() => onChange(option.value)}
+              >
+                <span
+                  className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${
+                    isSelected
+                      ? "border-blue-500 bg-blue-500 text-white"
+                      : "border-[var(--card-border)]"
+                  }`}
+                >
+                  {isSelected ? <Check size={10} /> : null}
+                </span>
+                <span className="min-w-0 flex-1 truncate">{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function MultiFilterPopdown({
+  label,
+  values,
+  options,
+  activeClasses,
+  onChange,
+  emptyLabel,
+}: MultiFilterPopdownProps) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const selectedOptions = options.filter(
+    (option) => option.value && values.includes(option.value)
+  );
+  const isActive = selectedOptions.length > 0;
+  const buttonLabel = (() => {
+    if (selectedOptions.length === 0) {
+      return emptyLabel ?? label;
+    }
+    if (selectedOptions.length === 1) {
+      return selectedOptions[0]?.label ?? (emptyLabel ?? label);
+    }
+    return `${selectedOptions.length} assignees`;
+  })();
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, [open]);
+
+  const toggleValue = useCallback(
+    (nextValue: string) => {
+      if (!nextValue) {
+        onChange([]);
+        return;
+      }
+
+      const nextValues = values.includes(nextValue)
+        ? values.filter((value) => value !== nextValue)
+        : [...values, nextValue];
+      onChange(nextValues);
+    },
+    [onChange, values]
+  );
+
+  return (
+    <div className="relative" ref={wrapperRef}>
+      <button
+        type="button"
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={`flex max-w-[180px] items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
+          isActive
+            ? activeClasses
+            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
+        }`}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <span className="max-w-[132px] truncate">{buttonLabel}</span>
+        <ChevronDown size={12} className={`shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
+      </button>
+      {open ? (
+        <div
+          role="listbox"
+          aria-label={`${label} options`}
+          aria-multiselectable="true"
+          className="absolute left-0 top-full z-50 mt-1 min-w-[240px] overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-lg backdrop-blur-sm"
+        >
+          <button
+            type="button"
+            role="option"
+            aria-selected={!isActive}
+            className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
+              !isActive
+                ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
+                : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+            }`}
+            onClick={() => onChange([])}
+          >
+            <span
+              className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${
+                !isActive
+                  ? "border-blue-500 bg-blue-500 text-white"
+                  : "border-[var(--card-border)]"
+              }`}
+            >
+              {!isActive ? <Check size={10} /> : null}
+            </span>
+            <span className="min-w-0 flex-1 truncate">{emptyLabel ?? label}</span>
+          </button>
+          {selectedOptions.length > 0 ? (
+            <div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-[0.12em] text-[var(--muted-foreground)]">
+              Selected
+            </div>
+          ) : null}
+          {options.filter((option) => option.value).map((option) => {
+            const isSelected = values.includes(option.value);
+            return (
+              <button
+                key={`${label}-${option.value}`}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
+                  isSelected
+                    ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
+                    : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+                }`}
+                onClick={() => toggleValue(option.value)}
+              >
+                <span
+                  className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
+                    isSelected
+                      ? "border-blue-500 bg-blue-500 text-white"
+                      : "border-[var(--card-border)]"
+                  }`}
+                >
+                  {isSelected ? <Check size={10} /> : null}
+                </span>
+                <span className="min-w-0 flex-1 truncate">{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+interface CycleOption {
+  id: string;
+  number: number;
+  name: string | null;
+  startsAt: string;
+  endsAt: string;
+}
+
+interface LinearEntityOption {
+  id: string;
+  name: string;
+}
+
 function TicketChatStarter({
   issue,
   participants,
@@ -339,6 +636,7 @@ function TicketChatStarter({
           onSend={handleSend}
           onStop={() => {}}
           participants={participants}
+          projectSlug={projectSlug ?? undefined}
           loading={activityStatus !== "ready"}
           commands={[]}
           activityStatus={activityStatus}
@@ -559,6 +857,7 @@ function ThreadMessageList({
             onSend={handleSend}
             onStop={stop}
             participants={participants}
+            projectSlug={run.projectSlug ?? undefined}
             loading={activityStatus !== "ready"}
             commands={[]}
             activityStatus={activityStatus}
@@ -639,10 +938,10 @@ function TicketRow({
       {selected && (
         <div className="absolute left-0 top-0 bottom-0 w-[3px] rounded-r-full bg-blue-500" />
       )}
-      <span className="w-14 shrink-0 font-mono text-xs text-[var(--muted-foreground)]">
+      <span className="w-24 shrink-0 whitespace-nowrap font-mono text-xs text-[var(--muted-foreground)]">
         {issue.identifier}
       </span>
-      <span className={`flex-1 truncate text-xs ${selected ? "font-medium text-[var(--foreground)]" : "text-[var(--muted-foreground)]"}`}>
+      <span className={`min-w-0 flex-1 truncate text-xs ${selected ? "font-medium text-[var(--foreground)]" : "text-[var(--muted-foreground)]"}`}>
         {issue.title}
       </span>
       <span className="shrink-0 text-xs text-[var(--muted-foreground)]">
@@ -698,31 +997,24 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     configureMcp,
   } = useLinearConnection();
 
-  interface Cycle {
-    id: string;
-    number: number;
-    name: string | null;
-    startsAt: string;
-    endsAt: string;
-  }
-
   const [setupDismissed, setSetupDismissed] = useState(false);
   const [showSettings, setShowSettings] = useState(initialShowSettings ?? false);
   const [ticketPanelWidth, setTicketPanelWidth] = useState(576);
   const [runsPanelWidth, setRunsPanelWidth] = useState(224);
   const [search, setSearch] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useState("");
-  const [assignedToMe, setAssignedToMe] = useState(false);
-  const [cycles, setCycles] = useState<Cycle[]>([]);
-  const [selectedCycleId, setSelectedCycleId] = useState<string | undefined>(undefined);
-  const [showCyclePicker, setShowCyclePicker] = useState(false);
+  const [assignees, setAssignees] = useState<LinearEntityOption[]>([]);
+  const [workspaces, setWorkspaces] = useState<LinearEntityOption[]>([]);
+  const [selectedAssigneeIds, setSelectedAssigneeIds] = useState<string[]>([]);
+  const [cycles, setCycles] = useState<CycleOption[]>([]);
+  const [selectedCycleId, setSelectedCycleId] = useState("");
+  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState("");
   const [selectedIssue, setSelectedIssue] = useState<LinearIssue | null>(null);
   const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
   const [participants, setParticipants] = useState<Participant[]>([]);
   const [pickerIssue, setPickerIssue] = useState<LinearIssue | null>(null);
   const [pickerAnchor, setPickerAnchor] = useState<{ top: number; left: number } | null>(null);
   const searchDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const cyclePickerRef = useRef<HTMLDivElement | null>(null);
 
   const handleSearchChange = useCallback((value: string) => {
     setSearch(value);
@@ -740,40 +1032,66 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     };
   }, []);
 
-  // Fetch cycles when connected
+  // Fetch filter options when connected
   useEffect(() => {
     if (!connected) return;
     let cancelled = false;
-    fetch("/api/linear/cycles")
+    fetch("/api/linear/options")
       .then((res) => res.json())
       .then((data) => {
-        if (!cancelled && Array.isArray(data.cycles)) {
-          setCycles(data.cycles);
+        if (cancelled) {
+          return;
         }
+        setAssignees(Array.isArray(data.assignees) ? data.assignees : []);
+        setWorkspaces(Array.isArray(data.teams) ? data.teams : []);
+        setCycles(Array.isArray(data.cycles) ? data.cycles : []);
       })
-      .catch(() => {});
-    return () => { cancelled = true; };
+      .catch(() => {
+        if (!cancelled) {
+          setAssignees([]);
+          setWorkspaces([]);
+          setCycles([]);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [connected]);
 
-  // Close cycle picker on outside click
   useEffect(() => {
-    if (!showCyclePicker) return;
-    const handler = (e: MouseEvent) => {
-      if (cyclePickerRef.current && !cyclePickerRef.current.contains(e.target as Node)) {
-        setShowCyclePicker(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [showCyclePicker]);
+    const validAssigneeIds = selectedAssigneeIds.filter((assigneeId) =>
+      assignees.some((assignee) => assignee.id === assigneeId)
+    );
+    if (validAssigneeIds.length !== selectedAssigneeIds.length) {
+      setSelectedAssigneeIds(validAssigneeIds);
+    }
+  }, [assignees, selectedAssigneeIds]);
+
+  useEffect(() => {
+    if (workspaces.length <= 1 && selectedWorkspaceId) {
+      setSelectedWorkspaceId("");
+      return;
+    }
+
+    if (selectedWorkspaceId && !workspaces.some((workspace) => workspace.id === selectedWorkspaceId)) {
+      setSelectedWorkspaceId("");
+    }
+  }, [selectedWorkspaceId, workspaces]);
+
+  useEffect(() => {
+    if (selectedCycleId && !cycles.some((cycle) => cycle.id === selectedCycleId)) {
+      setSelectedCycleId("");
+    }
+  }, [cycles, selectedCycleId]);
 
   const filters = useMemo(
     () => ({
       search: debouncedSearch || undefined,
-      assignedToMe: assignedToMe || undefined,
-      cycleId: selectedCycleId,
+      assigneeIds: selectedAssigneeIds.length > 0 ? selectedAssigneeIds : undefined,
+      teamId: selectedWorkspaceId || undefined,
+      cycleId: selectedCycleId || undefined,
     }),
-    [debouncedSearch, assignedToMe, selectedCycleId]
+    [debouncedSearch, selectedAssigneeIds, selectedCycleId, selectedWorkspaceId]
   );
 
   const {
@@ -781,7 +1099,8 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     loading: issuesLoading,
     hasMore,
     loadMore,
-  } = useLinearIssues(filters, connected);
+    refresh: refreshIssues,
+  } = useLinearIssues(filters, connected, { projectSlug });
   const {
     runs,
     loading: runsLoading,
@@ -790,6 +1109,26 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
   } = useLinearRuns(selectedIssue?.id, projectId ?? null);
 
   const selectedRun = runs.find((run) => run.id === selectedRunId) ?? null;
+  const assigneeOptions = useMemo<FilterOption[]>(
+    () => assignees.map((assignee) => ({ value: assignee.id, label: assignee.name })),
+    [assignees]
+  );
+  const workspaceOptions = useMemo<FilterOption[]>(
+    () => [{ value: "", label: "Workspace" }, ...workspaces.map((workspace) => ({ value: workspace.id, label: workspace.name }))],
+    [workspaces]
+  );
+  const cycleOptions = useMemo<FilterOption[]>(
+    () => [
+      { value: "", label: "Cycle" },
+      ...cycles.map((cycle) => ({
+        value: cycle.id,
+        label: cycle.name || `Cycle ${cycle.number}`,
+      })),
+    ],
+    [cycles]
+  );
+  const showCycleFilter = cycleOptions.length > 1;
+  const showWorkspaceFilter = workspaceOptions.length > 2;
 
   useEffect(() => {
     if (issues.length === 0) {
@@ -1021,6 +1360,16 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
                 onChange={(event) => handleSearchChange(event.target.value)}
               />
             </div>
+            <button
+              type="button"
+              className="shrink-0 rounded p-1.5 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)] disabled:cursor-not-allowed disabled:opacity-50"
+              onClick={() => void refreshIssues()}
+              title="Refresh tickets"
+              aria-label="Refresh tickets"
+              disabled={issuesLoading}
+            >
+              <RefreshCw size={16} className={issuesLoading ? "animate-spin" : undefined} />
+            </button>
             <button
               type="button"
               className="shrink-0 rounded p-1.5 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
@@ -1031,87 +1380,32 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
             </button>
           </div>
           <div className="flex items-center gap-1.5 px-3 pb-2">
-            <button
-              type="button"
-              className={`rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
-                assignedToMe
-                  ? "border-blue-500/30 bg-blue-500/10 text-blue-400"
-                  : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
-              }`}
-              onClick={() => setAssignedToMe((v) => !v)}
-            >
-              My Issues
-            </button>
-            <div className="relative" ref={cyclePickerRef}>
-              <button
-                type="button"
-                className={`flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
-                  selectedCycleId
-                    ? "border-purple-500/30 bg-purple-500/10 text-purple-400"
-                    : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
-                }`}
-                onClick={() => setShowCyclePicker((v) => !v)}
-              >
-                <span className="truncate max-w-[120px]">
-                  {selectedCycleId
-                    ? (() => {
-                        const c = cycles.find((cy) => cy.id === selectedCycleId);
-                        return c ? (c.name || `Cycle ${c.number}`) : "Cycle";
-                      })()
-                    : "Cycle"}
-                </span>
-                <ChevronDown size={12} />
-              </button>
-              {showCyclePicker && (
-                <div className="absolute left-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-[var(--card-border)] bg-[var(--card-bg)] py-1 shadow-lg">
-                  <button
-                    type="button"
-                    className={`flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors hover:bg-[var(--background)] ${
-                      !selectedCycleId ? "font-medium text-[var(--foreground)]" : "text-[var(--muted-foreground)]"
-                    }`}
-                    onClick={() => {
-                      setSelectedCycleId(undefined);
-                      setShowCyclePicker(false);
-                    }}
-                  >
-                    All cycles
-                  </button>
-                  {cycles.map((cycle) => {
-                    const now = new Date();
-                    const start = new Date(cycle.startsAt);
-                    const end = new Date(cycle.endsAt);
-                    const isCurrent = now >= start && now <= end;
-                    const label = cycle.name || `Cycle ${cycle.number}`;
-                    return (
-                      <button
-                        key={cycle.id}
-                        type="button"
-                        className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition-colors hover:bg-[var(--background)] ${
-                          selectedCycleId === cycle.id ? "font-medium text-[var(--foreground)]" : "text-[var(--muted-foreground)]"
-                        }`}
-                        onClick={() => {
-                          setSelectedCycleId(cycle.id);
-                          setShowCyclePicker(false);
-                        }}
-                      >
-                        <span className="flex items-center gap-1.5">
-                          {label}
-                          {isCurrent && (
-                            <span className="rounded bg-green-500/10 px-1 py-0.5 text-[9px] font-bold uppercase text-green-400">
-                              current
-                            </span>
-                          )}
-                        </span>
-                        {selectedCycleId === cycle.id && <Check size={12} />}
-                      </button>
-                    );
-                  })}
-                  {cycles.length === 0 && (
-                    <div className="px-3 py-2 text-xs text-[var(--muted-foreground)]">No cycles found</div>
-                  )}
-                </div>
-              )}
-            </div>
+            <MultiFilterPopdown
+              label="Assignee"
+              values={selectedAssigneeIds}
+              options={assigneeOptions}
+              activeClasses="border-blue-500/30 bg-blue-500/10 text-blue-400"
+              onChange={setSelectedAssigneeIds}
+              emptyLabel="All assignees"
+            />
+            {showWorkspaceFilter ? (
+              <FilterSelect
+                label="Workspace"
+                value={selectedWorkspaceId}
+                options={workspaceOptions}
+                activeClasses="border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
+                onChange={setSelectedWorkspaceId}
+              />
+            ) : null}
+            {showCycleFilter ? (
+              <FilterSelect
+                label="Cycle"
+                value={selectedCycleId}
+                options={cycleOptions}
+                activeClasses="border-purple-500/30 bg-purple-500/10 text-purple-400"
+                onChange={setSelectedCycleId}
+              />
+            ) : null}
           </div>
         </div>
 

package/cloud-runtime/standalone/components/chat-ui/ChatContainer.tsx

@@ -1543,6 +1543,7 @@ export function ChatContainer({
           participants={activeParticipants}
           projectGroups={threadProjects}
           projects={projectMentions}
+          projectSlug={effectiveProjectSlug}
           messages={messages}
           commands={slashCommands}
           placeholder="Reply — @name to mention, /search, /summarize"
@@ -1554,7 +1555,7 @@ export function ChatContainer({
         />
       );
     },
-    [handleThreadReply, handleStopThread, streaming, activeParticipants, threadProjects, projectMentions, slashCommands, messages, autoMode, handleAutoModeChange, activeProcesses, activeChatRuns, activeProjectRepos, selectedRepoIds, handleRepoSelectionChange]
+    [handleThreadReply, handleStopThread, streaming, activeParticipants, threadProjects, projectMentions, effectiveProjectSlug, slashCommands, messages, autoMode, handleAutoModeChange, activeProcesses, activeChatRuns, activeProjectRepos, selectedRepoIds, handleRepoSelectionChange]
   );
 
   const toggleWorkspaceSidebar = useCallback(() => {
@@ -1950,6 +1951,7 @@ export function ChatContainer({
                     participants={activeParticipants}
                     projects={projectMentions}
                     projectGroups={threadProjects}
+                    projectSlug={effectiveProjectSlug}
                     messages={messages}
                     commands={slashCommands}
                     pendingThreadInsert={pendingThreadInsert}