ompchamber 0.3.0

package/src/client/components/settings/categories/usage-settings/QuotaSection.tsx

@@ -0,0 +1,93 @@
+import { Ticket } from 'lucide-preact';
+import type { KenariCoupon, KenariQuota, KenariQuotaWindow } from '@/shared/types';
+import { formatDateTime, formatPercent, formatRp, usedPercent } from '@/client/components/settings/categories/usage-settings/format';
+
+interface QuotaWindowRowProps {
+  window: KenariQuotaWindow;
+}
+
+function QuotaWindowRow({ window }: QuotaWindowRowProps) {
+  const total = window.usedRp + window.remainingRp;
+  const percent = usedPercent(window.usedRp, total);
+
+  return (
+    <div className="bg-paper border border-ink/15 rounded-lg p-3 shadow-xs space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[11px] font-semibold text-ink">{window.label}</span>
+        <span className="text-[10px] text-ink/50">Resets {formatDateTime(window.resetsAt)}</span>
+      </div>
+      <div className="h-1.5 w-full bg-ink/10 rounded-full overflow-hidden">
+        <div className="h-full bg-ink/80 rounded-full" style={{ width: `${percent}%` }} />
+      </div>
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-0.5 text-[10px] text-ink/60">
+        <span>
+          Used <span className="font-semibold text-ink">{formatRp(window.usedRp)}</span> ·{' '}
+          {formatPercent(window.usedRp, total)}
+        </span>
+        <span>
+          Remaining <span className="font-semibold text-ink">{formatRp(window.remainingRp)}</span>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function CouponBlock({ coupon }: { coupon: KenariCoupon }) {
+  return (
+    <div className="bg-ink/5 border border-ink/10 rounded-lg p-3 shadow-xs">
+      <div className="flex items-center gap-1.5 mb-1.5">
+        <Ticket size={12} className="text-ink/60" />
+        <span className="text-[11px] font-semibold text-ink">Active coupon · {coupon.name}</span>
+      </div>
+      <div className="text-[10px] text-ink/60 space-y-0.5">
+        <div>
+          Remaining{' '}
+          <span className="font-semibold text-ink">
+            {coupon.remainingRp === null ? 'Unlimited' : formatRp(coupon.remainingRp)}
+          </span>{' '}
+          · Used <span className="font-semibold text-ink">{formatRp(coupon.usedRp)}</span>
+        </div>
+        <div>Expires {formatDateTime(coupon.expiresAt)}</div>
+        {coupon.scopeModels.length > 0 && <div>Models: {coupon.scopeModels.join(', ')}</div>}
+      </div>
+    </div>
+  );
+}
+
+interface QuotaSectionProps {
+  quota?: KenariQuota;
+}
+
+/** Plan windows (used vs remaining, local reset time) plus the active coupon. */
+export function QuotaSection({ quota }: QuotaSectionProps) {
+  if (!quota) {
+    return <p className="text-[11px] text-ink/50">Quota data is not available for this account.</p>;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <h4 className="text-[10px] font-mono font-semibold uppercase tracking-wider text-ink/40">
+          Quota windows
+        </h4>
+        {quota.planName && (
+          <span className="text-[10px] text-ink/60">
+            Plan <span className="font-semibold text-ink">{quota.planName}</span>
+          </span>
+        )}
+      </div>
+
+      {quota.windows.length === 0 ? (
+        <p className="text-[11px] text-ink/50">No quota windows reported.</p>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+          {quota.windows.map((window) => (
+            <QuotaWindowRow key={window.key} window={window} />
+          ))}
+        </div>
+      )}
+
+      {quota.coupon && <CouponBlock coupon={quota.coupon} />}
+    </div>
+  );
+}

package/src/client/components/settings/categories/usage-settings/SidebarList.tsx

@@ -0,0 +1,77 @@
+import { Bot, Coins } from 'lucide-preact';
+import type { UsageReport } from '@/shared/types';
+import { buildProviders, statusLabel, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+
+interface UsageSidebarListProps {
+  report: UsageReport;
+  selectedProviderId: UsageProviderId;
+  onSelectProvider: (providerId: UsageProviderId) => void;
+}
+
+export function UsageSidebarList({
+  report,
+  selectedProviderId,
+  onSelectProvider,
+}: UsageSidebarListProps) {
+  const providers = buildProviders(report);
+
+  return (
+    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
+      <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between">
+        <span className="text-xs font-semibold text-ink">Total {providers.length} providers</span>
+      </div>
+
+      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-1.5 space-y-3 text-xs">
+        <div>
+          <div className="px-2.5 pt-1.5 pb-1 text-[10px] font-bold text-ink/50 uppercase tracking-wider">
+            Providers
+          </div>
+          <div className="space-y-0.5">
+            {providers.map((provider) => {
+              const isSelected = provider.id === selectedProviderId;
+              const isConnected = provider.configured && !provider.error;
+              const Icon = provider.id === 'kenari' ? Coins : Bot;
+
+              return (
+                <button
+                  key={provider.id}
+                  type="button"
+                  onClick={() => onSelectProvider(provider.id)}
+                  className={`w-full text-left px-2.5 py-2 rounded-lg transition-colors cursor-pointer flex flex-col gap-0.5 group ${
+                    isSelected
+                      ? 'bg-ink/10 text-ink font-medium shadow-2xs'
+                      : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
+                  }`}
+                >
+                  <div className="flex items-center justify-between gap-1.5">
+                    <div className="flex items-center gap-1.5 min-w-0">
+                      <div className="relative">
+                        <Icon
+                          className={`w-3.5 h-3.5 flex-shrink-0 ${isSelected ? 'text-ink/80' : 'text-ink/60'}`}
+                        />
+                        <span
+                          className={`absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full ${
+                            isConnected ? 'bg-ink' : 'bg-ink/20'
+                          }`}
+                        />
+                      </div>
+                      <span className="font-semibold text-xs text-ink truncate">{provider.name}</span>
+                    </div>
+                    <span
+                      className={`text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 font-medium ${
+                        provider.error ? 'text-error' : 'text-ink/70'
+                      }`}
+                    >
+                      {statusLabel(provider)}
+                    </span>
+                  </div>
+                  <p className="text-[11px] text-ink/60 line-clamp-1 leading-snug pl-5">{provider.hint}</p>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/usage-settings/UsageTable.tsx

@@ -0,0 +1,66 @@
+import type { KenariUsage } from '@/shared/types';
+import { formatCompactTokens, formatNumber, formatRp } from '@/client/components/settings/categories/usage-settings/format';
+
+interface UsageTableProps {
+  usage?: KenariUsage;
+}
+
+/** 30-day kenari usage per model, with a totals footer. */
+export function UsageTable({ usage }: UsageTableProps) {
+  if (!usage) {
+    return <p className="text-[11px] text-ink/50">The 30-day usage report is not available.</p>;
+  }
+
+  const totalInput = usage.rows.reduce((sum, row) => sum + row.inputTokens, 0);
+  const totalOutput = usage.rows.reduce((sum, row) => sum + row.outputTokens, 0);
+
+  return (
+    <div className="space-y-2">
+      <h4 className="text-[10px] font-mono font-semibold uppercase tracking-wider text-ink/40">
+        30-day usage by model
+      </h4>
+
+      <div className="overflow-x-auto border border-ink/15 rounded-lg shadow-xs">
+        <table className="w-full text-[11px]">
+          <thead className="bg-ink/5 text-ink/60">
+            <tr>
+              <th className="text-left font-semibold px-3 py-2 whitespace-nowrap">Model</th>
+              <th className="text-right font-semibold px-3 py-2 whitespace-nowrap">Requests</th>
+              <th className="text-right font-semibold px-3 py-2 whitespace-nowrap">Input tokens</th>
+              <th className="text-right font-semibold px-3 py-2 whitespace-nowrap">Output tokens</th>
+              <th className="text-right font-semibold px-3 py-2 whitespace-nowrap">Cost</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-ink/10">
+            {usage.rows.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-3 py-3 text-center text-ink/50">
+                  No usage recorded in the last 30 days.
+                </td>
+              </tr>
+            ) : (
+              usage.rows.map((row) => (
+                <tr key={row.model}>
+                  <td className="px-3 py-1.5 font-mono text-ink whitespace-nowrap">{row.model}</td>
+                  <td className="px-3 py-1.5 text-right tabular-nums text-ink/80">{formatNumber(row.requests)}</td>
+                  <td className="px-3 py-1.5 text-right tabular-nums text-ink/80">{formatCompactTokens(row.inputTokens)}</td>
+                  <td className="px-3 py-1.5 text-right tabular-nums text-ink/80">{formatCompactTokens(row.outputTokens)}</td>
+                  <td className="px-3 py-1.5 text-right tabular-nums text-ink/80">{formatRp(row.costRp)}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+          <tfoot className="bg-ink/5 border-t border-ink/15 font-semibold text-ink">
+            <tr>
+              <td className="px-3 py-2">Total</td>
+              <td className="px-3 py-2 text-right tabular-nums">{formatNumber(usage.totalRequests)}</td>
+              <td className="px-3 py-2 text-right tabular-nums">{formatCompactTokens(totalInput)}</td>
+              <td className="px-3 py-2 text-right tabular-nums">{formatCompactTokens(totalOutput)}</td>
+              <td className="px-3 py-2 text-right tabular-nums">{formatRp(usage.totalCostRp)}</td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/usage-settings/format.ts

@@ -0,0 +1,63 @@
+/** Pure formatters for the Settings → Usage panel. */
+
+const rupiahFormatter = new Intl.NumberFormat('id-ID', {
+  style: 'currency',
+  currency: 'IDR',
+  maximumFractionDigits: 0,
+});
+
+const numberFormatter = new Intl.NumberFormat('id-ID');
+
+const compactDecimalFormatter = new Intl.NumberFormat('id-ID', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+  useGrouping: false,
+});
+
+const dateTimeFormatter = new Intl.DateTimeFormat('id-ID', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+});
+
+export function formatRp(value: number): string {
+  return rupiahFormatter.format(value);
+}
+
+export function formatNumber(value: number): string {
+  return numberFormatter.format(value);
+}
+
+/** Formats an RFC 3339 timestamp in the local timezone; falls back to the raw string. */
+export function formatDateTime(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return dateTimeFormatter.format(date);
+}
+
+/** Percentage of `used` out of `total`, clamped to 0–100 for progress bars. */
+export function usedPercent(used: number, total: number): number {
+  if (total <= 0) return 0;
+  return Math.min(100, Math.max(0, (used / total) * 100));
+}
+
+export function formatPercent(used: number, total: number): string {
+  if (total <= 0) return '0%';
+  return `${new Intl.NumberFormat('id-ID', { maximumFractionDigits: 1 }).format((used / total) * 100)}%`;
+}
+
+/** Compact token counts: 1124214260 → "1,12B"; 747642928 → "747,64M"; 61950 → "61,95K"; 950 → "950". */
+export function formatCompactTokens(value: number): string {
+  if (!Number.isFinite(value)) return '0';
+  const abs = Math.abs(value);
+  if (abs >= 1_000_000_000) return `${compactDecimalFormatter.format(value / 1_000_000_000)}B`;
+  if (abs >= 1_000_000) return `${compactDecimalFormatter.format(value / 1_000_000)}M`;
+  if (abs >= 1_000) return `${compactDecimalFormatter.format(value / 1_000)}K`;
+  return formatNumber(value);
+}
+
+/** Formats a numeric string returned by the DeepSeek balance API. */
+export function formatAmount(value: string): string {
+  const parsed = Number(value);
+  if (value.trim() === '' || !Number.isFinite(parsed)) return value;
+  return formatNumber(parsed);
+}

package/src/client/components/settings/categories/usage-settings/providers.ts

@@ -0,0 +1,45 @@
+import type { UsageReport } from '@/shared/types';
+import { formatAmount } from '@/client/components/settings/categories/usage-settings/format';
+
+/** Providers surfaced in the Settings → Usage sidebar and the Usage right panel. */
+export type UsageProviderId = 'kenari' | 'deepseek';
+
+export interface ProviderEntry {
+  id: UsageProviderId;
+  name: string;
+  configured: boolean;
+  error?: string;
+  hint: string;
+}
+
+/** Derives the provider list (status + hint) from a usage report. */
+export function buildProviders(report: UsageReport): ProviderEntry[] {
+  const kenariBalance = report.kenari.quota?.planName;
+  const deepseekEntry = report.deepseek.balance?.entries[0];
+
+  return [
+    {
+      id: 'kenari',
+      name: 'Kenari.id',
+      configured: report.kenari.configured,
+      error: report.kenari.error,
+      hint: kenariBalance ?? 'Wallet & quota',
+    },
+    {
+      id: 'deepseek',
+      name: 'DeepSeek',
+      configured: report.deepseek.configured,
+      error: report.deepseek.error,
+      hint: deepseekEntry
+        ? `${deepseekEntry.currency} ${formatAmount(deepseekEntry.totalBalance)}`
+        : 'Prepaid balance',
+    },
+  ];
+}
+
+/** Human-readable connection state for a provider entry. */
+export function statusLabel(provider: ProviderEntry): string {
+  if (!provider.configured) return 'Not configured';
+  if (provider.error) return 'Error';
+  return 'Connected';
+}

package/src/client/components/workspace/SearchPanel.tsx

@@ -0,0 +1,259 @@
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { CaseSensitive, Check, MoreHorizontal, Regex, Replace, ReplaceAll, Search, WholeWord } from 'lucide-preact';
+import { FileIcon } from '@/client/components/common/file-icon';
+import { useFetcher } from '@/client/lib/router/fetcher';
+import { GitRepoDropdown } from '@/client/components/workspace/file-explorer/GitRepoDropdown';
+import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useSearchStream } from '@/client/hooks/workspace/search-stream';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+export function SearchPanel({ className = '', enabled = true, rootPath }: { className?: string, enabled?: boolean, rootPath?: string }) {
+  useSyntaxReady();
+  const [query, setQuery] = useSessionState<string>('search.query', '');
+  const [replaceQuery, setReplaceQuery] = useSessionState<string>('search.replaceQuery', '');
+
+  const [matchCase, setMatchCase] = useSessionState<boolean>('search.matchCase', false);
+  const [wholeWord, setWholeWord] = useSessionState<boolean>('search.wholeWord', false);
+  const [useRegex, setUseRegex] = useSessionState<boolean>('search.useRegex', false);
+
+  const [includeFiles, setIncludeFiles] = useSessionState<string>('search.includeFiles', '');
+  const [showMenu, setShowMenu] = useState(false);
+  const [showIncludeField, setShowIncludeField] = useSessionState<boolean>('search.showIncludeField', false);
+  const [activeRepo, setActiveRepo] = useSessionState<string>('search.activeRepo', '.');
+  
+  const menuRef = useRef<HTMLDivElement>(null);
+  const { isScrolling, handleScroll } = useScrollbarFade();
+
+  const replaceFetcher = useFetcher<{ success: boolean, results: any[] }>();
+  const { results, isSearching, start: startSearch } = useSearchStream();
+
+  useOnClickOutside(menuRef, () => setShowMenu(false));
+
+  const triggerSearch = () => {
+    if (!enabled) return;
+    if (query.trim().length > 2) {
+      return startSearch({
+        q: query,
+        matchCase: String(matchCase),
+        wholeWord: String(wholeWord),
+        useRegex: String(useRegex),
+        includeFiles: showIncludeField ? includeFiles : '',
+        ...(rootPath ? { root: rootPath } : {}),
+        ...(activeRepo !== '.' ? { repo: activeRepo } : {})
+      });
+    }
+  };
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      triggerSearch();
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [query, matchCase, wholeWord, useRegex, includeFiles, showIncludeField, rootPath, enabled, activeRepo]);
+
+  const handleReplace = (file?: string) => {
+    if (!query) return;
+    
+    // If no file specified, replace all currently found files
+    const targetFiles = file ? [file] : Object.keys(groupedResults);
+    
+    if (targetFiles.length === 0) return;
+
+    replaceFetcher.submit(
+      {
+        q: query,
+        replaceWith: replaceQuery,
+        matchCase: String(matchCase),
+        wholeWord: String(wholeWord),
+        useRegex: String(useRegex),
+        files: JSON.stringify(targetFiles),
+        ...(rootPath ? { root: rootPath } : {}),
+        ...(activeRepo !== '.' ? { repo: activeRepo } : {})
+      },
+      { method: 'POST', action: '/api/fs/replace' }
+    );
+  };
+
+  // Trigger search again after replace completes
+  useEffect(() => {
+    if (replaceFetcher.state === 'idle' && replaceFetcher.data?.success) {
+      triggerSearch();
+    }
+  }, [replaceFetcher.state, replaceFetcher.data]);
+
+  // NOTE: keep this early return below every hook — the desktop layout keeps
+  // the panel mounted (hidden) while another view is active, and a hook count
+  // that changes with `enabled` would crash React's hook dispatcher.
+  if (!enabled) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">No session selected</span>
+      </div>
+    );
+  }
+
+  const isLoading = isSearching;
+
+  const groupedResults = results.reduce((acc, curr) => {
+    if (!acc[curr.file]) acc[curr.file] = [];
+    acc[curr.file].push(curr);
+    return acc;
+  }, {} as Record<string, any[]>);
+
+  return (
+    <div className={`flex flex-col h-full bg-paper ${className}`}>
+      <div className="p-3 border-b border-ink/10 flex items-center justify-between">
+        <div className="flex items-center space-x-2 min-w-0">
+          <h2 className="text-xs font-semibold text-ink uppercase tracking-wider">Search</h2>
+          <GitRepoDropdown rootPath={rootPath} activeRepo={activeRepo} onSelectRepo={setActiveRepo} />
+        </div>
+        <div className="relative" ref={menuRef}>
+          <button 
+            onClick={() => setShowMenu(!showMenu)}
+            className={`p-1 rounded hover:bg-ink/5 transition-colors ${showMenu || showIncludeField ? 'text-ink' : 'text-ink/40'}`}
+            title="Search Options"
+          >
+            <MoreHorizontal size={14} />
+          </button>
+          
+          {showMenu && (
+            <div className="absolute right-0 top-full mt-1 w-48 bg-paper border border-ink/10 rounded shadow-lg z-10 py-1">
+              <button 
+                onClick={() => {
+                  setShowIncludeField(!showIncludeField);
+                  if (showIncludeField) setIncludeFiles('');
+                  setShowMenu(false);
+                }}
+                className="w-full px-3 py-1.5 text-left text-xs text-ink hover:bg-ink/5 flex items-center justify-between"
+              >
+                <span>Files to include</span>
+                {showIncludeField && <Check size={12} className="text-ink/60" />}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      <div className="p-3 flex flex-col gap-2.5 border-b border-ink/10">
+        <div className="relative">
+          <div className="flex items-center border border-ink/20 rounded bg-paper focus-within:border-ink/40 focus-within:ring-1 focus-within:ring-ink/10 transition-all">
+            <Search size={14} className="ml-2 text-ink/40 flex-shrink-0" />
+            <input 
+              type="text" 
+              placeholder="Search" 
+              value={query}
+              onChange={(e) => setQuery(e.currentTarget.value)}
+              className="w-full bg-transparent border-none text-xs px-2 py-1.5 focus:outline-none text-ink placeholder-ink/30 min-w-0"
+            />
+            <div className="flex items-center space-x-0.5 pr-1 text-ink/40 flex-shrink-0">
+              <button 
+                onClick={() => setMatchCase(!matchCase)}
+                className={`p-1 rounded hover:text-ink ${matchCase ? 'bg-ink/10 text-ink' : 'hover:bg-ink/5'}`} 
+                title="Match Case"
+              >
+                <CaseSensitive size={14} />
+              </button>
+              <button 
+                onClick={() => setWholeWord(!wholeWord)}
+                className={`p-1 rounded hover:text-ink ${wholeWord ? 'bg-ink/10 text-ink' : 'hover:bg-ink/5'}`} 
+                title="Match Whole Word"
+              >
+                <WholeWord size={14} />
+              </button>
+              <button 
+                onClick={() => setUseRegex(!useRegex)}
+                className={`p-1 rounded hover:text-ink ${useRegex ? 'bg-ink/10 text-ink' : 'hover:bg-ink/5'}`} 
+                title="Use Regular Expression"
+              >
+                <Regex size={14} />
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <div className="relative flex items-center space-x-1">
+          <input 
+            type="text" 
+            placeholder="Replace"
+            value={replaceQuery}
+            onChange={(e) => setReplaceQuery(e.currentTarget.value)}
+            className="flex-1 min-w-0 bg-paper border border-ink/20 rounded text-xs px-2 py-1.5 focus:outline-none focus:border-ink/40 focus:ring-1 focus:ring-ink/10 transition-all text-ink placeholder-ink/30"
+          />
+          <button 
+            onClick={() => handleReplace()}
+            disabled={results.length === 0 || replaceFetcher.state !== 'idle'}
+            className="p-1.5 rounded border border-ink/20 text-ink/60 hover:text-ink hover:bg-ink/5 disabled:opacity-50 disabled:cursor-not-allowed bg-paper"
+            title="Replace All"
+          >
+            <ReplaceAll size={14} />
+          </button>
+        </div>
+
+        {showIncludeField && (
+          <div className="relative">
+            <input 
+              type="text" 
+              value={includeFiles}
+              onChange={(e) => setIncludeFiles(e.currentTarget.value)}
+              placeholder="Files to include (e.g. *.js, src/*)"
+              className="w-full bg-paper border border-ink/20 rounded text-xs px-2 py-1.5 focus:outline-none focus:border-ink/40 focus:ring-1 focus:ring-ink/10 transition-all text-ink placeholder-ink/40"
+            />
+          </div>
+        )}
+      </div>
+      
+      <div onScroll={handleScroll} className={`flex-1 scrollbar-overlay-container px-3 py-2 text-xs ${scrollbarFadeClass(isScrolling)}`}>
+
+        {isLoading && results.length === 0 ? (
+          <div className="text-ink/40 italic text-center py-4">Searching...</div>
+        ) : query.trim().length <= 2 ? (
+          <div className="text-ink/40 italic text-center py-4">Type at least 3 characters to search.</div>
+        ) : results.length === 0 ? (
+          <div className="text-ink/40 italic text-center py-4">No results found.</div>
+        ) : (
+          <div className="space-y-4">
+            {isLoading && (
+              <div className="text-ink/40 italic">Searching…</div>
+            )}
+            {Object.entries(groupedResults).map(([file, fileResults]: [string, any]) => (
+              <div key={file}>
+                <div className="font-semibold text-ink/80 flex items-center justify-between mb-1 group">
+                  <div className="flex items-center min-w-0">
+                    <FileIcon name={file} size={12} className="mr-1.5 flex-shrink-0" />
+                    <span className="truncate">{file}</span>
+                    <span className="ml-2 bg-ink/10 text-[9px] px-1.5 py-0.5 rounded-full flex-shrink-0">{fileResults.length}</span>
+                  </div>
+                  <button
+                    onClick={() => handleReplace(file)}
+                    disabled={replaceFetcher.state !== 'idle'}
+                    className="opacity-0 group-hover:opacity-100 p-1 text-ink/40 hover:text-ink rounded hover:bg-ink/5 disabled:opacity-50 flex-shrink-0"
+                    title="Replace in this file"
+                  >
+                    <Replace size={12} />
+                  </button>
+                </div>
+                <div className="space-y-1">
+                  {fileResults.map((result: any, i: number) => (
+                    <div key={i} className="flex hover:bg-ink/5 cursor-pointer rounded px-1 py-0.5">
+                      <span className="text-ink/40 w-6 flex-shrink-0 text-right mr-2">{result.line}</span>
+                      <span
+                        className="truncate text-ink"
+                        dangerouslySetInnerHTML={{
+                          __html: highlightCode(result.content.trim(), getLanguageFromPath(file)),
+                        }}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/browser-panel/ActivityToasts.tsx

@@ -0,0 +1,46 @@
+import { Camera, CheckCircle2, CornerDownLeft, Globe, Hourglass, MousePointerClick, MoveVertical, Send, Type, Upload, XCircle, type LucideIcon } from 'lucide-preact';
+import type { BrowserActionKind, BrowserPanelAction } from '@/shared/types';
+
+const ICONS: Record<BrowserActionKind, LucideIcon> = {
+  open: Globe,
+  navigate: Globe,
+  loaded: CheckCircle2,
+  click: MousePointerClick,
+  type: Type,
+  press: CornerDownLeft,
+  submit: Send,
+  wait: Hourglass,
+  screenshot: Camera,
+  scroll: MoveVertical,
+  upload: Upload,
+  close: XCircle,
+  error: XCircle,
+};
+
+interface ActivityToastsProps {
+  actions: BrowserPanelAction[];
+}
+
+/** Transient activity toasts overlaid on the screencast. */
+export function ActivityToasts({ actions }: ActivityToastsProps) {
+  if (actions.length === 0) return null;
+  return (
+    <div className="absolute bottom-3 left-3 z-20 flex flex-col gap-1.5 pointer-events-none max-w-[320px]">
+      {actions.map((action) => {
+        const Icon = ICONS[action.kind];
+        const isError = action.kind === 'error';
+        return (
+          <div
+            key={action.id}
+            className={`flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-[11px] shadow-sm backdrop-blur-sm ${
+              isError ? 'border-error/30 bg-error/10 text-error' : 'border-ink/15 bg-paper/95 text-ink'
+            }`}
+          >
+            <Icon size={12} className={`flex-shrink-0 ${isError ? 'text-error' : 'text-ink/60'}`} />
+            <span className="truncate">{action.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}