@hienlh/ppm 0.6.6 → 0.7.0

package/src/web/components/chat/question-card.tsx

@@ -0,0 +1,334 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+
+/* ── Types ── */
+export interface QuestionOption {
+  label: string;
+  description?: string;
+}
+
+export interface Question {
+  question: string;
+  header?: string;
+  options: QuestionOption[];
+  multiSelect?: boolean;
+}
+
+interface QuestionCardProps {
+  questions: Question[];
+  onSubmit: (answers: Record<string, string>) => void;
+  onSkip: () => void;
+}
+
+/* ── Hook: form state ── */
+function useQuestionForm(questions: Question[]) {
+  const [answers, setAnswers] = useState<Record<number, string[]>>({});
+  const [customInputs, setCustomInputs] = useState<Record<number, string>>({});
+  const [activeTab, setActiveTab] = useState(0);
+
+  const handleSingleSelect = useCallback((qi: number, label: string) => {
+    setAnswers((p) => ({ ...p, [qi]: [label] }));
+    setCustomInputs((p) => ({ ...p, [qi]: "" }));
+  }, []);
+
+  const handleMultiSelect = useCallback((qi: number, label: string) => {
+    setAnswers((p) => {
+      const cur = p[qi] || [];
+      return { ...p, [qi]: cur.includes(label) ? cur.filter((l) => l !== label) : [...cur, label] };
+    });
+  }, []);
+
+  const handleCustomInput = useCallback((qi: number, value: string) => {
+    setCustomInputs((p) => ({ ...p, [qi]: value }));
+    if (value) setAnswers((p) => ({ ...p, [qi]: [] }));
+  }, []);
+
+  const hasAnswer = useCallback(
+    (qi: number) => (answers[qi]?.length ?? 0) > 0 || (customInputs[qi]?.trim().length ?? 0) > 0,
+    [answers, customInputs],
+  );
+
+  const allAnswered = useMemo(() => questions.every((_, i) => hasAnswer(i)), [questions, hasAnswer]);
+
+  const getFinalAnswer = useCallback(
+    (qi: number) => {
+      const custom = customInputs[qi]?.trim();
+      if (custom) return custom;
+      return (answers[qi] ?? []).join(", ");
+    },
+    [answers, customInputs],
+  );
+
+  const goToNextTab = useCallback(() => setActiveTab((p) => Math.min(p + 1, questions.length - 1)), [questions.length]);
+  const goToPrevTab = useCallback(() => setActiveTab((p) => Math.max(p - 1, 0)), []);
+
+  return {
+    answers, customInputs, activeTab, setActiveTab,
+    handleSingleSelect, handleMultiSelect, handleCustomInput,
+    hasAnswer, allAnswered, getFinalAnswer, goToNextTab, goToPrevTab,
+  };
+}
+
+/* ── Hook: keyboard navigation ── */
+function useQuestionKeyboard(config: {
+  questions: Question[];
+  activeTab: number;
+  totalOptions: number;
+  allAnswered: boolean;
+  hasAnswer: (i: number) => boolean;
+  onSelectOption: (i: number) => void;
+  goToNextTab: () => void;
+  goToPrevTab: () => void;
+  onSubmit: () => void;
+  customInputRef: React.RefObject<HTMLInputElement | null>;
+  enabled: boolean;
+}) {
+  const [focusedOption, setFocusedOption] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => setFocusedOption(0), [config.activeTab]);
+
+  useEffect(() => {
+    if (!config.enabled) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isTyping = document.activeElement === config.customInputRef.current;
+
+      // Number keys 1-9
+      if (!isTyping && e.key >= "1" && e.key <= "9") {
+        e.preventDefault();
+        const idx = parseInt(e.key) - 1;
+        if (idx < config.totalOptions - 1) { setFocusedOption(idx); config.onSelectOption(idx); }
+        return;
+      }
+      // O/0 → focus custom input
+      if (!isTyping && (e.key === "o" || e.key === "O" || e.key === "0")) {
+        e.preventDefault();
+        config.customInputRef.current?.focus();
+        setFocusedOption(config.totalOptions - 1);
+        return;
+      }
+      // Tab between questions
+      if (e.key === "Tab" && config.questions.length > 1) {
+        e.preventDefault();
+        e.shiftKey ? config.goToPrevTab() : config.goToNextTab();
+        return;
+      }
+      if (!isTyping) {
+        if (e.key === "ArrowLeft") { e.preventDefault(); config.goToPrevTab(); return; }
+        if (e.key === "ArrowRight") { e.preventDefault(); config.goToNextTab(); return; }
+        if (e.key === "ArrowUp") { e.preventDefault(); setFocusedOption((p) => Math.max(0, p - 1)); return; }
+        if (e.key === "ArrowDown") { e.preventDefault(); setFocusedOption((p) => Math.min(config.totalOptions - 1, p + 1)); return; }
+        if (e.key === " ") { e.preventDefault(); config.onSelectOption(focusedOption); return; }
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (config.allAnswered) config.onSubmit();
+        else if (config.hasAnswer(config.activeTab)) config.goToNextTab();
+        return;
+      }
+      if (e.key === "Escape" && isTyping) { config.customInputRef.current?.blur(); }
+    };
+
+    const el = containerRef.current;
+    if (el) {
+      el.addEventListener("keydown", handleKeyDown);
+      el.setAttribute("tabindex", "0");
+      if (!el.contains(document.activeElement)) el.focus();
+    }
+    return () => { el?.removeEventListener("keydown", handleKeyDown); };
+  }, [config, focusedOption]);
+
+  return { focusedOption, setFocusedOption, containerRef };
+}
+
+/* ── Component ── */
+export function QuestionCard({ questions, onSubmit, onSkip }: QuestionCardProps) {
+  const customInputRef = useRef<HTMLInputElement>(null);
+  const form = useQuestionForm(questions);
+  const currentQ = questions[form.activeTab];
+  const totalOptions = currentQ ? currentQ.options.length + 1 : 0;
+  const hasMultiple = questions.length > 1;
+
+  const handleSubmit = useCallback(() => {
+    if (!form.allAnswered) return;
+    const result: Record<string, string> = {};
+    questions.forEach((q, i) => { result[q.question] = form.getFinalAnswer(i); });
+    onSubmit(result);
+  }, [form.allAnswered, form.getFinalAnswer, questions, onSubmit]);
+
+  const handleSelectOption = useCallback(
+    (index: number) => {
+      if (!currentQ || index < 0) return;
+      if (index < currentQ.options.length) {
+        const label = currentQ.options[index]?.label;
+        if (!label) return;
+        if (currentQ.multiSelect) form.handleMultiSelect(form.activeTab, label);
+        else form.handleSingleSelect(form.activeTab, label);
+      } else if (index === currentQ.options.length) {
+        customInputRef.current?.focus();
+      }
+    },
+    [currentQ, form],
+  );
+
+  const kb = useQuestionKeyboard({
+    questions, activeTab: form.activeTab, totalOptions,
+    allAnswered: form.allAnswered, hasAnswer: form.hasAnswer,
+    onSelectOption: handleSelectOption,
+    goToNextTab: form.goToNextTab, goToPrevTab: form.goToPrevTab,
+    onSubmit: handleSubmit, customInputRef, enabled: true,
+  });
+
+  const selectWithFocus = useCallback(
+    (index: number) => { handleSelectOption(index); kb.setFocusedOption(index); },
+    [handleSelectOption, kb.setFocusedOption],
+  );
+
+  return (
+    <div
+      ref={kb.containerRef}
+      className="rounded-lg border-2 border-primary/30 bg-primary/5 p-3 space-y-3 outline-none animate-in slide-in-from-bottom-2"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between text-sm font-medium text-text-primary">
+        <span>
+          AI has {hasMultiple ? `${questions.length} questions` : "a question"}
+        </span>
+        <span className="text-[10px] text-text-secondary font-normal">
+          {hasMultiple ? "←→ tabs · " : ""}↑↓ options · 1-{Math.min(totalOptions - 1, 9)} select · Enter submit
+        </span>
+      </div>
+
+      {/* Tabs */}
+      {hasMultiple && (
+        <div className="flex gap-1 p-1 bg-background rounded-md overflow-x-auto border border-border">
+          {questions.map((q, i) => (
+            <button
+              key={i}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded text-xs whitespace-nowrap transition-all ${
+                form.activeTab === i
+                  ? "bg-primary text-primary-foreground"
+                  : form.hasAnswer(i)
+                    ? "text-primary bg-transparent"
+                    : "text-text-secondary hover:bg-surface-elevated"
+              }`}
+              onClick={() => { form.setActiveTab(i); kb.setFocusedOption(0); }}
+              tabIndex={-1}
+            >
+              <span
+                className={`flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-semibold ${
+                  form.activeTab === i
+                    ? "bg-white/20"
+                    : form.hasAnswer(i)
+                      ? "bg-primary/20 text-primary"
+                      : "bg-surface-elevated text-text-secondary"
+                }`}
+              >
+                {form.hasAnswer(i) ? "✓" : i + 1}
+              </span>
+              <span className="max-w-[100px] overflow-hidden text-ellipsis">{q.header || `Q${i + 1}`}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Current question */}
+      {currentQ && (
+        <div className="space-y-2">
+          {!hasMultiple && currentQ.header && (
+            <div className="text-[11px] font-semibold uppercase tracking-wide text-text-secondary">{currentQ.header}</div>
+          )}
+          <div className="text-sm text-text-primary">{currentQ.question}</div>
+          {currentQ.multiSelect && <div className="text-[11px] text-text-secondary">Select multiple</div>}
+
+          {/* Options */}
+          <div className="flex flex-col gap-1.5">
+            {currentQ.options.map((opt, oi) => {
+              const isSelected = (form.answers[form.activeTab] || []).includes(opt.label);
+              const isFocused = kb.focusedOption === oi;
+              return (
+                <button
+                  key={oi}
+                  onClick={() => selectWithFocus(oi)}
+                  className={`text-left flex items-start gap-2.5 rounded px-2.5 py-2 text-xs border transition-all ${
+                    isSelected
+                      ? "border-primary bg-primary/10 text-text-primary"
+                      : "border-border bg-background text-text-secondary hover:border-primary/40 hover:bg-primary/5"
+                  } ${isFocused ? "ring-2 ring-primary/40 ring-offset-1 ring-offset-background" : ""}`}
+                >
+                  <span className={`flex items-center justify-center w-4.5 h-4.5 rounded text-[10px] font-semibold shrink-0 mt-px ${
+                    isSelected ? "bg-primary/20 text-primary" : "bg-surface-elevated text-text-secondary"
+                  }`}>
+                    {oi + 1}
+                  </span>
+                  <div className="flex flex-col gap-0.5 flex-1">
+                    <span className="font-medium text-text-primary">{opt.label}</span>
+                    {opt.description && <span className="text-[11px] text-text-secondary">{opt.description}</span>}
+                  </div>
+                </button>
+              );
+            })}
+
+            {/* Other / custom input */}
+            <div
+              className={`flex items-start gap-2.5 rounded px-2.5 py-2 text-xs border border-dashed transition-all border-border bg-transparent ${
+                kb.focusedOption === totalOptions - 1 ? "ring-2 ring-primary/40 ring-offset-1 ring-offset-background" : ""
+              }`}
+            >
+              <span className="flex items-center justify-center w-4.5 h-4.5 rounded bg-surface-elevated text-text-secondary text-[10px] font-semibold shrink-0 mt-px">
+                O
+              </span>
+              <input
+                ref={customInputRef}
+                type="text"
+                className="flex-1 px-2 py-1 text-xs bg-surface border border-border rounded text-text-primary outline-none placeholder:text-text-subtle focus:border-primary"
+                placeholder="Other (press O to type)..."
+                value={form.customInputs[form.activeTab] || ""}
+                onChange={(e) => form.handleCustomInput(form.activeTab, e.target.value)}
+                onFocus={() => kb.setFocusedOption(totalOptions - 1)}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Buttons */}
+      <div className="flex gap-2 justify-end pt-1">
+        {hasMultiple && (
+          <>
+            <button
+              className="px-3 py-1.5 text-xs rounded border border-border bg-background text-text-primary hover:bg-surface-elevated disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+              onClick={form.goToPrevTab}
+              disabled={form.activeTab === 0}
+              tabIndex={-1}
+            >
+              ← Prev
+            </button>
+            <button
+              className="px-3 py-1.5 text-xs rounded border border-border bg-background text-text-primary hover:bg-surface-elevated disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+              onClick={form.goToNextTab}
+              disabled={form.activeTab === questions.length - 1}
+              tabIndex={-1}
+            >
+              Next →
+            </button>
+          </>
+        )}
+        <button
+          onClick={onSkip}
+          className="px-4 py-1.5 rounded border border-border bg-background text-text-secondary text-xs hover:bg-surface-elevated transition-colors"
+          tabIndex={-1}
+        >
+          Skip
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={!form.allAnswered}
+          className="px-4 py-1.5 rounded bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/80 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          tabIndex={-1}
+        >
+          Submit {form.allAnswered ? "✓" : `(${questions.filter((_, i) => form.hasAnswer(i)).length}/${questions.length})`}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/web/components/database/connection-form-dialog.tsx

@@ -3,6 +3,7 @@ import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { BrowseButton } from "@/components/ui/browse-button";
 import { ConnectionColorPicker } from "./connection-color-picker";
 import type { Connection, CreateConnectionData, UpdateConnectionData } from "./use-connections";
 
@@ -161,12 +162,20 @@ export function ConnectionFormDialog({
           ) : (
             <div>
               <label className="text-xs font-medium text-text-secondary mb-1 block">File Path *</label>
-              <input
-                value={form.path}
-                onChange={(e) => set("path", e.target.value)}
-                placeholder="/path/to/database.db"
-                className="w-full h-8 text-sm px-2.5 rounded-md border border-border bg-background focus:outline-none focus:border-primary font-mono"
-              />
+              <div className="flex gap-1.5 items-center">
+                <input
+                  value={form.path}
+                  onChange={(e) => set("path", e.target.value)}
+                  placeholder="/path/to/database.db"
+                  className="flex-1 h-8 text-sm px-2.5 rounded-md border border-border bg-background focus:outline-none focus:border-primary font-mono"
+                />
+                <BrowseButton
+                  mode="file"
+                  accept={[".db", ".sqlite", ".sqlite3"]}
+                  title="Browse for SQLite database"
+                  onSelect={(path) => set("path", path)}
+                />
+              </div>
             </div>
           )}
 

package/src/web/components/database/connection-import-export.tsx

@@ -0,0 +1,116 @@
+import { useRef, useState } from "react";
+import { MoreVertical, Download, Upload, Clipboard, ClipboardPaste } from "lucide-react";
+
+interface Props {
+  onExport: () => Promise<{ version: number; exported_at: string; connections: unknown[] }>;
+  onImport: (data: { connections: unknown[] }) => Promise<{ imported: number; skipped: number; errors: string[] }>;
+}
+
+export function ConnectionImportExport({ onExport, onImport }: Props) {
+  const [open, setOpen] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const close = () => setOpen(false);
+
+  const handleExportFile = async () => {
+    close();
+    try {
+      const data = await onExport();
+      const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `ppm-connections-${new Date().toISOString().slice(0, 10)}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      alert(`Export failed: ${(e as Error).message}`);
+    }
+  };
+
+  const handleExportClipboard = async () => {
+    close();
+    try {
+      const data = await onExport();
+      await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+      alert(`Copied ${data.connections.length} connection(s) to clipboard`);
+    } catch (e) {
+      alert(`Export failed: ${(e as Error).message}`);
+    }
+  };
+
+  const doImport = async (json: string) => {
+    try {
+      const data = JSON.parse(json);
+      const conns = data.connections ?? data;
+      if (!Array.isArray(conns)) { alert("Invalid format: expected connections array"); return; }
+      const result = await onImport({ connections: conns });
+      let msg = `Imported ${result.imported} connection(s)`;
+      if (result.skipped > 0) msg += `, ${result.skipped} skipped`;
+      if (result.errors?.length > 0) msg += `\n\nErrors:\n${result.errors.join("\n")}`;
+      alert(msg);
+    } catch (e) {
+      alert(`Import failed: ${(e as Error).message}`);
+    }
+  };
+
+  const handleImportFile = () => {
+    close();
+    fileRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => doImport(reader.result as string);
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+
+  const handleImportClipboard = async () => {
+    close();
+    try {
+      const text = await navigator.clipboard.readText();
+      if (!text.trim()) { alert("Clipboard is empty"); return; }
+      await doImport(text);
+    } catch (e) {
+      alert(`Clipboard read failed: ${(e as Error).message}`);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center justify-center size-5 rounded hover:bg-surface-elevated transition-colors text-text-subtle hover:text-foreground"
+        title="Import / Export"
+      >
+        <MoreVertical className="size-3.5" />
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={close} />
+          <div className="absolute right-0 top-full mt-1 z-50 w-44 bg-background border border-border rounded-md shadow-lg py-1 text-xs">
+            <button onClick={handleExportFile} className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-surface-elevated transition-colors text-left">
+              <Download className="size-3" /> Export to file
+            </button>
+            <button onClick={handleExportClipboard} className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-surface-elevated transition-colors text-left">
+              <Clipboard className="size-3" /> Export to clipboard
+            </button>
+            <div className="border-t border-border my-1" />
+            <button onClick={handleImportFile} className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-surface-elevated transition-colors text-left">
+              <Upload className="size-3" /> Import from file
+            </button>
+            <button onClick={handleImportClipboard} className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-surface-elevated transition-colors text-left">
+              <ClipboardPaste className="size-3" /> Import from clipboard
+            </button>
+          </div>
+        </>
+      )}
+
+      <input ref={fileRef} type="file" accept=".json" className="hidden" onChange={handleFileChange} />
+    </div>
+  );
+}

package/src/web/components/database/database-sidebar.tsx

@@ -3,10 +3,11 @@ import { Plus } from "lucide-react";
 import { useTabStore } from "@/stores/tab-store";
 import { ConnectionList } from "./connection-list";
 import { ConnectionFormDialog } from "./connection-form-dialog";
+import { ConnectionImportExport } from "./connection-import-export";
 import { useConnections, type Connection, type CreateConnectionData, type UpdateConnectionData } from "./use-connections";
 
 export function DatabaseSidebar() {
-  const { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables } = useConnections();
+  const { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables, exportConnections, importConnections } = useConnections();
   const openTab = useTabStore((s) => s.openTab);
   const [addOpen, setAddOpen] = useState(false);
   const [editConn, setEditConn] = useState<Connection | null>(null);
@@ -41,13 +42,16 @@ export function DatabaseSidebar() {
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
         <span className="text-[10px] font-semibold text-text-subtle uppercase tracking-wider">Database</span>
-        <button
-          onClick={() => setAddOpen(true)}
-          className="flex items-center justify-center size-5 rounded hover:bg-surface-elevated transition-colors text-text-subtle hover:text-foreground"
-          title="Add connection"
-        >
-          <Plus className="size-3.5" />
-        </button>
+        <div className="flex items-center gap-0.5">
+          <ConnectionImportExport onExport={exportConnections} onImport={importConnections} />
+          <button
+            onClick={() => setAddOpen(true)}
+            className="flex items-center justify-center size-5 rounded hover:bg-surface-elevated transition-colors text-text-subtle hover:text-foreground"
+            title="Add connection"
+          >
+            <Plus className="size-3.5" />
+          </button>
+        </div>
       </div>
 
       {/* Connection list */}

package/src/web/components/database/use-connections.ts

@@ -88,5 +88,17 @@ export function useConnections() {
     setCachedTables((prev) => new Map(prev).set(id, tables));
   }, []);
 
-  return { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables };
+  const exportConnections = useCallback(async () => {
+    return api.get<{ version: number; exported_at: string; connections: unknown[] }>("/api/db/connections/export");
+  }, []);
+
+  const importConnections = useCallback(async (data: { connections: unknown[] }) => {
+    const result = await api.post<{ imported: number; skipped: number; errors: string[]; connections: Connection[] }>(
+      "/api/db/connections/import", data,
+    );
+    await fetchConnections();
+    return result;
+  }, [fetchConnections]);
+
+  return { connections, loading, cachedTables, createConnection, updateConnection, deleteConnection, testConnection, refreshTables, exportConnections, importConnections };
 }

package/src/web/components/layout/add-project-form.tsx

@@ -3,6 +3,7 @@ import { Loader2, FolderOpen } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";
 import { api } from "@/lib/api-client";
 import { cn } from "@/lib/utils";
+import { BrowseButton } from "@/components/ui/browse-button";
 
 interface SuggestedDir {
   path: string;
@@ -83,19 +84,29 @@ export function AddProjectForm({ onSuccess, onCancel, footerClassName }: AddProj
       {/* Path input with suggestions */}
       <div ref={wrapperRef} className="relative">
         <label className="block text-xs font-medium text-foreground mb-1">Project path</label>
-        <div className="relative flex items-center">
-          <FolderOpen className="absolute left-2.5 size-3.5 text-text-subtle pointer-events-none" />
-          <input
-            type="text"
-            value={path}
-            onChange={(e) => { setPath(e.target.value); setError(""); }}
-            onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
-            placeholder="/path/to/project"
-            className="w-full pl-8 pr-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-1 focus:ring-primary"
-            autoFocus
-            autoComplete="off"
+        <div className="flex gap-1.5 items-center">
+          <div className="relative flex items-center flex-1">
+            <FolderOpen className="absolute left-2.5 size-3.5 text-text-subtle pointer-events-none" />
+            <input
+              type="text"
+              value={path}
+              onChange={(e) => { setPath(e.target.value); setError(""); }}
+              onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+              placeholder="/path/to/project"
+              className="w-full pl-8 pr-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+              autoFocus
+              autoComplete="off"
+            />
+            {loading && <Loader2 className="absolute right-2.5 size-3.5 text-text-subtle animate-spin" />}
+          </div>
+          <BrowseButton
+            mode="folder"
+            onSelect={(selectedPath) => {
+              setPath(selectedPath);
+              if (!name) setName(selectedPath.split("/").pop() ?? "");
+              setError("");
+            }}
           />
-          {loading && <Loader2 className="absolute right-2.5 size-3.5 text-text-subtle animate-spin" />}
         </div>
 
         {/* Suggestions dropdown */}

package/src/web/components/layout/command-palette.tsx

@@ -137,8 +137,8 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     };
 
     return [
-      { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action" },
       { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action" },
+      { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action" },
       { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action" },
       { id: "postgres", label: "PostgreSQL", icon: Database, action: openNewTab("postgres", "PostgreSQL"), keywords: "database pg sql query", group: "action" },
       { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action" },

package/src/web/components/layout/draggable-tab.tsx

@@ -3,12 +3,15 @@ import { X } from "lucide-react";
 import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { isDarkColor } from "@/lib/color-utils";
+import { notificationColor } from "@/stores/notification-store";
 
 interface DraggableTabProps {
   tab: Tab;
   isActive: boolean;
   icon: React.ElementType;
   showDropBefore: boolean;
+  /** Notification type if unread (null = no unread). Controls badge color. */
+  notificationType?: string | null;
   onSelect: () => void;
   onClose: () => void;
   onDragStart: (e: React.DragEvent) => void;
@@ -20,7 +23,7 @@ interface DraggableTabProps {
 }
 
 export function DraggableTab({
-  tab, isActive, icon: Icon, showDropBefore, onSelect, onClose,
+  tab, isActive, icon: Icon, showDropBefore, notificationType, onSelect, onClose,
   onDragStart, onDragOver, onDragEnd, tabRef, onRename,
 }: DraggableTabProps) {
   const [editing, setEditing] = useState(false);
@@ -74,7 +77,12 @@ export function DraggableTab({
           colorStyle && "border-transparent",
         )}
       >
-        <Icon className="size-4" />
+        <span className="relative">
+          <Icon className="size-4" />
+          {notificationType && !isActive && (
+            <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notificationType))} />
+          )}
+        </span>
         {editing ? (
           <input
             ref={inputRef}