@hienlh/ppm 0.1.0

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

@@ -0,0 +1,139 @@
+import { useState, useEffect, useCallback } from "react";
+import { api, projectUrl } from "@/lib/api-client";
+import { Plus, Trash2, MessageSquare, ChevronDown } from "lucide-react";
+import type { SessionInfo } from "../../../types/chat";
+
+interface SessionPickerProps {
+  currentSessionId: string | null;
+  onSelectSession: (session: SessionInfo) => void;
+  onNewSession: () => void;
+  projectName?: string;
+}
+
+export function SessionPicker({
+  currentSessionId,
+  onSelectSession,
+  onNewSession,
+  projectName,
+}: SessionPickerProps) {
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const loadSessions = useCallback(async () => {
+    if (!projectName) return;
+    setLoading(true);
+    try {
+      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
+      setSessions(data);
+    } catch {
+      // Silently fail — sessions list is non-critical
+    } finally {
+      setLoading(false);
+    }
+  }, [projectName]);
+
+  useEffect(() => {
+    loadSessions();
+  }, [loadSessions]);
+
+  // Reload when dropdown opens
+  useEffect(() => {
+    if (open) loadSessions();
+  }, [open, loadSessions]);
+
+  const currentSession = sessions.find((s) => s.id === currentSessionId);
+
+  const handleDelete = async (e: React.MouseEvent, session: SessionInfo) => {
+    e.stopPropagation();
+    try {
+      if (!projectName) return;
+      await api.del(
+        `${projectUrl(projectName)}/chat/sessions/${session.id}?providerId=${session.providerId}`,
+      );
+      setSessions((prev) => prev.filter((s) => s.id !== session.id));
+    } catch {
+      // Silently fail
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 text-sm text-text-secondary hover:text-text-primary transition-colors px-2 py-1 rounded hover:bg-surface-elevated"
+      >
+        <MessageSquare className="size-3.5" />
+        <span className="truncate max-w-[150px]">
+          {currentSession?.title ?? "Select chat"}
+        </span>
+        <ChevronDown className="size-3" />
+      </button>
+
+      {open && (
+        <>
+          {/* Backdrop */}
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+
+          <div className="absolute bottom-full left-0 mb-1 z-50 w-64 rounded-lg border border-border bg-surface shadow-lg overflow-hidden">
+            {/* New chat button */}
+            <button
+              onClick={() => {
+                onNewSession();
+                setOpen(false);
+              }}
+              className="flex items-center gap-2 w-full px-3 py-2 text-sm text-primary hover:bg-surface-elevated transition-colors border-b border-border"
+            >
+              <Plus className="size-4" />
+              <span>New Chat</span>
+            </button>
+
+            {/* Sessions list */}
+            <div className="max-h-60 overflow-y-auto">
+              {loading && (
+                <p className="px-3 py-2 text-xs text-text-subtle animate-pulse">
+                  Loading sessions...
+                </p>
+              )}
+              {!loading && sessions.length === 0 && (
+                <p className="px-3 py-2 text-xs text-text-subtle">
+                  No sessions yet
+                </p>
+              )}
+              {sessions.map((session) => (
+                <div
+                  key={session.id}
+                  onClick={() => {
+                    onSelectSession(session);
+                    setOpen(false);
+                  }}
+                  className={`flex items-center justify-between px-3 py-2 text-sm cursor-pointer hover:bg-surface-elevated transition-colors ${
+                    session.id === currentSessionId
+                      ? "bg-surface-elevated text-text-primary"
+                      : "text-text-secondary"
+                  }`}
+                >
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="truncate text-xs font-medium">
+                      {session.title}
+                    </span>
+                    <span className="text-xs text-text-subtle">
+                      {new Date(session.createdAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <button
+                    onClick={(e) => handleDelete(e, session)}
+                    className="p-1 rounded hover:bg-red-500/20 text-text-subtle hover:text-red-400 transition-colors shrink-0"
+                    aria-label="Delete session"
+                  >
+                    <Trash2 className="size-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/web/components/chat/slash-command-picker.tsx

@@ -0,0 +1,135 @@
+import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
+import { Sparkles, Terminal } from "lucide-react";
+
+export interface SlashItem {
+  type: "skill" | "command";
+  name: string;
+  description: string;
+  argumentHint?: string;
+  scope?: "project" | "user";
+}
+
+interface SlashCommandPickerProps {
+  items: SlashItem[];
+  filter: string;
+  onSelect: (item: SlashItem) => void;
+  onClose: () => void;
+  visible: boolean;
+}
+
+export function SlashCommandPicker({
+  items,
+  filter,
+  onSelect,
+  onClose,
+  visible,
+}: SlashCommandPickerProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const filtered = items.filter((item) => {
+    const q = filter.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(q) ||
+      item.description.toLowerCase().includes(q)
+    );
+  });
+
+  // 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.type}-${item.name}`}
+            className={`flex items-start gap-3 w-full px-3 py-2 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 mt-0.5">
+              {item.type === "skill" ? (
+                <Sparkles className="size-4 text-amber-500" />
+              ) : (
+                <Terminal className="size-4 text-blue-500" />
+              )}
+            </span>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-baseline gap-2">
+                <span className="font-medium text-sm">/{item.name}</span>
+                {item.argumentHint && (
+                  <span className="text-xs text-text-subtle">{item.argumentHint}</span>
+                )}
+                <span className="text-xs text-text-subtle capitalize ml-auto">
+                  {item.scope === "user" ? "global" : item.type}
+                </span>
+              </div>
+              {item.description && (
+                <p className="text-xs text-text-subtle mt-0.5 line-clamp-2">
+                  {item.description}
+                </p>
+              )}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/web/components/chat/usage-badge.tsx

@@ -0,0 +1,186 @@
+import { Activity, RefreshCw } from "lucide-react";
+import type { UsageInfo, LimitBucket } from "../../../types/chat";
+
+interface UsageBadgeProps {
+  usage: UsageInfo;
+  onClick?: () => void;
+}
+
+function pctColor(pct: number): string {
+  if (pct >= 90) return "text-red-500";
+  if (pct >= 70) return "text-amber-500";
+  return "text-green-500";
+}
+
+function barColor(pct: number): string {
+  if (pct >= 90) return "bg-red-500";
+  if (pct >= 70) return "bg-amber-500";
+  return "bg-green-500";
+}
+
+export function UsageBadge({ usage, onClick }: UsageBadgeProps) {
+  const fiveHourPct = usage.fiveHour != null ? Math.round(usage.fiveHour * 100) : null;
+  const sevenDayPct = usage.sevenDay != null ? Math.round(usage.sevenDay * 100) : null;
+
+  const fiveHourLabel = fiveHourPct != null ? `${fiveHourPct}%` : "--%";
+  const sevenDayLabel = sevenDayPct != null ? `${sevenDayPct}%` : "--%";
+
+  const worstPct = Math.max(fiveHourPct ?? 0, sevenDayPct ?? 0);
+  const colorClass = fiveHourPct != null || sevenDayPct != null ? pctColor(worstPct) : "text-text-subtle";
+
+  return (
+    <button
+      onClick={onClick}
+      className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium tabular-nums transition-colors hover:bg-surface-hover ${colorClass}`}
+      title="Click for usage details"
+    >
+      <Activity className="size-3" />
+      <span>5h:{fiveHourLabel}</span>
+      <span className="text-text-subtle">·</span>
+      <span>Wk:{sevenDayLabel}</span>
+    </button>
+  );
+}
+
+// --- Detail panel ---
+
+interface UsageDetailPanelProps {
+  usage: UsageInfo;
+  visible: boolean;
+  onClose: () => void;
+  onReload?: () => void;
+  loading?: boolean;
+}
+
+function formatResetTime(bucket?: LimitBucket): string | null {
+  if (!bucket) return null;
+  // Compute total minutes from whichever field is available
+  let totalMins: number | null = null;
+  if (bucket.resetsInMinutes != null) {
+    totalMins = bucket.resetsInMinutes;
+  } else if (bucket.resetsInHours != null) {
+    totalMins = Math.round(bucket.resetsInHours * 60);
+  } else if (bucket.resetsAt) {
+    const diff = new Date(bucket.resetsAt).getTime() - Date.now();
+    totalMins = diff > 0 ? Math.ceil(diff / 60_000) : 0;
+  }
+  if (totalMins == null) return null;
+  if (totalMins <= 0) return "now";
+  const d = Math.floor(totalMins / 1440);
+  const h = Math.floor((totalMins % 1440) / 60);
+  const m = totalMins % 60;
+  if (d > 0) return m > 0 ? `${d}d ${h}h ${m}m` : h > 0 ? `${d}d ${h}h` : `${d}d`;
+  if (h > 0) return m > 0 ? `${h}h ${m}m` : `${h}h`;
+  return `${m}m`;
+}
+
+function statusLabel(status?: string): { text: string; color: string } | null {
+  if (!status) return null;
+  switch (status) {
+    case "ahead_of_pace": return { text: "Ahead of pace", color: "text-green-500" };
+    case "behind_pace": return { text: "Behind pace", color: "text-amber-500" };
+    case "on_pace": return { text: "On pace", color: "text-text-subtle" };
+    default: return { text: status.replace(/_/g, " "), color: "text-text-subtle" };
+  }
+}
+
+function BucketRow({ label, bucket }: { label: string; bucket?: LimitBucket }) {
+  if (!bucket) return null;
+  const pct = Math.round(bucket.utilization * 100);
+  const reset = formatResetTime(bucket);
+  const status = statusLabel(bucket.status);
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-text-primary">{label}</span>
+        <div className="flex items-center gap-2">
+          {status && (
+            <span className={`text-[10px] ${status.color}`}>{status.text}</span>
+          )}
+          {reset && (
+            <span className="text-[10px] text-text-subtle">↻ {reset}</span>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="flex-1 h-2 rounded-full bg-border overflow-hidden">
+          <div
+            className={`h-full rounded-full transition-all ${barColor(pct)}`}
+            style={{ width: `${Math.min(pct, 100)}%` }}
+          />
+        </div>
+        <span className={`text-xs font-medium tabular-nums w-10 text-right ${pctColor(pct)}`}>
+          {pct}%
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function UsageDetailPanel({ usage, visible, onClose, onReload, loading }: UsageDetailPanelProps) {
+  if (!visible) return null;
+
+  const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
+  const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
+
+  return (
+    <div className="border-b border-border bg-surface px-3 py-2.5 space-y-2.5">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-semibold text-text-primary">Usage Limits</span>
+        <div className="flex items-center gap-1">
+          {onReload && (
+            <button
+              onClick={onReload}
+              disabled={loading}
+              className="text-xs text-text-subtle hover:text-text-primary px-1 disabled:opacity-50"
+              title="Refresh usage data"
+            >
+              <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="text-xs text-text-subtle hover:text-text-primary px-1"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+
+      {hasBuckets ? (
+        <div className="space-y-2.5">
+          <BucketRow label="5-Hour Session" bucket={usage.session} />
+          <BucketRow label="Weekly" bucket={usage.weekly} />
+          <BucketRow label="Weekly (Opus)" bucket={usage.weeklyOpus} />
+          <BucketRow label="Weekly (Sonnet)" bucket={usage.weeklySonnet} />
+        </div>
+      ) : (
+        <p className="text-xs text-text-subtle">
+          No data — run <code className="bg-surface-elevated px-1 rounded">bun install</code>
+        </p>
+      )}
+
+      {hasCost && (
+        <div className="border-t border-border pt-2 space-y-1">
+          {usage.queryCostUsd != null && (
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-text-subtle">Last query</span>
+              <span className="text-text-primary font-medium tabular-nums">
+                ${usage.queryCostUsd.toFixed(4)}
+              </span>
+            </div>
+          )}
+          {usage.totalCostUsd != null && (
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-text-subtle">Session total</span>
+              <span className="text-text-primary font-medium tabular-nums">
+                ${usage.totalCostUsd.toFixed(4)}
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}