@kabmo-labs/kabmo 0.0.0-stage → 0.1.0

package/src/client/components/workspace/user-browser-panel/AddressBar.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { ArrowLeft, ArrowRight, Globe, RefreshCw } from 'lucide-preact';
+import { BrowserToolbar } from '@/client/components/workspace/browser-toolbar/index';
+import type { ViewportMode } from '@/shared/types';
+
+interface UserBrowserAddressBarProps {
+  url: string;
+  input: string;
+  loading: boolean;
+  error?: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  viewportMode: ViewportMode;
+  zoomLevel: number;
+  onInputChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+  onBack: () => void;
+  onForward: () => void;
+  onReload: () => void;
+  onOpenExternal: () => void;
+  onIncludeInChat: () => void;
+  onChangeViewport: (mode: ViewportMode) => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onResetZoom: () => void;
+  onSetZoom: (zoom: number) => void;
+}
+
+type UserBrowserPhase = 'idle' | 'loading' | 'ready';
+
+const PHASE_LABEL: Record<UserBrowserPhase, string> = {
+  idle: 'Kosong',
+  loading: 'Memuat',
+  ready: 'Siap',
+};
+
+const NAV_BUTTON =
+  'p-1 rounded hover:bg-ink/5 disabled:opacity-25 disabled:hover:bg-transparent text-ink/70 hover:text-ink cursor-pointer disabled:cursor-not-allowed transition-colors';
+
+/** Toolbar for the user's iframe browser: status, history, address, and display controls. */
+export function UserBrowserAddressBar({
+  url,
+  input,
+  loading,
+  error,
+  canGoBack,
+  canGoForward,
+  viewportMode,
+  zoomLevel,
+  onInputChange,
+  onSubmit,
+  onBack,
+  onForward,
+  onReload,
+  onOpenExternal,
+  onIncludeInChat,
+  onChangeViewport,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onSetZoom,
+}: UserBrowserAddressBarProps) {
+  const followedRef = useRef<string | undefined>(undefined);
+
+  // Mirror the loaded URL into the field, but never overwrite active typing.
+  useEffect(() => {
+    if (followedRef.current === url) return;
+    followedRef.current = url;
+    if (url) onInputChange(url);
+  }, [url, onInputChange]);
+
+  const phase: UserBrowserPhase = !url ? 'idle' : loading ? 'loading' : 'ready';
+  const dotClass =
+    phase === 'ready' ? 'bg-success animate-pulse' : phase === 'loading' ? 'bg-ink/40 animate-pulse' : 'bg-ink/25';
+
+  const navControls = (
+    <div className="flex items-center bg-canvas border border-ink/10 rounded-md p-0.5 space-x-0.5 flex-shrink-0">
+      <button type="button" onClick={onBack} disabled={!canGoBack} aria-label="Kembali" title="Kembali" className={NAV_BUTTON}>
+        <ArrowLeft size={12} />
+      </button>
+      <button type="button" onClick={onForward} disabled={!canGoForward} aria-label="Maju" title="Maju" className={NAV_BUTTON}>
+        <ArrowRight size={12} />
+      </button>
+      <button type="button" onClick={onReload} disabled={!url} aria-label="Muat ulang" title="Muat ulang" className={NAV_BUTTON}>
+        <RefreshCw size={12} className={loading ? 'animate-spin' : undefined} />
+      </button>
+    </div>
+  );
+
+  return (
+    <BrowserToolbar
+      url={url}
+      statusDotClass={dotClass}
+      statusLabel={PHASE_LABEL[phase]}
+      viewportMode={viewportMode}
+      zoomLevel={zoomLevel}
+      onChangeViewport={onChangeViewport}
+      onZoomIn={onZoomIn}
+      onZoomOut={onZoomOut}
+      onResetZoom={onResetZoom}
+      onSetZoom={onSetZoom}
+      onIncludeInChat={onIncludeInChat}
+      onOpenExternal={onOpenExternal}
+      openExternalLabel="Buka di tab baru"
+      openExternalTitle="Buka di tab baru (untuk situs yang menolak iframe)"
+    >
+      <div className="flex items-center flex-1 min-w-0 space-x-1.5">
+        {navControls}
+        <form
+          className={`flex-1 min-w-0 flex items-center bg-canvas border rounded-md px-2 py-0.5 space-x-1 focus-within:border-ink/40 ${error ? 'border-error' : 'border-ink/15'}`}
+          onSubmit={(event) => {
+            event.preventDefault();
+            onSubmit(input);
+          }}
+        >
+          <Globe size={12} className="text-ink/40 flex-shrink-0" />
+          <input
+            type="text"
+            value={input}
+            onChange={(event) => onInputChange(event.currentTarget.value)}
+            placeholder="Ketik alamat (mis. localhost:5173) lalu Enter…"
+            aria-label="Alamat browser pengguna"
+            aria-invalid={error !== undefined && error !== null}
+            title={error ?? undefined}
+            spellcheck={false}
+            autoComplete="off"
+            className={`w-full min-w-0 bg-transparent outline-none font-mono text-[11px] placeholder:text-ink/30 ${error ? 'text-error' : 'text-ink/90'}`}
+          />
+        </form>
+      </div>
+    </BrowserToolbar>
+  );
+}
+

package/src/client/components/workspace/user-browser-panel/Frame.tsx

@@ -0,0 +1,72 @@
+import { Globe, Loader2 } from 'lucide-preact';
+import { VIEWPORT_CLASSES } from '@/client/components/common/viewport';
+import type { ViewportMode } from '@/shared/types';
+
+interface UserBrowserFrameProps {
+  url: string;
+  frameKey: number;
+  loading: boolean;
+  viewportMode: ViewportMode;
+  zoomLevel: number;
+  onLoad: () => void;
+  /** False while the panel is hidden: no iframe is mounted, so a background
+   *  page cannot keep loading scripts or animating behind the panel. */
+  active?: boolean;
+}
+
+const ALLOW = 'clipboard-read; clipboard-write; fullscreen';
+
+/**
+ * The user's browsing surface: a plain iframe. Interaction (scroll, click,
+ * typing, cookies, logins) is the browser's own, so this costs nothing to keep
+ * mounted. Cross-origin pages cannot read this app, and vice versa.
+ */
+export function UserBrowserFrame({ url, frameKey, loading, viewportMode, zoomLevel, onLoad, active = true }: UserBrowserFrameProps) {
+  if (!active) return null;
+  if (!url) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center p-6 text-center select-none">
+        <div className="w-12 h-12 rounded-xl bg-ink/5 border border-ink/10 flex items-center justify-center text-ink/40 mb-3">
+          <Globe size={22} />
+        </div>
+        <h3 className="text-sm font-semibold text-ink mb-1">Browser Anda</h3>
+        <p className="text-xs text-ink/60 max-w-sm">
+          Ketik alamat di atas lalu Enter. Halaman dimuat langsung di panel ini.
+        </p>
+        <p className="text-[11px] text-ink/45 max-w-sm mt-2">
+          Sebagian situs (Google, GitHub) menolak ditampilkan dalam iframe — pakai tombol buka di tab baru.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 min-h-0 relative flex items-center justify-center p-2 overflow-auto bg-canvas/60">
+      {loading ? (
+        <div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
+          <div className="flex items-center space-x-2 px-3 py-1.5 rounded-md bg-paper border border-ink/15">
+            <Loader2 size={13} className="animate-spin text-ink/50" />
+            <span className="text-[11px] font-mono text-ink/60">Memuat…</span>
+          </div>
+        </div>
+      ) : null}
+      <div
+        className={`relative flex flex-col bg-white ${VIEWPORT_CLASSES[viewportMode]} transition-all duration-200`}
+        style={{
+          zoom: zoomLevel !== 100 ? `${zoomLevel}%` : undefined,
+          transformOrigin: 'top center',
+        }}
+      >
+        <iframe
+          key={frameKey}
+          src={url}
+          title="Browser pengguna"
+          onLoad={onLoad}
+          referrerPolicy="no-referrer"
+          allow={ALLOW}
+          className="w-full h-full bg-white border-0"
+        />
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/user-browser-panel/index.tsx

@@ -0,0 +1,87 @@
+import { useCallback } from 'preact/hooks';
+import { UserBrowserAddressBar } from '@/client/components/workspace/user-browser-panel/AddressBar';
+import { UserBrowserFrame } from '@/client/components/workspace/user-browser-panel/Frame';
+import { useUserBrowser } from '@/client/hooks/browser/use-user-browser';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { emitBrowserPageContext } from '@/shared/lib/browser/page-context';
+import type { ViewportMode } from '@/shared/types';
+
+interface UserBrowserPanelProps {
+  className?: string;
+  /** False while the panel is hidden: pauses the iframe's live loading. */
+  active?: boolean;
+}
+
+/**
+ * The user's own browser: a plain iframe, so scrolling, clicking, typing, and
+ * logins are the browser's native behaviour and cost nothing on our side.
+ *
+ * It is private to the user — the omp agent has no handle to this frame. Sites
+ * that forbid embedding (Google, GitHub) show an empty frame; the toolbar's
+ * open-in-new-tab action is the escape hatch for those.
+ */
+export function UserBrowserPanel({ className = '', active = true }: UserBrowserPanelProps) {
+  const [viewportMode, setViewportMode] = useSessionState<ViewportMode>('userBrowser.viewportMode', 'responsive');
+  const [zoomLevel, setZoomLevel] = useSessionState<number>('userBrowser.zoomLevel', 100);
+  const {
+    url,
+    input,
+    setInput,
+    frameKey,
+    loading,
+    error,
+    canGoBack,
+    canGoForward,
+    submit,
+    goBack,
+    goForward,
+    reload,
+    markLoaded,
+  } = useUserBrowser();
+
+  const handleOpenExternal = useCallback(() => {
+    if (!url) return;
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }, [url]);
+
+  const handleIncludeInChat = useCallback(() => {
+    if (!url) return;
+    emitBrowserPageContext({ url });
+  }, [url]);
+
+  return (
+    <div className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}>
+      <UserBrowserAddressBar
+        url={url}
+        input={input}
+        loading={loading}
+        error={error}
+        canGoBack={canGoBack}
+        canGoForward={canGoForward}
+        viewportMode={viewportMode}
+        zoomLevel={zoomLevel}
+        onInputChange={setInput}
+        onSubmit={submit}
+        onBack={goBack}
+        onForward={goForward}
+        onReload={reload}
+        onOpenExternal={handleOpenExternal}
+        onIncludeInChat={handleIncludeInChat}
+        onChangeViewport={setViewportMode}
+        onZoomIn={() => setZoomLevel((prev) => Math.min(200, prev + 10))}
+        onZoomOut={() => setZoomLevel((prev) => Math.max(50, prev - 10))}
+        onResetZoom={() => setZoomLevel(100)}
+        onSetZoom={setZoomLevel}
+      />
+      <UserBrowserFrame
+        url={url}
+        frameKey={frameKey}
+        loading={loading}
+        viewportMode={viewportMode}
+        zoomLevel={zoomLevel}
+        onLoad={markLoaded}
+        active={active}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/wiki-panel/Nav.tsx

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The wiki's navigation, rendered from its OWN `_Sidebar.md` when it has one.
+ *
+ * A sidebar is the author's navigation — its grouping, order and labels — so the
+ * panel draws that rather than re-deriving a tree from the file layout. GitLab's
+ * `### 📋 Changelogs` group and its `v1.6.0` labels are the author's; a list
+ * built from folder names would show `CHANGE_LOGS` and `v1.6.0` in a different
+ * order, and would lose the group entirely. A wiki without a sidebar (drawio's)
+ * gets the folder-grouped fallback, so the panel never renders nothing.
+ *
+ * A link whose target is not in this wiki's tree is shown as inert text: it is
+ * the author's dangling reference, and pretending it navigates would be worse
+ * than showing it dimmed. An absolute one opens in the browser.
+ */
+
+import { useMemo, useState } from 'preact/hooks';
+import { ExternalLink, Search } from 'lucide-preact';
+import type { WikiNavSection } from '@/shared/types/wiki';
+
+interface WikiNavProps {
+  sections: readonly WikiNavSection[];
+  selected: string | null;
+  onSelect: (path: string) => void;
+}
+
+export function WikiNav({ sections, selected, onSelect }: WikiNavProps) {
+  const [query, setQuery] = useState('');
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return sections;
+    return sections
+      .map((section) => ({
+        ...section,
+        links: section.links.filter(
+          (link) =>
+            link.label.toLowerCase().includes(needle) || (link.path ?? link.target).toLowerCase().includes(needle),
+        ),
+      }))
+      .filter((section) => section.links.length > 0);
+  }, [sections, query]);
+
+  const hasLinks = sections.some((section) => section.links.length > 0);
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col bg-canvas/40">
+      <div className="flex items-center gap-1.5 border-b border-ink/10 px-2 py-1.5 flex-shrink-0">
+        <Search size={11} className="flex-shrink-0 text-ink/40" />
+        <input
+          type="text"
+          value={query}
+          onChange={(event) => setQuery(event.currentTarget.value)}
+          placeholder="Filter pages…"
+          title="Filter wiki pages"
+          className="w-full min-w-0 bg-transparent text-xs text-ink outline-none placeholder-ink/40"
+        />
+        {query && (
+          <button type="button" onClick={() => setQuery('')} title="Clear filter" className="flex-shrink-0 text-ink/40 hover:text-ink">
+            ×
+          </button>
+        )}
+      </div>
+
+      <div
+        className="flex-1 min-h-0 overflow-y-auto scrollbar-overlay-container"
+      >
+        {filtered.length === 0 ? (
+          <p className="px-3 py-2 text-[11px] italic text-ink/40">
+            {hasLinks ? 'No page matches the filter' : 'This wiki has no pages'}
+          </p>
+        ) : (
+          filtered.map((section, index) => (
+            <div key={`${section.title ?? 'links'}-${index}`} className="py-0.5">
+              {section.title && (
+                <div className="px-2.5 py-1 text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">
+                  {section.title}
+                </div>
+              )}
+              {section.links.map((link, linkIndex) => {
+                const isSelected = link.path !== null && link.path === selected;
+                const key = `${link.path ?? link.target}-${linkIndex}`;
+                if (link.path) {
+                  return (
+                    <button
+                      key={key}
+                      type="button"
+                      onClick={() => onSelect(link.path as string)}
+                      title={link.path}
+                      aria-current={isSelected ? 'page' : undefined}
+                      className={`flex w-full items-center gap-1 px-2.5 py-1 text-left text-xs transition-colors ${
+                        isSelected ? 'bg-ink/8 font-medium text-ink' : 'text-ink/70 hover:bg-ink/5 hover:text-ink'
+                      }`}
+                    >
+                      <span className="truncate">{link.label}</span>
+                    </button>
+                  );
+                }
+                if (link.url) {
+                  return (
+                    <a
+                      key={key}
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      title={link.url}
+                      className="flex w-full items-center gap-1 px-2.5 py-1 text-left text-xs text-ink/70 hover:bg-ink/5 hover:text-ink"
+                    >
+                      <span className="truncate">{link.label}</span>
+                      <ExternalLink size={10} className="flex-shrink-0 text-ink/30" />
+                    </a>
+                  );
+                }
+                // A target that is not in this wiki: shown, dimmed, inert.
+                return (
+                  <div
+                    key={key}
+                    title={`Not in this wiki: ${link.target}`}
+                    className="flex w-full items-center px-2.5 py-1 text-left text-xs text-ink/35 line-through decoration-ink/20"
+                  >
+                    <span className="truncate">{link.label}</span>
+                  </div>
+                );
+              })}
+              {section.notes.map((note, noteIndex) => (
+                <p key={`note-${noteIndex}`} className="px-2.5 py-0.5 text-[10px] leading-snug text-ink/50">
+                  {note}
+                </p>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/wiki-panel/PageView.tsx

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One wiki page: breadcrumbs, then the page rendered through the app's own
+ * markdown pipeline.
+ *
+ * The renderer is the chat timeline's, in its `wikiScope` mode — so a page gets
+ * the same sanitizing, syntax highlighting, KaTeX and mermaid hydration a
+ * message gets, and its `[[Page]]` links expand and resolve into this wiki. That
+ * sharing is the point: a wiki that documented a diagram in a ```mermaid fence
+ * would otherwise show its source.
+ */
+
+import { useMemo } from 'preact/hooks';
+import { AlertCircle, ArrowLeft, ExternalLink, Loader2 } from 'lucide-preact';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import type { WikiEntry, WikiPagePayload, WikiRepoInfo } from '@/shared/types/wiki';
+
+interface WikiPageViewProps {
+  repo: WikiRepoInfo;
+  entries: readonly WikiEntry[];
+  path: string;
+  page: WikiPagePayload | null;
+  isLoading: boolean;
+  error: string | null;
+  rootPath?: string;
+  repoScope: string;
+  onNavigate: (path: string) => void;
+  onBack: () => void;
+}
+
+/** Web URL of one page, for "open on the host". Null for an unknown provider. */
+function pageWebUrl(repo: WikiRepoInfo, path: string): string | null {
+  if (!repo.webUrl) return null;
+  const name = path.split('/').pop() ?? path;
+  const title = name.replace(/\.(md|markdown)$/i, '');
+  // GitHub's page URL takes the title; GitLab's takes the slug it stores.
+  return repo.provider === 'gitlab'
+    ? `${repo.webUrl.replace(/\/home$/, '')}/${encodeURIComponent(path.replace(/\.(md|markdown)$/i, ''))}`
+    : `${repo.webUrl}/${encodeURIComponent(title)}`;
+}
+
+export function WikiPageView({
+  repo,
+  entries,
+  path,
+  page,
+  isLoading,
+  error,
+  rootPath,
+  repoScope,
+  onNavigate,
+  onBack,
+}: WikiPageViewProps) {
+  const externalUrl = pageWebUrl(repo, path);
+
+  // Stable identity: a new object per render re-parses the whole page.
+  const wikiScope = useMemo(
+    () => ({ path, entries, root: rootPath, repo: repoScope }),
+    [path, entries, rootPath, repoScope],
+  );
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col bg-paper">
+      <div className="flex flex-shrink-0 items-center gap-1.5 border-b border-ink/10 px-2.5 py-1.5">
+        <button
+          type="button"
+          onClick={onBack}
+          title="Back to the page list"
+          aria-label="Back to the page list"
+          className="flex-shrink-0 rounded p-1 text-ink/60 hover:bg-ink/5 hover:text-ink @[520px]:hidden"
+        >
+          <ArrowLeft size={13} />
+        </button>
+        <span className="min-w-0 flex-1 truncate text-[11px] text-ink/50" title={path}>
+          {path}
+        </span>
+        {isLoading && <Loader2 size={12} className="flex-shrink-0 animate-spin text-ink/40" />}
+        {externalUrl && (
+          <a
+            href={externalUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Open this page on the wiki host"
+            aria-label="Open this page on the wiki host"
+            className="flex-shrink-0 rounded p-1 text-ink/60 hover:bg-ink/5 hover:text-ink"
+          >
+            <ExternalLink size={13} />
+          </a>
+        )}
+      </div>
+
+      <div
+        className="flex-1 min-h-0 overflow-y-auto scrollbar-overlay-container"
+      >
+        {error ? (
+          <div className="flex flex-col items-center gap-2 px-6 py-8 text-center">
+            <AlertCircle size={16} className="text-error" />
+            <p className="text-xs text-error">{error}</p>
+          </div>
+        ) : !page ? (
+          <div className="px-6 py-8 text-center text-xs text-ink/40">
+            {isLoading ? 'Loading page…' : 'No page selected'}
+          </div>
+        ) : (
+          <article className="mx-auto max-w-4xl px-5 py-4">
+            <MarkdownRenderer
+              content={page.content}
+              className="max-w-none"
+              wikiScope={wikiScope}
+              onWikiNavigate={onNavigate}
+            />
+            {page.truncated && (
+              <p className="mt-4 border-t border-ink/10 pt-2 text-[11px] text-ink/50">
+                This page is longer than the reader's budget and was cut off.
+              </p>
+            )}
+          </article>
+        )}
+      </div>
+    </div>
+  );
+}