@polderlabs/bizar 3.23.0 → 4.0.0

package/bizar-dash/src/web/MobileApp.tsx

@@ -0,0 +1,408 @@
+// src/MobileApp.tsx — mobile root with state-based routing + stack navigation.
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Activity,
+  CheckSquare,
+  Grid,
+  MessageSquare,
+  Settings as SettingsIcon,
+} from 'lucide-react';
+import { Spinner } from './components/Spinner';
+import { api } from './lib/api';
+import type { Notification, Settings, Snapshot, WsMessage } from './lib/types';
+import { applyTheme, applyThemeTokens } from './lib/types';
+import { Ws } from './lib/ws';
+import { MobileBottomNav, type MobileTab } from './mobile/MobileBottomNav';
+import { MobileTopbar } from './mobile/MobileTopbar';
+import { MobileActivity } from './mobile/views/MobileActivity';
+import { MobileAgents } from './mobile/views/MobileAgents';
+import { MobileChat } from './mobile/views/MobileChat';
+import { MobileConfig } from './mobile/views/MobileConfig';
+import { MobileHistory } from './mobile/views/MobileHistory';
+import { MobileMods } from './mobile/views/MobileMods';
+import { MobileMore } from './mobile/views/MobileMore';
+import { MobileArtifactCanvas } from './mobile/views/MobileArtifactCanvas';
+import { MobileArtifacts } from './mobile/views/MobileArtifacts';
+import { MobileSchedules } from './mobile/views/MobileSchedules';
+import { MobileSearchModal } from './mobile/views/MobileSearchModal';
+import { MobileSettings } from './mobile/views/MobileSettings';
+import { MobileSkills } from './mobile/views/MobileSkills';
+import { MobileTasks } from './mobile/views/MobileTasks';
+
+type MainTabId = 'activity' | 'chat' | 'tasks' | 'settings' | 'more';
+
+export type MobileView =
+  | { id: MainTabId }
+  | { id: 'artifacts?' }
+  | { id: 'agents' }
+  | { id: 'skills' }
+  | { id: 'mods' }
+  | { id: 'schedules' }
+  | { id: 'history' }
+  | { id: 'config' }
+  | { id: 'artifacts?-detail'; slug: string }
+  | { id: 'agent-detail'; name: string }
+  | { id: 'task-detail'; taskId: string };
+
+const MAIN_TABS: MobileTab[] = [
+  { id: 'activity', label: 'Activity', icon: Activity },
+  { id: 'chat', label: 'Chat', icon: MessageSquare },
+  { id: 'tasks', label: 'Tasks', icon: CheckSquare },
+  { id: 'settings', label: 'Settings', icon: SettingsIcon },
+  { id: 'more', label: 'More', icon: Grid },
+];
+
+function parseNotificationTarget(notification: Notification): MobileView | null {
+  const meta = notification.meta ?? {};
+  const taskId = typeof meta.taskId === 'string' ? meta.taskId : null;
+  const slug = typeof meta.slug === 'string' ? meta.slug : null;
+  const agentName = typeof meta.agent === 'string' ? meta.agent : null;
+  if (taskId) return { id: 'task-detail', taskId };
+  if (slug) return { id: 'artifacts?-detail', slug };
+  if (agentName) return { id: 'agent-detail', name: agentName };
+
+  const link = notification.link ?? '';
+  if (link.startsWith('/artifacts?/')) return { id: 'artifacts?-detail', slug: decodeURIComponent(link.slice('/artifacts?/'.length)) };
+  if (link.startsWith('/tasks/')) return { id: 'task-detail', taskId: decodeURIComponent(link.slice('/tasks/'.length)) };
+  if (link.startsWith('/agents/')) return { id: 'agent-detail', name: decodeURIComponent(link.slice('/agents/'.length)) };
+
+  return null;
+}
+
+export function MobileApp() {
+  const [activeTab, setActiveTab] = useState<MainTabId>('activity');
+  const [stack, setStack] = useState<MobileView[]>([]);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [pendingChatTaskId, setPendingChatTaskId] = useState<string | null>(null);
+  const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
+  const [settings, setSettings] = useState<Settings | null>(null);
+  const [bootError, setBootError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [wsEpoch, setWsEpoch] = useState(0);
+
+  const currentView = useMemo<MobileView>(() => {
+    return stack[stack.length - 1] ?? { id: activeTab };
+  }, [activeTab, stack]);
+
+  const pushView = useCallback((view: MobileView) => {
+    setStack((cur) => [...cur, view]);
+  }, []);
+
+  const popView = useCallback(() => {
+    setStack((cur) => cur.slice(0, -1));
+  }, []);
+
+  const goToTab = useCallback((id: MainTabId) => {
+    setStack([]);
+    setActiveTab(id);
+  }, []);
+
+  const refreshSnapshot = useCallback(async (): Promise<void> => {
+    try {
+      const next = await api.get<Snapshot>('/snapshot');
+      setSnapshot(next);
+      if (next.settings?.data) {
+        setSettings(next.settings.data);
+      }
+      setBootError(null);
+    } catch (err) {
+      setBootError((err as Error).message || 'Dashboard server unreachable.');
+      throw err;
+    }
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    Promise.all([
+      api.get<Snapshot>('/snapshot').catch(() => null),
+      api.get<{ data: Settings }>('/settings').catch(() => null),
+      api.probeAuthStatus().catch(() => null),
+    ])
+      .then(([snap, settingsResponse]) => {
+        if (cancelled) return;
+        const nextSettings = settingsResponse?.data ?? snap?.settings?.data ?? null;
+        if (snap) setSnapshot(snap);
+        if (nextSettings) setSettings(nextSettings);
+        if (!snap && !nextSettings) {
+          setBootError('Dashboard server unreachable.');
+        } else {
+          setBootError(null);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) setBootError((err as Error).message || 'Dashboard server unreachable.');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!settings?.theme) return;
+    applyTheme(settings.theme);
+    applyThemeTokens(settings.theme);
+  }, [settings?.theme]);
+
+  useEffect(() => {
+    if (settings?.theme?.mode !== 'system') return;
+    const mql = window.matchMedia('(prefers-color-scheme: light)');
+    const onChange = () => {
+      if (!settings?.theme) return;
+      applyTheme(settings.theme);
+      applyThemeTokens(settings.theme);
+    };
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, [settings?.theme]);
+
+  useEffect(() => {
+    const reconnect = () => {
+      setWsEpoch((cur) => cur + 1);
+      refreshSnapshot().catch(() => undefined);
+    };
+    const onVisibilityChange = () => {
+      if (document.visibilityState === 'visible') reconnect();
+    };
+
+    window.addEventListener('online', reconnect);
+    window.addEventListener('pageshow', reconnect);
+    document.addEventListener('visibilitychange', onVisibilityChange);
+
+    return () => {
+      window.removeEventListener('online', reconnect);
+      window.removeEventListener('pageshow', reconnect);
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+    };
+  }, [refreshSnapshot]);
+
+  useEffect(() => {
+    const ws = new Ws();
+    const offMessage = ws.on((msg: WsMessage) => {
+      if (msg.type === 'snapshot' && 'data' in msg && msg.data) {
+        setSnapshot((cur) => ({ ...(cur ?? ({} as Snapshot)), ...msg.data }));
+      } else if (msg.type === 'change') {
+        refreshSnapshot().catch(() => undefined);
+      } else if (msg.type === 'tasks:change') {
+        const nextTask = msg.task;
+        setSnapshot((cur) => {
+          if (!cur) return cur;
+          const tasks = (cur.tasks || []).map((task) => (task.id === nextTask.id ? nextTask : task));
+          const exists = tasks.some((task) => task.id === nextTask.id);
+          return { ...cur, tasks: exists ? tasks : [nextTask, ...tasks] };
+        });
+      } else if (msg.type === 'tasks:delete') {
+        setSnapshot((cur) => (
+          cur
+            ? { ...cur, tasks: (cur.tasks || []).filter((task) => task.id !== msg.id) }
+            : cur
+        ));
+      } else if (msg.type === 'settings:change') {
+        if (msg.settings) setSettings(msg.settings);
+      } else if (
+        msg.type === 'project:change' ||
+        msg.type === 'agents:change' ||
+        msg.type === 'schedules:change' ||
+        msg.type === 'artifact:change'
+      ) {
+        refreshSnapshot().catch(() => undefined);
+      } else if (msg.type === 'agent:status' || msg.type === 'agent:restarted') {
+        setSnapshot((cur) => {
+          if (!cur) return cur;
+          const agents = (cur.agents || []).map((agent) => (
+            agent.name === msg.agent.name ? msg.agent : agent
+          ));
+          return { ...cur, agents };
+        });
+      }
+    });
+
+    return () => {
+      offMessage();
+      ws.close();
+    };
+  }, [refreshSnapshot, wsEpoch]);
+
+  const handleTabChange = useCallback((id: string) => {
+    if (id === 'activity' || id === 'chat' || id === 'tasks' || id === 'settings' || id === 'more') {
+      goToTab(id);
+    }
+  }, [goToTab]);
+
+  const handleNavigate = useCallback((type: string, id: string, meta?: Record<string, unknown> | null) => {
+    if (type === 'notification') {
+      const target = parseNotificationTarget({
+        id: '',
+        ts: '',
+        severity: 'info',
+        message: '',
+        source: '',
+        link: id || null,
+        meta: meta ?? null,
+      });
+      if (target) {
+        pushView(target);
+      }
+      return;
+    }
+
+    if (type === 'task' && id) {
+      pushView({ id: 'task-detail', taskId: id });
+      return;
+    }
+    if (type === 'artifacts?' && id) {
+      pushView({ id: 'artifacts?-detail', slug: id });
+      return;
+    }
+    if (type === 'agent' && id) {
+      pushView({ id: 'agent-detail', name: id });
+      return;
+    }
+    if (type === 'project') {
+      goToTab('activity');
+      return;
+    }
+    if (type === 'setting') {
+      goToTab('settings');
+    }
+  }, [goToTab, pushView]);
+
+  const renderView = (): React.ReactNode => {
+    if (!snapshot || !settings) return null;
+
+    if (stack.length > 0) {
+      const stackedView = stack[stack.length - 1];
+      switch (stackedView.id) {
+        case 'artifacts?':
+          return <MobileArtifacts snapshot={snapshot} onBack={popView} onOpenArtifact={(slug) => pushView({ id: 'artifacts?-detail', slug })} />;
+        case 'agents':
+          return <MobileAgents snapshot={snapshot} onBack={popView} onOpenAgent={(name) => pushView({ id: 'agent-detail', name })} onRefresh={refreshSnapshot} />;
+        case 'skills':
+          return <MobileSkills snapshot={snapshot} onBack={popView} />;
+        case 'mods':
+          return <MobileMods snapshot={snapshot} onBack={popView} />;
+        case 'schedules':
+          return <MobileSchedules snapshot={snapshot} onBack={popView} />;
+        case 'history':
+          return <MobileHistory onBack={popView} />;
+        case 'config':
+          return <MobileConfig onBack={popView} />;
+        case 'artifacts?-detail':
+          return <MobileArtifactCanvas slug={stackedView.slug} onBack={popView} />;
+        case 'agent-detail':
+          return (
+            <MobileAgents
+              snapshot={snapshot}
+              onBack={popView}
+              onOpenAgent={() => undefined}
+              onRefresh={refreshSnapshot}
+              selectedAgent={stackedView.name}
+            />
+          );
+        case 'task-detail':
+          return (
+            <MobileTasks
+              snapshot={snapshot}
+              onRefresh={refreshSnapshot}
+              selectedTaskId={stackedView.taskId}
+              onCloseDetail={popView}
+              onOpenChat={(taskId) => {
+                setPendingChatTaskId(taskId);
+                goToTab('chat');
+              }}
+            />
+          );
+        default:
+          return null;
+      }
+    }
+
+    switch (activeTab) {
+      case 'activity':
+        return <MobileActivity snapshot={snapshot} onRefresh={refreshSnapshot} />;
+      case 'chat':
+        return (
+          <MobileChat
+            snapshot={snapshot}
+            settings={settings}
+            initialTaskId={pendingChatTaskId}
+            onClearTaskId={() => setPendingChatTaskId(null)}
+          />
+        );
+      case 'tasks':
+        return (
+          <MobileTasks
+            snapshot={snapshot}
+            onRefresh={refreshSnapshot}
+            onOpenChat={(taskId) => {
+              setPendingChatTaskId(taskId);
+              goToTab('chat');
+            }}
+          />
+        );
+      case 'settings':
+        return <MobileSettings settings={settings} snapshot={snapshot} onRefresh={refreshSnapshot} />;
+      case 'more':
+        return (
+          <MobileMore
+            snapshot={snapshot}
+            onNavigate={(id) => {
+              if (id === 'artifacts?' || id === 'agents' || id === 'skills' || id === 'mods' || id === 'schedules' || id === 'history' || id === 'config') {
+                pushView({ id });
+              }
+            }}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="mobile-loading">
+        <Spinner size="lg" />
+        <p>Loading Bizar…</p>
+      </div>
+    );
+  }
+
+  if (bootError || !snapshot || !settings) {
+    return (
+      <div className="mobile-loading">
+        <h2>Dashboard unavailable</h2>
+        <p>{bootError || 'Dashboard server unreachable.'}</p>
+        <p className="muted">Make sure the Bizar dashboard server is running.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mobile-app">
+      <MobileTopbar
+        activeTab={currentView.id}
+        snapshot={snapshot}
+        onSearch={() => setSearchOpen(true)}
+        onNavigate={handleNavigate}
+      />
+
+      <main className="mobile-content">{renderView()}</main>
+
+      {stack.length === 0 && (
+        <MobileBottomNav tabs={MAIN_TABS} activeTab={activeTab} onChange={handleTabChange} />
+      )}
+
+      {stack.length > 0 && (
+        <button type="button" className="mobile-back-btn" onClick={popView} aria-label="Go back">
+          ← Back
+        </button>
+      )}
+
+      <MobileSearchModal open={searchOpen} onClose={() => setSearchOpen(false)} onNavigate={handleNavigate} />
+    </div>
+  );
+}

package/bizar-dash/src/web/components/ArtifactCreateDialog.tsx

@@ -0,0 +1,95 @@
+// src/components/ArtifactCreateDialog.tsx — Dialog for /artifact new command.
+
+import { useState } from 'react';
+import { Button } from './Button';
+import { api } from '../lib/api';
+
+type ArtifactCreateDialogProps = {
+  data?: Record<string, unknown>;
+  onClose: () => void;
+};
+
+const KNOWN_TEMPLATES = [
+  'blank',
+  'feature-design',
+  'bug-investigation',
+  'decision-record',
+  'horizontal',
+  'vertical',
+];
+
+export function ArtifactCreateDialog({ data, onClose }: ArtifactCreateDialogProps) {
+  const templates = (data?.templates as string[]) ?? KNOWN_TEMPLATES;
+  const defaultTemplate = (data?.defaultTemplate as string) ?? 'blank';
+
+  const [slug, setSlug] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState(defaultTemplate);
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = async () => {
+    if (!slug.trim()) {
+      setError('Slug is required.');
+      return;
+    }
+    if (!/^[a-z0-9][a-z0-9-]{0,63}$/.test(slug)) {
+      setError('Invalid slug. Use lowercase letters, numbers, and hyphens. Must start with an alphanumeric character.');
+      return;
+    }
+    setCreating(true);
+    setError(null);
+    try {
+      await api.post('/artifacts', { slug, template: selectedTemplate });
+      onClose();
+    } catch (err) {
+      setError((err as Error).message);
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div>
+      <p style={{ marginBottom: 16, color: 'var(--color-muted)', fontSize: 13 }}>
+        Create a new visual plan. Plans are stored in <code>artifacts/</code> in your worktree.
+      </p>
+
+      <div style={{ marginBottom: 12 }}>
+        <label className="field-label" htmlFor="plan-slug">Plan slug</label>
+        <input
+          id="plan-slug"
+          className="input"
+          type="text"
+          placeholder="e.g. my-feature"
+          value={slug}
+          onChange={(e) => { setSlug(e.target.value); setError(null); }}
+          autoFocus
+        />
+      </div>
+
+      <div style={{ marginBottom: 16 }}>
+        <label className="field-label" htmlFor="plan-template">Template</label>
+        <select
+          id="plan-template"
+          className="select"
+          value={selectedTemplate}
+          onChange={(e) => setSelectedTemplate(e.target.value)}
+        >
+          {templates.map((t) => (
+            <option key={t} value={t}>{t}</option>
+          ))}
+        </select>
+      </div>
+
+      {error && (
+        <p style={{ marginBottom: 12, color: 'var(--color-danger)', fontSize: 13 }}>{error}</p>
+      )}
+
+      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+        <Button variant="ghost" onClick={onClose} disabled={creating}>Cancel</Button>
+        <Button variant="primary" onClick={handleCreate} disabled={creating || !slug.trim()}>
+          {creating ? 'Creating…' : 'Create'}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/components/ArtifactListDialog.tsx

@@ -0,0 +1,55 @@
+// src/components/ArtifactListDialog.tsx — Dialog for /plan list command.
+
+import { Button } from './Button';
+
+type ArtifactListDialogProps = {
+  data?: Record<string, unknown>;
+  onClose: () => void;
+};
+
+export function ArtifactListDialog({ data, onClose }: ArtifactListDialogProps) {
+  const plans = (data?.plans as string[]) ?? [];
+  const count = (data?.count as number) ?? plans.length;
+
+  const handleOpen = (slug: string) => {
+    window.open(`/artifacts/${slug}/`, '_blank');
+  };
+
+  return (
+    <div>
+      {plans.length === 0 ? (
+        <p style={{ marginBottom: 16, color: 'var(--color-muted)' }}>
+          No plans found in this worktree. Use <code>/artifact new &lt;slug&gt;</code> to create one.
+        </p>
+      ) : (
+        <div style={{ marginBottom: 16 }}>
+          <p style={{ marginBottom: 12, fontSize: 13, color: 'var(--color-muted)' }}>
+            {count} plan{count !== 1 ? 's' : ''} in this worktree:
+          </p>
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+            {plans.map((slug) => (
+              <li
+                key={slug}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '6px 0',
+                  borderBottom: '1px solid var(--color-border)',
+                }}
+              >
+                <code style={{ fontSize: 13 }}>{slug}</code>
+                <Button variant="ghost" size="sm" onClick={() => handleOpen(slug)}>
+                  Open
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Button variant="ghost" onClick={onClose}>Close</Button>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/components/ArtifactViewer.tsx

@@ -0,0 +1,143 @@
+// src/web/components/ArtifactViewer.tsx — modal viewer for rendered HTML artifacts.
+import { useEffect, useState } from 'react';
+import { X, ExternalLink, Download, FileText } from 'lucide-react';
+import { useModal } from './Modal';
+import { Spinner } from './Spinner';
+import { api } from '../lib/api';
+
+type ArtifactMeta = {
+  id: string;
+  name: string;
+  contentType: string;
+  size: number;
+  createdAt: string;
+};
+
+type Props = {
+  artifactId: string;
+  onClose: () => void;
+};
+
+export function ArtifactViewer({ artifactId, onClose }: Props) {
+  const [meta, setMeta] = useState<ArtifactMeta | null>(null);
+  const [content, setContent] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setLoading(true);
+      try {
+        const [metaData, contentData] = await Promise.all([
+          api.get<ArtifactMeta>(`/artifacts/${encodeURIComponent(artifactId)}`),
+          fetchRawContent(artifactId),
+        ]);
+        if (!cancelled) {
+          setMeta(metaData);
+          setContent(contentData);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          console.error('Failed to load artifact:', err);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [artifactId]);
+
+  return (
+    <div className="modal-backdrop" onClick={(e) => { e.stopPropagation(); if (e.target === e.currentTarget) onClose(); }}>
+      <div className="modal artifact-viewer-modal" role="dialog" aria-modal="true">
+        <header className="modal-header">
+          <div className="modal-title-group">
+            <FileText size={16} />
+            <h2 className="modal-title">{meta?.name || 'Artifact'}</h2>
+            {meta && (
+              <span className="artifact-viewer-meta muted">
+                {meta.contentType} · {formatBytes(meta.size)}
+              </span>
+            )}
+          </div>
+          <div className="modal-header-actions">
+            {meta && (
+              <>
+                <a
+                  href={getArtifactContentUrl(artifactId)}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="icon-btn"
+                  aria-label="Open artifact in new tab"
+                  title="Open in new tab"
+                >
+                  <ExternalLink size={16} />
+                </a>
+                <a
+                  href={getArtifactContentUrl(artifactId)}
+                  download={meta.name || 'artifact.html'}
+                  className="icon-btn"
+                  aria-label="Download artifact"
+                  title="Download"
+                >
+                  <Download size={16} />
+                </a>
+              </>
+            )}
+            <button type="button" className="icon-btn" aria-label="Close" onClick={onClose}>
+              <X size={16} />
+            </button>
+          </div>
+        </header>
+        <div className="modal-body artifact-viewer-body">
+          {loading ? (
+            <div className="artifact-viewer-loading">
+              <Spinner />
+              <span className="muted">Loading artifact…</span>
+            </div>
+          ) : content ? (
+            <iframe
+              srcDoc={content}
+              className="artifact-viewer-iframe"
+              sandbox="allow-scripts allow-forms allow-popups allow-same-origin"
+              title={meta?.name || 'Artifact'}
+            />
+          ) : (
+            <div className="artifact-viewer-empty muted">
+              <FileText size={32} />
+              <p>No content available.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// Fetch raw text content — bypasses the JSON api wrapper.
+async function fetchRawContent(artifactId: string): Promise<string> {
+  const r = await fetch(getArtifactContentUrl(artifactId));
+  if (!r.ok) throw new Error(`HTTP ${r.status}`);
+  return r.text();
+}
+
+function getArtifactContentUrl(artifactId: string): string {
+  return api.urlWithToken(`/artifacts/${encodeURIComponent(artifactId)}/content`);
+}
+
+// v3.5.7 — Open the artifact in a new browser tab at full window size.
+// The artifact's own HTML renders edge-to-edge, which is what users want
+// for visual artifacts (they're meant to be viewed, not crammed in a modal).
+export function openArtifactViewer(
+  _modal: ReturnType<typeof useModal>,
+  artifactId: string,
+): void {
+  const url = getArtifactContentUrl(artifactId);
+  window.open(url, '_blank', 'noopener,noreferrer');
+}