@hienlh/ppm 0.1.0

package/src/web/components/auth/login-screen.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { setAuthToken } from "@/lib/api-client";
+import { Lock, AlertCircle } from "lucide-react";
+
+interface LoginScreenProps {
+  onSuccess: () => void;
+}
+
+export function LoginScreen({ onSuccess }: LoginScreenProps) {
+  const [token, setToken] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!token.trim()) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Store token first, then validate via auth check
+      setAuthToken(token.trim());
+      const res = await fetch("/api/auth/check", {
+        headers: { Authorization: `Bearer ${token.trim()}` },
+      });
+      const json = await res.json();
+
+      if (!json.ok) {
+        throw new Error(json.error ?? "Invalid token");
+      }
+
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Authentication failed");
+      // Clear invalid token
+      localStorage.removeItem("ppm-auth-token");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-sm bg-surface rounded-lg border border-border p-6 space-y-6">
+        <div className="text-center space-y-2">
+          <div className="flex items-center justify-center size-12 mx-auto rounded-full bg-surface-elevated">
+            <Lock className="size-6 text-primary" />
+          </div>
+          <h1 className="text-xl font-semibold text-foreground">PPM</h1>
+          <p className="text-sm text-text-secondary">
+            Enter your auth token to unlock
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Input
+              type="password"
+              placeholder="Auth token"
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              className="h-11 bg-background border-border"
+              autoFocus
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-center gap-2 text-error text-sm">
+              <AlertCircle className="size-4 shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          <Button
+            type="submit"
+            disabled={loading || !token.trim()}
+            className="w-full h-11"
+          >
+            {loading ? "Checking..." : "Unlock"}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/web/components/chat/attachment-chips.tsx

@@ -0,0 +1,55 @@
+import { X, FileText, Image as ImageIcon, Loader2 } from "lucide-react";
+import type { ChatAttachment } from "./message-input";
+
+interface AttachmentChipsProps {
+  attachments: ChatAttachment[];
+  onRemove: (id: string) => void;
+}
+
+export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps) {
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-1.5 px-3 pt-2">
+      {attachments.map((att) => (
+        <div
+          key={att.id}
+          className="flex items-center gap-1.5 rounded-md border border-border bg-surface px-2 py-1 text-xs text-text-secondary max-w-48"
+        >
+          {/* Thumbnail or icon */}
+          {att.previewUrl ? (
+            <img
+              src={att.previewUrl}
+              alt={att.name}
+              className="size-5 rounded object-cover shrink-0"
+            />
+          ) : att.isImage ? (
+            <ImageIcon className="size-3.5 shrink-0 text-text-subtle" />
+          ) : (
+            <FileText className="size-3.5 shrink-0 text-text-subtle" />
+          )}
+
+          {/* File name */}
+          <span className="truncate">{att.name}</span>
+
+          {/* Status indicator */}
+          {att.status === "uploading" ? (
+            <Loader2 className="size-3 shrink-0 animate-spin text-text-subtle" />
+          ) : att.status === "error" ? (
+            <span className="text-red-500 shrink-0" title="Upload failed">!</span>
+          ) : null}
+
+          {/* Remove button */}
+          <button
+            type="button"
+            onClick={() => onRemove(att.id)}
+            className="shrink-0 rounded-sm p-0.5 hover:bg-border/50 transition-colors"
+            aria-label={`Remove ${att.name}`}
+          >
+            <X className="size-3" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/web/components/chat/chat-placeholder.tsx

@@ -0,0 +1,10 @@
+import { MessageSquare } from "lucide-react";
+
+export function ChatPlaceholder() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
+      <MessageSquare className="size-10 text-text-subtle" />
+      <p className="text-sm">AI Chat — coming in Phase 7</p>
+    </div>
+  );
+}

package/src/web/components/chat/chat-tab.tsx

@@ -0,0 +1,301 @@
+import { useState, useCallback, useRef, useEffect, type DragEvent } from "react";
+import { Upload } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { useChat } from "@/hooks/use-chat";
+import { useTabStore } from "@/stores/tab-store";
+import { useProjectStore } from "@/stores/project-store";
+import { MessageList } from "./message-list";
+import { MessageInput, type ChatAttachment } from "./message-input";
+import { SessionPicker } from "./session-picker";
+import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
+import { FilePicker } from "./file-picker";
+import { UsageBadge, UsageDetailPanel } from "./usage-badge";
+import type { FileNode } from "../../../types/project";
+import type { Session, SessionInfo } from "../../../types/chat";
+
+interface ChatTabProps {
+  metadata?: Record<string, unknown>;
+  tabId?: string;
+}
+
+export function ChatTab({ metadata, tabId }: ChatTabProps) {
+  const [sessionId, setSessionId] = useState<string | null>(
+    (metadata?.sessionId as string) ?? null,
+  );
+  const [providerId, setProviderId] = useState<string>(
+    (metadata?.providerId as string) ?? "claude-sdk",
+  );
+
+  // Slash picker state
+  const [slashItems, setSlashItems] = useState<SlashItem[]>([]);
+  const [showSlashPicker, setShowSlashPicker] = useState(false);
+  const [slashFilter, setSlashFilter] = useState("");
+  const [slashSelected, setSlashSelected] = useState<SlashItem | null>(null);
+
+  // File picker state
+  const [fileItems, setFileItems] = useState<FileNode[]>([]);
+  const [showFilePicker, setShowFilePicker] = useState(false);
+  const [fileFilter, setFileFilter] = useState("");
+  const [fileSelected, setFileSelected] = useState<FileNode | null>(null);
+
+  // Usage detail panel
+  const [showUsageDetail, setShowUsageDetail] = useState(false);
+
+  // Drag-and-drop state
+  const [isDragging, setIsDragging] = useState(false);
+  const [externalFiles, setExternalFiles] = useState<File[] | null>(null);
+  const dragCounterRef = useRef(0);
+
+  const activeProject = useProjectStore((s) => s.activeProject);
+  const updateTab = useTabStore((s) => s.updateTab);
+
+  // Persist sessionId and providerId to tab metadata so reload restores the session
+  useEffect(() => {
+    if (!tabId || !sessionId) return;
+    updateTab(tabId, {
+      metadata: { ...metadata, sessionId, providerId },
+    });
+  }, [sessionId, providerId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const {
+    messages,
+    messagesLoading,
+    isStreaming,
+    pendingApproval,
+    usageInfo,
+    usageLoading,
+    sendMessage,
+    respondToApproval,
+    cancelStreaming,
+    refreshUsage,
+    isConnected,
+  } = useChat(sessionId, providerId, activeProject?.name ?? "");
+
+  const handleNewSession = useCallback(() => {
+    const projectName = activeProject?.name ?? null;
+    useTabStore.getState().openTab({
+      type: "chat",
+      title: "AI Chat",
+      metadata: { projectName },
+      projectId: projectName,
+      closable: true,
+    });
+  }, [activeProject?.name]);
+
+  const handleSelectSession = useCallback((session: SessionInfo) => {
+    setSessionId(session.id);
+    setProviderId(session.providerId);
+  }, []);
+
+  /** Build message content with file references prepended */
+  const buildMessageWithAttachments = useCallback(
+    (content: string, attachments: ChatAttachment[]): string => {
+      if (attachments.length === 0) return content;
+
+      const fileRefs = attachments
+        .filter((a) => a.serverPath)
+        .map((a) => a.serverPath!)
+        .join("\n");
+
+      if (!fileRefs) return content;
+
+      // Prepend file paths so Claude Code can read them
+      const prefix = attachments.length === 1
+        ? `[Attached file: ${fileRefs}]\n\n`
+        : `[Attached files:\n${fileRefs}\n]\n\n`;
+
+      return prefix + content;
+    },
+    [],
+  );
+
+  const handleSend = useCallback(
+    async (content: string, attachments: ChatAttachment[] = []) => {
+      const fullContent = buildMessageWithAttachments(content, attachments);
+      if (!fullContent.trim()) return;
+
+      if (!sessionId) {
+        try {
+          const pName = activeProject?.name ?? (metadata?.project as string) ?? "";
+          const session = await api.post<Session>(`${projectUrl(pName)}/chat/sessions`, {
+            providerId,
+            title: content.slice(0, 50),
+          });
+          setSessionId(session.id);
+          setProviderId(session.providerId);
+          setTimeout(() => {
+            sendMessage(fullContent);
+          }, 500);
+          return;
+        } catch (e) {
+          console.error("Failed to create session:", e);
+          return;
+        }
+      }
+      sendMessage(fullContent);
+    },
+    [sessionId, providerId, metadata?.project, sendMessage, buildMessageWithAttachments, activeProject?.name],
+  );
+
+  // --- Slash picker handlers ---
+  const handleSlashStateChange = useCallback((visible: boolean, filter: string) => {
+    setShowSlashPicker(visible);
+    setSlashFilter(filter);
+  }, []);
+
+  const handleSlashSelect = useCallback((item: SlashItem) => {
+    setSlashSelected(item);
+    setShowSlashPicker(false);
+    setSlashFilter("");
+    setTimeout(() => setSlashSelected(null), 50);
+  }, []);
+
+  const handleSlashClose = useCallback(() => {
+    setShowSlashPicker(false);
+    setSlashFilter("");
+  }, []);
+
+  // --- File picker handlers ---
+  const handleFileStateChange = useCallback((visible: boolean, filter: string) => {
+    setShowFilePicker(visible);
+    setFileFilter(filter);
+  }, []);
+
+  const handleFileSelect = useCallback((item: FileNode) => {
+    setFileSelected(item);
+    setShowFilePicker(false);
+    setFileFilter("");
+    setTimeout(() => setFileSelected(null), 50);
+  }, []);
+
+  const handleFileClose = useCallback(() => {
+    setShowFilePicker(false);
+    setFileFilter("");
+  }, []);
+
+  // --- Drag-and-drop on entire chat area ---
+  const handleDragEnter = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    dragCounterRef.current++;
+    if (e.dataTransfer.types.includes("Files")) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDrop = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    dragCounterRef.current = 0;
+    setIsDragging(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      setExternalFiles(files);
+      // Reset after a tick so the effect fires even with same files
+      setTimeout(() => setExternalFiles(null), 100);
+    }
+  }, []);
+
+  return (
+    <div
+      className="flex flex-col h-full relative"
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {/* Drag overlay */}
+      {isDragging && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm border-2 border-dashed border-primary rounded-lg pointer-events-none">
+          <div className="flex flex-col items-center gap-2 text-primary">
+            <Upload className="size-8" />
+            <span className="text-sm font-medium">Drop files to attach</span>
+          </div>
+        </div>
+      )}
+
+      {/* Messages */}
+      <MessageList
+        messages={messages}
+        messagesLoading={messagesLoading}
+        pendingApproval={pendingApproval}
+        onApprovalResponse={respondToApproval}
+        isStreaming={isStreaming}
+        projectName={activeProject?.name}
+      />
+
+      {/* Bottom toolbar */}
+      <div className="border-t border-border bg-background shrink-0">
+        {/* Session bar */}
+        <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50">
+          <SessionPicker
+            currentSessionId={sessionId}
+            onSelectSession={handleSelectSession}
+            onNewSession={handleNewSession}
+            projectName={activeProject?.name}
+          />
+          <div className="flex items-center gap-2">
+            <UsageBadge
+              usage={usageInfo}
+              onClick={() => setShowUsageDetail((v) => !v)}
+            />
+            {isConnected && (
+              <span className="size-2 rounded-full bg-green-500" title="Connected" />
+            )}
+          </div>
+        </div>
+
+        {/* Usage detail panel (in-flow) */}
+        <UsageDetailPanel
+          usage={usageInfo}
+          visible={showUsageDetail}
+          onClose={() => setShowUsageDetail(false)}
+          onReload={refreshUsage}
+          loading={usageLoading}
+        />
+
+        {/* Pickers (in-flow, above input — only one visible at a time) */}
+        <SlashCommandPicker
+          items={slashItems}
+          filter={slashFilter}
+          onSelect={handleSlashSelect}
+          onClose={handleSlashClose}
+          visible={showSlashPicker}
+        />
+        <FilePicker
+          items={fileItems}
+          filter={fileFilter}
+          onSelect={handleFileSelect}
+          onClose={handleFileClose}
+          visible={showFilePicker}
+        />
+
+        {/* Input */}
+        <MessageInput
+          onSend={handleSend}
+          isStreaming={isStreaming}
+          onCancel={cancelStreaming}
+          projectName={activeProject?.name}
+          onSlashStateChange={handleSlashStateChange}
+          onSlashItemsLoaded={setSlashItems}
+          slashSelected={slashSelected}
+          onFileStateChange={handleFileStateChange}
+          onFileItemsLoaded={setFileItems}
+          fileSelected={fileSelected}
+          externalFiles={externalFiles}
+        />
+      </div>
+    </div>
+  );
+}

package/src/web/components/chat/file-picker.tsx

@@ -0,0 +1,126 @@
+import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
+import { File, Folder } from "lucide-react";
+import type { FileNode } from "../../../types/project";
+
+interface FilePickerProps {
+  items: FileNode[];
+  filter: string;
+  onSelect: (item: FileNode) => void;
+  onClose: () => void;
+  visible: boolean;
+}
+
+/** Flatten a FileNode tree into a flat list of files and directories. */
+export function flattenFileTree(nodes: FileNode[]): FileNode[] {
+  const result: FileNode[] = [];
+  function walk(list: FileNode[]) {
+    for (const node of list) {
+      result.push(node);
+      if (node.children) walk(node.children);
+    }
+  }
+  walk(nodes);
+  return result;
+}
+
+export function FilePicker({
+  items,
+  filter,
+  onSelect,
+  onClose,
+  visible,
+}: FilePickerProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const filtered = (() => {
+    if (!filter) return items.slice(0, 50);
+    const q = filter.toLowerCase();
+    return items
+      .filter((node) => node.path.toLowerCase().includes(q) || node.name.toLowerCase().includes(q))
+      .slice(0, 50);
+  })();
+
+  // Reset selection when filter changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filter]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const selected = list.children[selectedIndex] as HTMLElement | undefined;
+    selected?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent | globalThis.KeyboardEvent) => {
+      if (!visible || filtered.length === 0) return false;
+
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((i) => (i > 0 ? i - 1 : filtered.length - 1));
+          return true;
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((i) => (i < filtered.length - 1 ? i + 1 : 0));
+          return true;
+        case "Enter":
+        case "Tab":
+          e.preventDefault();
+          if (filtered[selectedIndex]) {
+            onSelect(filtered[selectedIndex]);
+          }
+          return true;
+        case "Escape":
+          e.preventDefault();
+          onClose();
+          return true;
+      }
+      return false;
+    },
+    [visible, filtered, selectedIndex, onSelect, onClose],
+  );
+
+  // Global keyboard handler (captures before textarea)
+  useEffect(() => {
+    if (!visible) return;
+    const handler = (e: globalThis.KeyboardEvent) => {
+      handleKeyDown(e);
+    };
+    document.addEventListener("keydown", handler, true);
+    return () => document.removeEventListener("keydown", handler, true);
+  }, [visible, handleKeyDown]);
+
+  if (!visible || filtered.length === 0) return null;
+
+  return (
+    <div className="max-h-52 overflow-y-auto border-b border-border bg-surface">
+      <div ref={listRef} className="py-1">
+        {filtered.map((item, i) => (
+          <button
+            key={item.path}
+            className={`flex items-center gap-2 w-full px-3 py-1.5 text-left transition-colors ${
+              i === selectedIndex
+                ? "bg-primary/10 text-primary"
+                : "hover:bg-surface-hover text-text-primary"
+            }`}
+            onMouseEnter={() => setSelectedIndex(i)}
+            onClick={() => onSelect(item)}
+          >
+            <span className="shrink-0">
+              {item.type === "directory" ? (
+                <Folder className="size-4 text-amber-500" />
+              ) : (
+                <File className="size-4 text-blue-400" />
+              )}
+            </span>
+            <span className="text-sm truncate">{item.path}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}