@hienlh/ppm 0.10.4 → 0.11.0

package/src/web/components/chat/message-input.tsx

@@ -40,6 +40,12 @@ interface MessageInputProps {
   fileSelected?: FileNode | null;
   /** External files added via drag-drop on parent */
   externalFiles?: File[] | null;
+  /** External paths from file tree drag or disambiguation */
+  externalPaths?: string[] | null;
+  /** Callback when external paths have been consumed (inserted into textarea) */
+  onExternalPathsConsumed?: () => void;
+  /** Callback when OS-dropped files resolve to multiple matches (disambiguation needed) */
+  onDisambiguate?: (matches: FileNode[]) => void;
   /** Pre-fill input value (e.g. from command palette "Ask AI") */
   initialValue?: string;
   /** Auto-focus textarea on mount */
@@ -67,6 +73,9 @@ export const MessageInput = memo(function MessageInput({
   onFileItemsLoaded,
   fileSelected,
   externalFiles,
+  externalPaths,
+  onExternalPathsConsumed,
+  onDisambiguate,
   initialValue,
   autoFocus,
   permissionMode,
@@ -291,6 +300,17 @@ export const MessageInput = memo(function MessageInput({
     processFiles(externalFiles);
   }, [externalFiles]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Handle external paths from file tree drag or disambiguation
+  useEffect(() => {
+    if (!externalPaths || externalPaths.length === 0) return;
+    const pathRefs = externalPaths.map((p) => `@${p}`).join(" ");
+    const cur = valueRef.current;
+    const sep = cur.length > 0 && !cur.endsWith(" ") ? " " : "";
+    writeTextareas(cur + sep + pathRefs + " ");
+    getVisibleTextarea()?.focus();
+    onExternalPathsConsumed?.();
+  }, [externalPaths]); // eslint-disable-line react-hooks/exhaustive-deps
+
   /** Upload a single file to the server, return server path */
   const uploadFile = useCallback(
     async (file: File): Promise<string | null> => {
@@ -318,12 +338,34 @@ export const MessageInput = memo(function MessageInput({
     [projectName],
   );
 
-  /** Process dropped/pasted/selected files */
+  /** Process dropped/pasted/selected files — resolves paths via server when possible */
   const processFiles = useCallback(
-    (files: File[]) => {
+    async (files: File[]) => {
       for (const file of files) {
+        // Step 1: Try server-side filename resolution for all files
+        if (projectName) {
+          try {
+            const data = await api.get<{ matches: FileNode[] }>(
+              `${projectUrl(projectName)}/files/resolve?name=${encodeURIComponent(file.name)}`,
+            );
+            if (data.matches.length === 1) {
+              const cur = valueRef.current;
+              const sep = cur.length > 0 && !cur.endsWith(" ") ? " " : "";
+              writeTextareas(cur + sep + `@${data.matches[0]!.path} `);
+              continue;
+            }
+            if (data.matches.length > 1) {
+              onDisambiguate?.(data.matches);
+              continue;
+            }
+            // 0 matches → fall through to existing behavior
+          } catch {
+            // Resolve failed → fall through
+          }
+        }
+
+        // Step 2: Fallback — upload supported files, insert name for unsupported
         if (!isSupportedFile(file)) {
-          // Unsupported → insert file name as text
           const cur = valueRef.current;
           const sep = cur.length > 0 && !cur.endsWith(" ") ? " " : "";
           writeTextareas(cur + sep + file.name);
@@ -358,7 +400,7 @@ export const MessageInput = memo(function MessageInput({
       }
       (mobileTextareaRef.current ?? textareaRef.current)?.focus();
     },
-    [uploadFile, writeTextareas],
+    [uploadFile, writeTextareas, projectName, onDisambiguate],
   );
 
   const removeAttachment = useCallback((id: string) => {
@@ -566,10 +608,19 @@ export const MessageInput = memo(function MessageInput({
   const handleDrop = useCallback(
     (e: DragEvent<HTMLTextAreaElement>) => {
       e.preventDefault();
+      // Check for internal file tree drag first
+      const ppmPath = e.dataTransfer.getData("application/x-ppm-path");
+      if (ppmPath) {
+        const cur = valueRef.current;
+        const sep = cur.length > 0 && !cur.endsWith(" ") ? " " : "";
+        writeTextareas(cur + sep + `@${ppmPath} `);
+        getVisibleTextarea()?.focus();
+        return;
+      }
       const files = Array.from(e.dataTransfer.files);
       if (files.length > 0) processFiles(files);
     },
-    [processFiles],
+    [processFiles, writeTextareas, getVisibleTextarea],
   );
 
   const handleDragOver = useCallback((e: DragEvent<HTMLTextAreaElement>) => {

package/src/web/components/explorer/file-tree.tsx

@@ -89,6 +89,13 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
     onFileOpen?.();
   }
 
+  function handleDragStart(e: React.DragEvent) {
+    const pathValue = isDir ? `${node.path}/` : node.path;
+    e.dataTransfer.setData("application/x-ppm-path", pathValue);
+    e.dataTransfer.setData("text/plain", node.name);
+    e.dataTransfer.effectAllowed = "copy";
+  }
+
   const Icon = isDir
     ? isExpanded
       ? FolderOpen
@@ -107,6 +114,8 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
       <ContextMenu>
         <ContextMenuTrigger asChild>
           <button
+            draggable
+            onDragStart={handleDragStart}
             onClick={handleClick}
             className={cn(
               "flex items-center w-full gap-1.5 px-2 py-1 rounded-sm text-sm",

package/src/web/components/extensions/extension-webview.tsx

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState, useCallback } from "react";
 import { useExtensionStore } from "@/stores/extension-store";
 import { useTabStore } from "@/stores/tab-store";
+import { getAuthToken } from "@/lib/api-client";
 import { Loader2 } from "lucide-react";
 
 /** Inject acquireVsCodeApi() shim so extension webviews can postMessage to parent */
@@ -33,6 +34,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   // Prefer currentProject (reflects URL/active project) over stale tab metadata
   const projectName = currentProject || (metadata?.projectName as string | undefined) || undefined;
   const [timedOut, setTimedOut] = useState(false);
+  // Track whether extensions are activated (contributions received from WS)
+  const extensionsReady = useExtensionStore((s) => s.contributions !== null);
 
   // Match panel: prefer panelId (exact), fallback to viewType match (reload recovery)
   const panel = useExtensionStore((s) => {
@@ -58,11 +61,11 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   const prevProjectRef = useRef<string | null>(null);
 
   // On reload: resolve project path and dispatch command once.
-  // No retry — if it fails, user closes tab and reopens to retry.
+  // Wait for extensions to be activated (contributions received) before dispatching.
   // Skip if project-sync effect already dispatched for this project
   // (panel is briefly undefined during dispose→recreate transition).
   useEffect(() => {
-    if (panel || !viewType) return;
+    if (panel || !viewType || !extensionsReady) return;
     // If we already dispatched for this project (via project-sync effect),
     // don't dispatch again — the panel is just temporarily missing.
     if (projectName && projectName === prevProjectRef.current) return;
@@ -74,7 +77,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
       let args: unknown[] = [];
       if (projectName) {
         try {
-          const res = await fetch("/api/projects");
+          const token = getAuthToken();
+          const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
           const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
           const match = json.data?.find((p) => p.name === projectName);
           if (match) args = [match.path];
@@ -86,10 +90,9 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
       }));
     }
 
-    // Short delay to let WS connect after page load
-    const timer = setTimeout(dispatch, 500);
-    return () => { cancelled = true; clearTimeout(timer); };
-  }, [panel, viewType, projectName]);
+    dispatch();
+    return () => { cancelled = true; };
+  }, [panel, viewType, projectName, extensionsReady]);
 
   // When panel exists, ensure correct project is loaded.
   // On mount: dispatch command so extension can reload if project differs.
@@ -103,7 +106,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     const command = viewType.includes(".") ? viewType : `${viewType}.view`;
     (async () => {
       try {
-        const res = await fetch("/api/projects");
+        const token = getAuthToken();
+        const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
         const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
         const match = json.data?.find((p) => p.name === projectName);
         if (match) {
@@ -135,7 +139,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     const command = viewType.includes(".") ? viewType : `${viewType}.view`;
     (async () => {
       try {
-        const res = await fetch("/api/projects");
+        const token = getAuthToken();
+        const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
         const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
         const match = json.data?.find((p) => p.name === projectName);
         const args = match ? [match.path] : [];
@@ -161,12 +166,25 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     };
   }, []);
 
-  // Timeout: if panel doesn't appear within 5s, show error
+  // Auto-retry: if panel doesn't appear after extensions are ready,
+  // re-dispatch the command every 2s (up to 3 times) before showing error.
+  // This handles transient WS instability during initial page load where the
+  // first command dispatch may be lost due to connection cycling.
   useEffect(() => {
     if (panel) { setTimedOut(false); return; }
-    const timer = setTimeout(() => setTimedOut(true), 5_000);
-    return () => clearTimeout(timer);
-  }, [panel]);
+    if (!extensionsReady || !viewType) return;
+    let retries = 0;
+    const id = setInterval(() => {
+      retries++;
+      if (retries > 3) {
+        clearInterval(id);
+        setTimedOut(true);
+        return;
+      }
+      handleRetry();
+    }, 2_000);
+    return () => clearInterval(id);
+  }, [panel, extensionsReady, viewType, handleRetry]);
 
   // Listen for postMessage from iframe → forward to extension via WS bridge
   useEffect(() => {

package/src/web/components/jira/jira-config-form.tsx

@@ -0,0 +1,109 @@
+import { useState, useEffect, type FormEvent } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useJiraStore } from "@/stores/jira-store";
+import { CheckCircle, AlertCircle, Loader2, Trash2 } from "lucide-react";
+
+interface Props {
+  projectId: number;
+  existing?: { baseUrl: string; email: string; hasToken: boolean } | null;
+}
+
+export function JiraConfigForm({ projectId, existing }: Props) {
+  const { saveConfig, deleteConfig, testConnection } = useJiraStore();
+  const [baseUrl, setBaseUrl] = useState(existing?.baseUrl ?? "");
+  const [email, setEmail] = useState(existing?.email ?? "");
+  const [token, setToken] = useState("");
+
+  // Sync state when existing config loads or changes
+  useEffect(() => {
+    if (existing) {
+      setBaseUrl(existing.baseUrl);
+      setEmail(existing.email);
+    }
+  }, [existing?.baseUrl, existing?.email]);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<"ok" | "fail" | null>(null);
+  const [testError, setTestError] = useState<string | null>(null);
+
+  const handleSave = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!baseUrl || !email || (!token && !existing?.hasToken)) return;
+    setSaving(true);
+    try {
+      await saveConfig(projectId, { baseUrl, email, ...(token ? { token } : {}) });
+      setToken("");
+    } catch {}
+    setSaving(false);
+  };
+
+  const handleTest = async () => {
+    setTesting(true);
+    setTestResult(null);
+    setTestError(null);
+    try {
+      const ok = await testConnection(projectId);
+      setTestResult(ok ? "ok" : "fail");
+    } catch (e: any) {
+      setTestResult("fail");
+      setTestError(e?.message ?? "Connection failed");
+    }
+    setTesting(false);
+  };
+
+  return (
+    <form onSubmit={handleSave} className="space-y-3">
+      <div>
+        <label className="text-xs text-muted-foreground">Base URL</label>
+        <Input
+          value={baseUrl}
+          onChange={(e) => setBaseUrl(e.target.value)}
+          placeholder="https://mysite.atlassian.net"
+          className="h-9"
+        />
+      </div>
+      <div>
+        <label className="text-xs text-muted-foreground">Email</label>
+        <Input
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@company.com"
+          className="h-9"
+        />
+      </div>
+      <div>
+        <label className="text-xs text-muted-foreground">
+          API Token {existing?.hasToken && <span className="text-green-500">(saved)</span>}
+        </label>
+        <Input
+          type="password"
+          value={token}
+          onChange={(e) => setToken(e.target.value)}
+          placeholder={existing?.hasToken ? "Enter new token to replace" : "Your Jira API token"}
+          className="h-9"
+        />
+      </div>
+      <div className="flex items-center gap-2 flex-wrap">
+        <Button type="submit" size="sm" disabled={saving} className="min-w-[44px] min-h-[44px]">
+          {saving ? <Loader2 className="size-4 animate-spin" /> : "Save"}
+        </Button>
+        {existing && (
+          <>
+            <Button type="button" size="sm" variant="outline" onClick={handleTest} disabled={testing} className="min-h-[44px]">
+              {testing ? <Loader2 className="size-4 animate-spin" /> : "Test Connection"}
+            </Button>
+            <Button type="button" size="sm" variant="destructive" onClick={() => deleteConfig(projectId)} className="min-h-[44px]">
+              <Trash2 className="size-4" />
+            </Button>
+          </>
+        )}
+        {testResult === "ok" && <CheckCircle className="size-4 text-green-500" />}
+        {testResult === "fail" && <AlertCircle className="size-4 text-red-500" />}
+      </div>
+      {testError && (
+        <p className="text-xs text-red-500 break-all">{testError}</p>
+      )}
+    </form>
+  );
+}

package/src/web/components/jira/jira-debug-prompt-dialog.tsx

@@ -0,0 +1,58 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useJiraStore } from "@/stores/jira-store";
+import type { JiraWatchResult } from "../../../../src/types/jira";
+
+interface Props {
+  result: JiraWatchResult | null;
+  onClose: () => void;
+}
+
+export function JiraDebugPromptDialog({ result, onClose }: Props) {
+  const { watchers, startDebug } = useJiraStore();
+  const [prompt, setPrompt] = useState("");
+
+  useEffect(() => {
+    if (!result) return;
+    const watcher = watchers.find((w) => w.id === result.watcherId);
+    const template = watcher?.promptTemplate
+      ?? `Debug Jira issue {issue_key}: {summary}`;
+    setPrompt(
+      template
+        .replace(/\{issue_key\}/g, result.issueKey)
+        .replace(/\{summary\}/g, result.issueSummary ?? ""),
+    );
+  }, [result, watchers]);
+
+  const handleStart = async () => {
+    if (!result) return;
+    try {
+      await startDebug(result.id, prompt);
+    } catch {}
+    onClose();
+  };
+
+  return (
+    <Dialog open={!!result} onOpenChange={(open) => { if (!open) onClose(); }}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Start Debug: {result?.issueKey}</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-muted-foreground">{result?.issueSummary}</p>
+        <div>
+          <label className="text-xs text-muted-foreground">Debug Prompt</label>
+          <textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            className="w-full h-24 rounded-md border border-input bg-background px-3 py-2 text-xs font-mono resize-none mt-1"
+            placeholder="Debug Jira issue {issue_key}: {summary}"
+          />
+        </div>
+        <Button size="sm" className="w-full min-h-[44px]" onClick={handleStart}>
+          Start Debug Session
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/jira/jira-filter-builder.tsx

@@ -0,0 +1,197 @@
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { X, Loader2 } from "lucide-react";
+import { api } from "@/lib/api-client";
+
+interface FilterState {
+  project: string[];
+  issueType: string[];
+  priority: string[];
+  status: string[];
+  assignee: string[];
+}
+
+function filtersToJql(filters: FilterState): string {
+  const clauses: string[] = [];
+  if (filters.project.length) clauses.push(`project IN (${filters.project.join(", ")})`);
+  if (filters.issueType.length) clauses.push(`issuetype IN (${filters.issueType.map((v) => `"${v}"`).join(", ")})`);
+  if (filters.priority.length) clauses.push(`priority IN (${filters.priority.map((v) => `"${v}"`).join(", ")})`);
+  if (filters.status.length) clauses.push(`status IN (${filters.status.map((v) => `"${v}"`).join(", ")})`);
+  if (filters.assignee.length) clauses.push(`assignee IN (${filters.assignee.map((v) => `"${v}"`).join(", ")})`);
+  return (clauses.join(" AND ") || "ORDER BY updated DESC") + (clauses.length ? " ORDER BY updated DESC" : "");
+}
+
+const EMPTY_FILTERS: FilterState = { project: [], issueType: [], priority: [], status: [], assignee: [] };
+
+interface FieldOption { id?: string; key?: string; name: string }
+
+interface Props {
+  value: string;
+  onChange: (jql: string) => void;
+  configId: number;
+}
+
+export function JiraFilterBuilder({ value, onChange, configId }: Props) {
+  const [mode, setMode] = useState<"builder" | "raw">(value ? "raw" : "builder");
+  const [filters, setFilters] = useState<FilterState>(EMPTY_FILTERS);
+  const [rawJql, setRawJql] = useState(value);
+
+  // Metadata options fetched from Jira API
+  const [projects, setProjects] = useState<FieldOption[]>([]);
+  const [issueTypes, setIssueTypes] = useState<FieldOption[]>([]);
+  const [priorities, setPriorities] = useState<FieldOption[]>([]);
+  const [statuses, setStatuses] = useState<FieldOption[]>([]);
+  const [assignees, setAssignees] = useState<FieldOption[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // Fetch metadata when configId changes
+  useEffect(() => {
+    if (!configId) return;
+    setLoading(true);
+    Promise.all([
+      api.get<FieldOption[]>(`/api/jira/metadata/${configId}/projects`).catch(() => []),
+      api.get<FieldOption[]>(`/api/jira/metadata/${configId}/issuetype`).catch(() => []),
+      api.get<FieldOption[]>(`/api/jira/metadata/${configId}/priority`).catch(() => []),
+      api.get<FieldOption[]>(`/api/jira/metadata/${configId}/status`).catch(() => []),
+      api.get<Array<{ accountId: string; displayName: string }>>(`/api/jira/metadata/${configId}/assignees`).catch(() => []),
+    ]).then(([p, it, pr, st, as_]) => {
+      setProjects(p);
+      setIssueTypes(it);
+      setPriorities(pr);
+      setStatuses(st);
+      setAssignees(as_.map((u) => ({ id: u.accountId, name: u.displayName })));
+    }).finally(() => setLoading(false));
+  }, [configId]);
+
+  // Sync builder → JQL
+  useEffect(() => {
+    if (mode === "builder") {
+      const jql = filtersToJql(filters);
+      onChange(jql);
+    }
+  }, [filters, mode]);
+
+  const handleRawChange = useCallback((val: string) => {
+    setRawJql(val);
+    onChange(val);
+  }, [onChange]);
+
+  const addValue = (field: keyof FilterState, val: string) => {
+    if (!val || filters[field].includes(val)) return;
+    setFilters((f) => ({ ...f, [field]: [...f[field], val] }));
+  };
+
+  const removeValue = (field: keyof FilterState, val: string) => {
+    setFilters((f) => ({ ...f, [field]: f[field].filter((v) => v !== val) }));
+  };
+
+  return (
+    <div className="space-y-2 min-w-0">
+      <div className="flex items-center gap-2">
+        <Button
+          type="button" size="sm" variant={mode === "builder" ? "default" : "outline"}
+          onClick={() => setMode("builder")} className="min-h-[44px] text-xs"
+        >Builder</Button>
+        <Button
+          type="button" size="sm" variant={mode === "raw" ? "default" : "outline"}
+          onClick={() => setMode("raw")} className="min-h-[44px] text-xs"
+        >Raw JQL</Button>
+        {loading && <Loader2 className="size-3.5 animate-spin text-muted-foreground" />}
+      </div>
+
+      {mode === "raw" ? (
+        <textarea
+          value={rawJql}
+          onChange={(e) => handleRawChange(e.target.value)}
+          className="w-full h-20 rounded-md border border-input bg-background px-3 py-2 text-sm font-mono resize-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          placeholder='e.g. project = MYPROJ AND status = "In Progress"'
+        />
+      ) : (
+        <div className="space-y-2">
+          <FilterField
+            label="Project" field="project" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={projects.map((p) => ({ value: p.key ?? p.name, label: `${p.key ?? p.name} — ${p.name}` }))}
+            placeholder="Select project..."
+          />
+          <FilterField
+            label="Issue Type" field="issueType" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={issueTypes.map((t) => ({ value: t.name, label: t.name }))}
+            placeholder="Select issue type..."
+          />
+          <FilterField
+            label="Priority" field="priority" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={priorities.map((p) => ({ value: p.name, label: p.name }))}
+            placeholder="Select priority..."
+          />
+          <FilterField
+            label="Status" field="status" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={statuses.map((s) => ({ value: s.name, label: s.name }))}
+            placeholder="Select status..."
+          />
+          <FilterField
+            label="Assignee" field="assignee" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={assignees.map((a) => ({ value: a.id ?? a.name, label: a.name }))}
+            placeholder="Select assignee..."
+          />
+        </div>
+      )}
+
+      {/* JQL preview */}
+      <div className="text-xs text-muted-foreground bg-muted/50 rounded px-2 py-1 font-mono break-all">
+        {mode === "builder" ? filtersToJql(filters) : rawJql || "(empty)"}
+      </div>
+    </div>
+  );
+}
+
+function FilterField({ label, field, filters, onAdd, onRemove, options, placeholder }: {
+  label: string; field: keyof FilterState; filters: FilterState;
+  onAdd: (f: keyof FilterState, v: string) => void;
+  onRemove: (f: keyof FilterState, v: string) => void;
+  options: Array<{ value: string; label: string }>;
+  placeholder: string;
+}) {
+  // Filter out already-selected options
+  const available = options.filter((o) => !filters[field].includes(o.value));
+
+  return (
+    <div>
+      <label className="text-xs text-muted-foreground">{label}</label>
+      <div className="flex items-center gap-1 flex-wrap">
+        {filters[field].map((v) => {
+          const displayLabel = options.find((o) => o.value === v)?.label ?? v;
+          return (
+            <span key={v} className="inline-flex items-center gap-0.5 px-2 py-0.5 rounded-full bg-primary/10 text-xs">
+              {displayLabel}
+              <button type="button" onClick={() => onRemove(field, v)} className="hover:text-destructive">
+                <X className="size-3" />
+              </button>
+            </span>
+          );
+        })}
+        {available.length > 0 ? (
+          <Select onValueChange={(v) => onAdd(field, v)}>
+            <SelectTrigger className="h-7 w-auto min-w-[120px] text-xs">
+              <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {available.map((o) => (
+                <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : options.length > 0 ? (
+          <span className="text-xs text-muted-foreground italic">All selected</span>
+        ) : (
+          <span className="text-xs text-muted-foreground italic">Loading...</span>
+        )}
+      </div>
+    </div>
+  );
+}