aidevops 3.29.21 → 3.29.23

package/packages/gui-web/src/InventorySurfaces.tsx

@@ -1,19 +1,11 @@
-import type { GuiAppActionId, GuiAppActionJobSummary, GuiManagedAppSummary, GuiResponseEnvelope, GuiStatusData } from "@aidevops/gui-shared";
-import { type CSSProperties, type Dispatch, type FocusEvent as ReactFocusEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactElement, type ReactNode, type SetStateAction, useEffect, useRef, useState } from "react";
-import type { IconType } from "react-icons";
-import { FaApple, FaLinux, FaWindows } from "react-icons/fa";
-import { FiChevronDown, FiCode, FiDownload, FiExternalLink, FiGlobe, FiMonitor, FiRefreshCw, FiRepeat, FiTerminal, FiTrash2, FiX } from "react-icons/fi";
-import { IoLogoAndroid } from "react-icons/io";
-import { SiIos } from "react-icons/si";
-import type { InventoryColumn } from "./app-model";
-import { installationRows, text } from "./app-model";
-
-interface DraftInventoryRow {
-  id: string;
-  values: Record<string, string>;
-}
+import type { GuiAppActionJobSummary, GuiManagedAppSummary, GuiResponseEnvelope, GuiStatusData } from "@aidevops/gui-shared";
+import { type CSSProperties, type Dispatch, type FocusEvent as ReactFocusEvent, type PointerEvent as ReactPointerEvent, type ReactElement, type SetStateAction, useEffect, useState } from "react";
+import { ManagedAppPanel } from "./ManagedAppPanel";
+import { text } from "./app-model";
+import { RecommendedAppsSurface, nextRecommendedFilterValue, recommendedAppMatchesFilters, recommendedApps, type RecommendedOsId, type RecommendedPlatformFilterId } from "./RecommendedAppsSurface";
 
-let draftRowCounter = 0;
+export { EditableInventorySurface, InstallationSurface } from "./InventoryEditorSurfaces";
+export { nextRecommendedFilterValue } from "./RecommendedAppsSurface";
 
 export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement {
   const [appCollection, setAppCollection] = useState<AppCollectionId>("aidevops");
@@ -110,187 +102,6 @@ export function AppsSurface({ status }: { status: GuiStatusData }): ReactElement
   );
 }
 
-function ManagedAppPanel({ app, dismissedJobIds, expanded, job, onDismissJob, onJob, onPolicyToggle, onToggle, policyJobs }: { app: GuiManagedAppSummary; dismissedJobIds: Set<string>; expanded: boolean; job: GuiAppActionJobSummary | null; onDismissJob: (jobId: string) => void; onJob: (job: GuiAppActionJobSummary) => void; onPolicyToggle: (policy: ManagedPolicyId, value: boolean) => void; onToggle: () => void; policyJobs: GuiAppActionJobSummary[] }): ReactElement {
-  const lockedPolicy = isEssentialManagedApp(app);
-  const visibleJob = job === null || dismissedJobIds.has(job.id) ? null : job;
-  const visiblePolicyJobs = policyJobs.filter((policyJob) => !dismissedJobIds.has(policyJob.id));
-
-  return (
-    <article className={expanded ? "managed-app-card expanded" : "managed-app-card"}>
-      <button aria-expanded={expanded} className="managed-app-summary" data-tooltip={`${expanded ? "Collapse" : "Expand"} ${app.name} controls`} onClick={onToggle} type="button">
-        <span className="managed-app-title-block">
-          <span className="eyebrow">{app.category}</span>
-          <strong>{app.name}</strong>
-          <span>{app.description}</span>
-        </span>
-        <span className="managed-app-summary-meta">
-          <SummaryChip label="Installed" value={app.installed_version} />
-          <SummaryChip label="Latest" value={app.latest_version} />
-          <FiChevronDown aria-hidden="true" className="managed-app-chevron" />
-        </span>
-      </button>
-      {expanded ? <div className="managed-app-body">
-        <div className="managed-app-toolbar">
-          <div className="managed-app-links">
-            <OriginLink href={app.origin_website_url} label={text.website} />
-            <OriginLink href={app.origin_repo_url} label="Repo" />
-          </div>
-          <div className="managed-app-actions">
-            {app.actions.map((action) => <AppActionButton action={action.id} app={app} disabled={!action.enabled} key={action.id} onJob={onJob} commandPreview={action.command_preview} />)}
-          </div>
-      </div>
-      <div className="managed-app-details">
-        <ToggleSwitch checked={app.aidevops_install} disabled={lockedPolicy} label="setup installs" onChange={(value) => onPolicyToggle("setup", value)} />
-        <ToggleSwitch checked={app.aidevops_update} disabled={lockedPolicy} label="update maintains" onChange={(value) => onPolicyToggle("update", value)} />
-        {visibleJob ? <AppLogLink job={visibleJob} /> : null}
-      </div>
-      <AppMeta className="managed-app-path" label={text.path} value={app.install_path_ref} />
-      {visibleJob ? <AppActionTerminal job={visibleJob} onDismiss={onDismissJob} /> : null}
-      {visiblePolicyJobs.map((policyJob) => <AppActionTerminal job={policyJob} key={policyJob.id} onDismiss={onDismissJob} />)}
-      {visibleJob === null && visiblePolicyJobs.length === 0 ? <p className="empty-state compact-notice">No recent command output for this app. Run an action or change a policy toggle to open this app's terminal log.</p> : null}
-      </div> : null}
-    </article>
-  );
-}
-
-function SummaryChip({ label, value }: { label: string; value: string }): ReactElement {
-  const tooltip = `${label}: ${value}`;
-  return <span className="managed-summary-chip" data-tooltip={tooltip} title={tooltip}><small>{label}</small><span>{value}</span></span>;
-}
-
-function OriginLink({ href, label }: { href: string; label: string }): ReactElement {
-  if (href.length === 0) {
-    return <span className="origin-missing">{label}: source pending</span>;
-  }
-
-  return <a data-tooltip={href} href={href} onClick={(event) => openExternalLink(event, href)} rel="noreferrer" target="_blank" title={href}>{label} <FiExternalLink aria-hidden="true" /></a>;
-}
-
-function ToggleSwitch({ checked, disabled = false, label, onChange }: { checked: boolean; disabled?: boolean; label: string; onChange: (checked: boolean) => void }): ReactElement {
-  return <button aria-pressed={checked} className={checked ? "managed-toggle checked" : "managed-toggle"} data-tooltip={disabled ? "Essential aidevops component; policy is locked on" : undefined} disabled={disabled} onClick={() => onChange(!checked)} title={disabled ? "Essential aidevops component; policy is locked on" : undefined} type="button"><span className="managed-toggle-label">{label}</span><span aria-hidden="true" className={checked ? "switch-track checked" : "switch-track"}><span /></span></button>;
-}
-
-function AppMeta({ className = "", label, value }: { className?: string; label: string; value: string }): ReactElement {
-  return <span className={className.length > 0 ? `app-meta ${className}` : "app-meta"}><small>{label}</small><strong>{value}</strong></span>;
-}
-
-function AppLogLink({ job }: { job: GuiAppActionJobSummary }): ReactElement {
-  return <a className="app-meta app-log-link" href={`#app-job-${job.id}`}><small>Logs</small><strong>{job.action} · {job.status}</strong></a>;
-}
-
-function AppActionButton({ action, app, commandPreview, disabled, onJob }: { action: GuiAppActionId; app: GuiManagedAppSummary; commandPreview: string; disabled: boolean; onJob: (job: GuiAppActionJobSummary) => void }): ReactElement {
-  const icon = action === "install" ? <FiDownload /> : action === "update" ? <FiRefreshCw /> : action === "reinstall" ? <FiRepeat /> : <FiTrash2 />;
-  const [confirmOpen, setConfirmOpen] = useState(false);
-
-  async function runAction(): Promise<void> {
-    if (disabled) {
-      return;
-    }
-
-    const response = await fetch(`/api/apps/${encodeURIComponent(app.id)}/actions/${action}`, { method: "POST" });
-    const envelope = await response.json() as GuiResponseEnvelope<GuiAppActionJobSummary>;
-    onJob(envelope.data);
-  }
-
-  return <>
-    <button aria-label={`${action} ${app.name}`} className={action === "remove" ? "app-action-button remove" : "app-action-button"} data-tooltip={commandPreview} disabled={disabled} onClick={() => setConfirmOpen(true)} type="button">{icon}<span>{action}</span></button>
-    {confirmOpen ? <ConfirmActionModal action={action} app={app} commandPreview={commandPreview} close={() => setConfirmOpen(false)} confirm={() => { setConfirmOpen(false); void runAction(); }} /> : null}
-  </>;
-}
-
-function ConfirmActionModal({ action, app, close, commandPreview, confirm }: { action: GuiAppActionId; app: GuiManagedAppSummary; close: () => void; commandPreview: string; confirm: () => void }): ReactElement {
-  return (
-    <div className="modal-backdrop" role="presentation">
-      <section aria-modal="true" className="confirm-modal" role="dialog" aria-labelledby={`confirm-${app.id}-${action}`}>
-        <p className="eyebrow">Confirm action</p>
-        <h3 id={`confirm-${app.id}-${action}`}>{action} {app.name}?</h3>
-        <p>This will start the allowlisted background command for this app.</p>
-        <code>{commandPreview}</code>
-        <div className="confirm-modal-actions">
-          <button className="secondary-action" onClick={close} type="button">Cancel</button>
-          <button className={action === "remove" ? "app-action-button remove" : "app-action-button"} onClick={confirm} type="button">Confirm</button>
-        </div>
-      </section>
-    </div>
-  );
-}
-
-function AppActionTerminal({ job, onDismiss }: { job: GuiAppActionJobSummary; onDismiss: (jobId: string) => void }): ReactElement {
-  const outputRef = useRef<HTMLPreElement | null>(null);
-
-  useEffect(() => {
-    if (outputRef.current !== null) {
-      outputRef.current.scrollTop = outputRef.current.scrollHeight;
-    }
-  }, [job.output.length]);
-
-  return (
-    <section className="app-terminal" id={`app-job-${job.id}`} aria-label="App action terminal output">
-      <header><strong>{job.app_id} {job.action}</strong><span>{terminalStatusLabel(job)}</span><button aria-label={`Dismiss ${job.app_id} ${job.action} terminal output`} className="terminal-close-button" onClick={() => onDismiss(job.id)} title="Dismiss terminal output" type="button"><FiX aria-hidden="true" /></button></header>
-      <pre ref={outputRef}>{renderTerminalOutput(job.output)}</pre>
-    </section>
-  );
-}
-
-function terminalStatusLabel(job: GuiAppActionJobSummary): string {
-  if (job.status === "running") {
-    return "running";
-  }
-  if (job.exit_code === null) {
-    return job.status;
-  }
-  return `${job.status} · exit ${job.exit_code}`;
-}
-
-function renderTerminalOutput(lines: string[]): ReactNode[] {
-  return lines.flatMap((line, index) => [
-    ...renderAnsiLine(line, `line-${index}`),
-    index === lines.length - 1 ? null : "\n",
-  ]).filter((node): node is ReactNode => node !== null);
-}
-
-function renderAnsiLine(line: string, keyPrefix: string): ReactNode[] {
-  const nodes: ReactNode[] = [];
-  const ansiPattern = new RegExp("\\x1b\\[([0-9;]*)m", "g");
-  let activeClass = "";
-  let lastIndex = 0;
-  let match = ansiPattern.exec(line);
-
-  while (match !== null) {
-    if (match.index > lastIndex) {
-      nodes.push(terminalSpan(line.slice(lastIndex, match.index), activeClass, `${keyPrefix}-${nodes.length}`));
-    }
-    activeClass = ansiClassForCodes(match[1]);
-    lastIndex = ansiPattern.lastIndex;
-    match = ansiPattern.exec(line);
-  }
-
-  if (lastIndex < line.length) {
-    nodes.push(terminalSpan(line.slice(lastIndex), activeClass, `${keyPrefix}-${nodes.length}`));
-  }
-
-  if (nodes.length === 0) {
-    nodes.push(terminalSpan(line, activeClass, `${keyPrefix}-0`));
-  }
-
-  return nodes;
-}
-
-function terminalSpan(textValue: string, className: string, key: string): ReactNode {
-  const promptClass = textValue.startsWith("$ ") ? "ansi-prompt" : "";
-  const combinedClass = [className, promptClass].filter(Boolean).join(" ");
-  return combinedClass.length > 0 ? <span className={combinedClass} key={key}>{textValue}</span> : textValue;
-}
-
-function ansiClassForCodes(rawCodes: string): string {
-  const codes = rawCodes.length === 0 ? [0] : rawCodes.split(";").map((code) => Number.parseInt(code, 10));
-  const colorCode = [...codes].reverse().find((code) => (code >= 30 && code <= 37) || (code >= 90 && code <= 97));
-  if (colorCode === undefined) {
-    return "";
-  }
-  return `ansi-fg-${colorCode}`;
-}
-
 async function refreshJob(jobId: string, setJobs: Dispatch<SetStateAction<Record<string, GuiAppActionJobSummary>>>): Promise<void> {
   const response = await fetch(`/api/apps/jobs/${encodeURIComponent(jobId)}`);
   if (!response.ok) {
@@ -320,34 +131,23 @@ function sortedManagedApps(apps: GuiManagedAppSummary[]): GuiManagedAppSummary[]
 }
 
 function managedCategoryForApp(app: GuiManagedAppSummary): ManagedCategoryId {
-  if (["core", "safety", "automation"].includes(app.category)) {
-    return "core";
-  }
-  if (app.category.includes("cli")) {
-    return "cli";
-  }
-  if (app.category.includes("ai")) {
-    return "ai";
-  }
-  if (["desktop", "editor"].includes(app.category)) {
-    return "desktop";
-  }
-  if (["terminal"].includes(app.category) || app.name.toLowerCase().includes("terminal")) {
-    return "terminal";
-  }
-
-  return "cli";
+  const exactCategory = managedCategoryByExactName[app.category];
+  return exactCategory ?? managedCategoryByKeyword(app);
 }
 
-function isEssentialManagedApp(app: GuiManagedAppSummary): boolean {
-  return ["core", "safety", "automation"].includes(app.category);
+function managedCategoryByKeyword(app: GuiManagedAppSummary): ManagedCategoryId {
+  const loweredName = app.name.toLowerCase();
+  const categoryRules: Array<{ matches: boolean; category: ManagedCategoryId }> = [
+    { matches: app.category.includes("cli"), category: "cli" },
+    { matches: app.category.includes("ai"), category: "ai" },
+    { matches: loweredName.includes("terminal"), category: "terminal" },
+  ];
+
+  return categoryRules.find((rule) => rule.matches)?.category ?? "cli";
 }
 
 type AppCollectionId = "aidevops" | "recommended";
 type ManagedCategoryId = "core" | "ai" | "cli" | "desktop" | "terminal";
-type RecommendedOsId = "all" | "macos" | "linux" | "windows" | "ios" | "android";
-type RecommendedPlatformId = "webapp" | "saas" | "cli" | "api";
-type RecommendedPlatformFilterId = "all" | RecommendedPlatformId;
 type ManagedPolicyId = "setup" | "update";
 type ManagedPolicyToggleState = Record<string, Partial<Record<ManagedPolicyId, boolean>>>;
 
@@ -356,25 +156,20 @@ interface TabOption<T extends string> {
   label: string;
 }
 
-interface RecommendedApp {
-  name: string;
-  description: string;
-  websiteUrl: string;
-  alternativeToUrl?: string;
-  repoUrl?: string;
-  iosUrl?: string;
-  androidUrl?: string;
-  fdroidUrl?: string;
-  obtainiumUrl?: string;
-  os: RecommendedOsId[];
-  platforms: RecommendedPlatformId[];
-}
-
 const appCollectionTabs: TabOption<AppCollectionId>[] = [
   { id: "aidevops", label: "AIDevOps" },
   { id: "recommended", label: "Recommended" },
 ];
 
+const managedCategoryByExactName: Record<string, ManagedCategoryId> = {
+  automation: "core",
+  core: "core",
+  desktop: "desktop",
+  editor: "desktop",
+  safety: "core",
+  terminal: "terminal",
+};
+
 const managedCategoryTabs: TabOption<ManagedCategoryId>[] = [
   { id: "core", label: "Core" },
   { id: "ai", label: "AI" },
@@ -383,166 +178,10 @@ const managedCategoryTabs: TabOption<ManagedCategoryId>[] = [
   { id: "terminal", label: "Terminal" },
 ];
 
-const recommendedPlatformTabs: TabOption<RecommendedPlatformFilterId>[] = [
-  { id: "all", label: "All" },
-  { id: "webapp", label: "WebApp" },
-  { id: "saas", label: "SaaS" },
-  { id: "cli", label: "CLI" },
-  { id: "api", label: "API" },
-];
-
-const recommendedOsTabs: TabOption<RecommendedOsId>[] = [
-  { id: "all", label: "All OS" },
-  { id: "macos", label: "macOS" },
-  { id: "linux", label: "Linux" },
-  { id: "windows", label: "Windows" },
-  { id: "ios", label: "iOS" },
-  { id: "android", label: "Android" },
-];
-
-const recommendedApps = ([
-  { name: "Affinity Studio", description: "Creative design suite.", websiteUrl: "https://www.affinity.studio/", alternativeToUrl: "https://alternativeto.net/software/affinity-1/", os: ["macos", "windows"], platforms: [] },
-  { name: "Bitwarden", description: "Open source password manager.", websiteUrl: "https://bitwarden.com", alternativeToUrl: "https://alternativeto.net/software/bitwarden--free-password-manager/", repoUrl: "https://github.com/bitwarden", iosUrl: "https://itunes.apple.com/app/bitwarden-free-password-manager/id1137397744?mt=8", androidUrl: "https://play.google.com/store/apps/details?id=com.x8bit.bitwarden", fdroidUrl: "https://mobileapp.bitwarden.com/fdroid/repo", os: ["macos", "linux", "windows", "ios", "android"], platforms: ["webapp", "saas", "cli", "api"] },
-  { name: "Brave Browser", description: "Privacy-focused web browser.", websiteUrl: "https://brave.com/", alternativeToUrl: "https://alternativeto.net/software/brave/", iosUrl: "https://apps.apple.com/app/brave-private-web-browser-vpn/id1052879175?mt=8", androidUrl: "https://play.google.com/store/apps/details?id=com.brave.browser", os: ["macos", "linux", "windows", "ios", "android"], platforms: [] },
-  { name: "Cloudron", description: "Self-hosted app platform.", websiteUrl: "https://www.cloudron.io/", alternativeToUrl: "https://alternativeto.net/software/cloudron/", os: ["linux"], platforms: ["webapp", "cli", "api"] },
-  { name: "Collabora Online", description: "Online office collaboration.", websiteUrl: "https://www.collaboraonline.com/collabora-online/", alternativeToUrl: "https://alternativeto.net/software/collabora-online/", os: ["linux"], platforms: ["webapp", "api"] },
-  { name: "Cometly", description: "Marketing attribution analytics.", websiteUrl: "https://www.cometly.com/", os: [], platforms: ["saas", "api"] },
-  { name: "DaVinci Resolve", description: "Professional video editing, color, VFX, and audio post-production.", websiteUrl: "https://www.blackmagicdesign.com/products/davinciresolve/", alternativeToUrl: "https://alternativeto.net/software/davinci-resolve/", os: ["macos", "linux", "windows"], platforms: [] },
-  { name: "DocuSeal", description: "Open source document signing.", websiteUrl: "https://www.docuseal.com/", alternativeToUrl: "https://alternativeto.net/software/docuseal/", os: ["linux"], platforms: ["webapp", "saas", "api"] },
-  { name: "Element", description: "Matrix messaging client.", websiteUrl: "https://element.io/", alternativeToUrl: "https://alternativeto.net/software/element-app/", iosUrl: "https://apps.apple.com/app/id1631335820", androidUrl: "https://play.google.com/store/apps/details?id=io.element.android.x", fdroidUrl: "https://f-droid.org/en/packages/io.element.android.x/", os: ["macos", "linux", "windows", "ios", "android"], platforms: ["webapp"] },
-  { name: "Enpass", description: "Offline-first password manager.", websiteUrl: "https://www.enpass.io/", alternativeToUrl: "https://alternativeto.net/software/enpass/", iosUrl: "https://apps.apple.com/app/apple-store/id455566716?pt=637991", androidUrl: "https://play.google.com/store/apps/details?id=io.enpass.app", os: ["macos", "linux", "windows", "ios", "android"], platforms: [] },
-  { name: "EspoCRM", description: "Open source CRM.", websiteUrl: "https://www.espocrm.com/", alternativeToUrl: "https://alternativeto.net/software/espocrm/", os: ["linux"], platforms: ["webapp", "saas", "api"] },
-  { name: "Fathom Analytics", description: "Privacy-first analytics.", websiteUrl: "https://usefathom.com/", alternativeToUrl: "https://alternativeto.net/software/fathom-analytics/", os: [], platforms: ["saas", "api"] },
-  { name: "FontBase", description: "Font management and reference tool.", websiteUrl: "https://fontba.se/", alternativeToUrl: "https://alternativeto.net/software/fontbase/", os: ["macos"], platforms: [] },
-  { name: "Forgejo", description: "Self-hosted Git forge.", websiteUrl: "https://forgejo.org/", alternativeToUrl: "https://alternativeto.net/software/forgejo/", os: ["linux"], platforms: ["webapp", "cli", "api"] },
-  { name: "Ghost", description: "Publishing platform.", websiteUrl: "https://ghost.org/", alternativeToUrl: "https://alternativeto.net/software/ghost/", os: ["linux"], platforms: ["webapp", "saas", "cli", "api"] },
-  { name: "Gitea", description: "Self-hosted Git service.", websiteUrl: "https://about.gitea.com/", alternativeToUrl: "https://alternativeto.net/software/gitea/", os: ["linux", "windows"], platforms: ["webapp", "cli", "api"] },
-  { name: "GitLab", description: "DevSecOps and Git hosting platform.", websiteUrl: "https://gitlab.com/", alternativeToUrl: "https://alternativeto.net/software/gitlab/", os: ["linux"], platforms: ["webapp", "saas", "cli", "api"] },
-  { name: "LibreOffice", description: "Open source office suite.", websiteUrl: "https://www.libreoffice.org/", alternativeToUrl: "https://alternativeto.net/software/libreoffice/", os: ["macos", "linux", "windows"], platforms: [] },
-  { name: "LocalWP", description: "Local WordPress development.", websiteUrl: "https://localwp.com/", alternativeToUrl: "https://alternativeto.net/software/local-by-flywheel/", os: ["macos", "linux", "windows"], platforms: [] },
-  { name: "Matomo", description: "Open analytics platform.", websiteUrl: "https://matomo.org/", alternativeToUrl: "https://alternativeto.net/software/piwik/", os: ["linux"], platforms: ["webapp", "saas", "api"] },
-  { name: "Nextcloud", description: "Open source content collaboration platform.", websiteUrl: "https://nextcloud.com/", alternativeToUrl: "https://alternativeto.net/software/nextcloud/", repoUrl: "https://github.com/nextcloud", iosUrl: "https://itunes.apple.com/us/app/nextcloud/id1125420102?mt=8", androidUrl: "https://play.google.com/store/apps/details?id=com.nextcloud.client", fdroidUrl: "https://f-droid.org/packages/com.nextcloud.client/", os: ["macos", "linux", "windows", "ios", "android"], platforms: ["webapp", "saas", "api"] },
-  { name: "Nextcloud Talk", description: "Open source video calls, chat, and collaboration for Nextcloud.", websiteUrl: "https://nextcloud.com/talk/", repoUrl: "https://github.com/nextcloud/spreed", iosUrl: "https://apps.apple.com/us/app/nextcloud-talk/id1296825574", androidUrl: "https://play.google.com/store/apps/details?id=com.nextcloud.talk2&hl=en", os: ["ios", "android"], platforms: ["webapp"] },
-  { name: "OBS Studio", description: "Open source video recording and live streaming.", websiteUrl: "https://obsproject.com/", alternativeToUrl: "https://alternativeto.net/software/open-broadcaster-software/", repoUrl: "https://github.com/obsproject/obs-studio", os: ["macos", "linux", "windows"], platforms: [] },
-  { name: "ONLYOFFICE", description: "Office and document collaboration.", websiteUrl: "https://www.onlyoffice.com/", alternativeToUrl: "https://alternativeto.net/software/onlyoffice/", repoUrl: "https://github.com/ONLYOFFICE/", iosUrl: "https://apps.apple.com/us/app/onlyoffice-documents/id944896972", androidUrl: "https://play.google.com/store/apps/details?id=com.onlyoffice.documents", os: ["macos", "linux", "windows", "ios", "android"], platforms: ["webapp", "saas", "api"] },
-  { name: "OpenScreen", description: "Open screen-sharing project.", websiteUrl: "https://github.com/getopenscreen/openscreen/releases", alternativeToUrl: "https://alternativeto.net/software/openscreen/", repoUrl: "https://github.com/getopenscreen/openscreen", os: ["macos", "linux", "windows"], platforms: [] },
-  { name: "Osaurus", description: "AI app workspace.", websiteUrl: "https://osaurus.ai/", alternativeToUrl: "https://alternativeto.net/software/osaurus/", os: ["macos"], platforms: [] },
-  { name: "Parallels Desktop", description: "Run Windows, Linux, and virtual machines on macOS.", websiteUrl: "https://www.parallels.com/products/desktop/", alternativeToUrl: "https://alternativeto.net/software/parallels-desktop/about/", os: ["macos"], platforms: [] },
-  { name: "PDF Studio", description: "PDF editor.", websiteUrl: "https://www.qoppa.com/pdfstudio/", alternativeToUrl: "https://alternativeto.net/software/qoppa-pdf-studio/", os: ["macos", "linux", "windows"], platforms: [] },
-  { name: "Pixelmator Pro", description: "Professional image editor for macOS.", websiteUrl: "https://www.apple.com/pixelmator-pro/", os: ["macos"], platforms: [] },
-  { name: "PostHog", description: "Product analytics platform.", websiteUrl: "https://posthog.com/", alternativeToUrl: "https://alternativeto.net/software/posthog/", os: ["linux"], platforms: ["webapp", "saas", "cli", "api"] },
-  { name: "Postiz", description: "Social media scheduling.", websiteUrl: "https://postiz.com/", alternativeToUrl: "https://alternativeto.net/software/postiz/", os: ["linux"], platforms: ["webapp", "saas", "api"] },
-  { name: "PrivateBin", description: "Zero-knowledge pastebin.", websiteUrl: "https://privatebin.info/", alternativeToUrl: "https://alternativeto.net/software/privatebin/", repoUrl: "https://github.com/PrivateBin/PrivateBin", os: ["linux"], platforms: ["webapp", "api"] },
-  { name: "Proxmox", description: "Virtualization platform.", websiteUrl: "https://www.proxmox.com/", alternativeToUrl: "https://alternativeto.net/software/proxmox-virtual-environment/", os: ["linux"], platforms: ["webapp", "cli", "api"] },
-  { name: "QuickFile", description: "Accounting platform.", websiteUrl: "https://www.quickfile.co.uk/", os: [], platforms: ["saas", "api"] },
-  { name: "Reframed", description: "Creative framing utility.", websiteUrl: "https://www.reframed.dev/", alternativeToUrl: "https://alternativeto.net/software/reframed/", os: ["macos"], platforms: [] },
-  { name: "Rybbit", description: "Web analytics.", websiteUrl: "https://rybbit.com/", alternativeToUrl: "https://alternativeto.net/software/rybbit/", os: ["linux"], platforms: ["webapp", "saas", "api"] },
-  { name: "SchildiChat", description: "Matrix messaging client.", websiteUrl: "https://schildi.chat/", alternativeToUrl: "https://alternativeto.net/software/schildichat/", androidUrl: "https://play.google.com/store/apps/details?id=chat.schildi.android", fdroidUrl: "https://schildi.chat/next/install-from-sc-fdroid", os: ["macos", "linux", "windows", "android"], platforms: ["webapp"] },
-  { name: "ScreenFlow", description: "Screen recording and editing.", websiteUrl: "https://www.telestream.net/screenflow/", alternativeToUrl: "https://alternativeto.net/software/screenflow/", os: ["macos"], platforms: [] },
-  { name: "SEO Utils", description: "Desktop SEO tools.", websiteUrl: "https://seoutils.app/", os: ["macos", "linux", "windows"], platforms: [] },
-  { name: "Shottr", description: "macOS screenshot utility.", websiteUrl: "https://shottr.cc/", alternativeToUrl: "https://alternativeto.net/software/shottr/", os: ["macos"], platforms: [] },
-  { name: "Signal", description: "Private messenger.", websiteUrl: "https://signal.org/", alternativeToUrl: "https://alternativeto.net/software/signal-private-messenger/", iosUrl: "https://apps.apple.com/us/app/signal-private-messenger/id874139669", androidUrl: "https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms", os: ["macos", "linux", "windows", "ios", "android"], platforms: [] },
-  { name: "SimpleX Chat", description: "Private messenger with no user IDs.", websiteUrl: "https://simplex.chat/", alternativeToUrl: "https://alternativeto.net/software/simplex-chat/about/", repoUrl: "https://github.com/simplex-chat", iosUrl: "https://apps.apple.com/us/app/simplex-chat/id1605771084", androidUrl: "https://play.google.com/store/apps/details?id=chat.simplex.app", fdroidUrl: "https://simplex.chat/fdroid", os: ["macos", "linux", "windows", "ios", "android"], platforms: ["cli"] },
-  { name: "Telegram", description: "Cloud-based mobile and desktop messaging app.", websiteUrl: "https://telegram.org/", iosUrl: "https://apps.apple.com/us/app/telegram-messenger/id686449807", androidUrl: "https://play.google.com/store/apps/details?id=org.telegram.messenger", os: ["macos", "linux", "windows", "ios", "android"], platforms: ["webapp", "api"] },
-  { name: "Thunderbird", description: "Email and calendar app.", websiteUrl: "https://www.thunderbird.net/", alternativeToUrl: "https://alternativeto.net/software/mozilla-thunderbird/about/", os: ["macos", "linux", "windows"], platforms: [] },
-  { name: "Ubicloud", description: "Open cloud platform.", websiteUrl: "https://www.ubicloud.com/", alternativeToUrl: "https://alternativeto.net/software/ubicloud/about/", repoUrl: "https://github.com/ubicloud/ubicloud", os: ["linux"], platforms: ["webapp", "saas", "cli", "api"] },
-  { name: "Vaultwarden", description: "Alternative Bitwarden server implementation.", websiteUrl: "https://github.com/dani-garcia/vaultwarden", alternativeToUrl: "https://alternativeto.net/software/vaultwarden/", repoUrl: "https://github.com/dani-garcia/vaultwarden", os: ["linux"], platforms: ["webapp", "api"] },
-  { name: "VideoProc", description: "Video processing toolkit.", websiteUrl: "https://www.videoproc.com/", alternativeToUrl: "https://alternativeto.net/software/videoproc/about/", os: ["macos", "windows"], platforms: [] },
-  { name: "VirtualBox", description: "Virtualization app.", websiteUrl: "https://www.virtualbox.org/", alternativeToUrl: "https://alternativeto.net/software/virtualbox/about/", os: ["macos", "linux", "windows"], platforms: ["cli"] },
-  { name: "WordPress", description: "Open source publishing platform.", websiteUrl: "https://wordpress.org/", alternativeToUrl: "https://alternativeto.net/software/wordpress/about/", os: ["linux"], platforms: ["webapp", "saas", "cli", "api"] },
-] satisfies RecommendedApp[]).sort((left, right) => left.name.localeCompare(right.name, undefined, { sensitivity: "base" }));
-
 function TabNav<T extends string>({ label, onChange, tabs, value }: { label: string; onChange: (value: T) => void; tabs: TabOption<T>[]; value: T }): ReactElement {
   return <div aria-label={label} className="pill-tabs app-subnav" role="tablist">{tabs.map((tab) => <button aria-selected={value === tab.id} className={value === tab.id ? "active" : ""} key={tab.id} onClick={() => onChange(tab.id)} role="tab" type="button">{tab.label}</button>)}</div>;
 }
 
-function RecommendedAppsSurface({ apps, os, platform, setOs, setPlatform }: { apps: RecommendedApp[]; os: RecommendedOsId; platform: RecommendedPlatformFilterId; setOs: (os: RecommendedOsId) => void; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement {
-  return <>
-    <div className="recommended-filter-tabs">
-      <TabNav label="Recommended app operating system filters" tabs={recommendedOsTabs} value={os} onChange={setOs} />
-      <TabNav label="Recommended app platform filters" tabs={recommendedPlatformTabs} value={platform} onChange={setPlatform} />
-    </div>
-    <div className="recommended-app-grid">
-      {apps.map((app) => <RecommendedAppCard app={app} key={app.name} setOs={setOs} setPlatform={setPlatform} />)}
-    </div>
-  </>;
-}
-
-function RecommendedAppCard({ app, setOs, setPlatform }: { app: RecommendedApp; setOs: (os: RecommendedOsId) => void; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement {
-  return <article className="recommended-app-card">
-    <div>
-      <strong>{app.name}</strong>
-      <p>{app.description}</p>
-    </div>
-    <div className="app-icon-groups">
-      <PlatformIconList platforms={app.platforms} setPlatform={setPlatform} />
-      <OsIconList os={app.os} setOs={setOs} />
-    </div>
-    <div className="managed-app-links plain-links">
-      <OriginLink href={app.websiteUrl} label={text.website} />
-      {app.alternativeToUrl ? <OriginLink href={app.alternativeToUrl} label="AlternativeTo" /> : null}
-      {app.repoUrl ? <OriginLink href={app.repoUrl} label="Repo" /> : null}
-      {app.iosUrl ? <OriginLink href={app.iosUrl} label="iOS" /> : null}
-      {app.androidUrl ? <OriginLink href={app.androidUrl} label="Android" /> : null}
-      {app.fdroidUrl ? <OriginLink href={app.fdroidUrl} label="F-Droid" /> : null}
-      {app.obtainiumUrl ? <OriginLink href={app.obtainiumUrl} label="Obtainium" /> : null}
-    </div>
-  </article>;
-}
-
-function PlatformIconList({ platforms, setPlatform }: { platforms: RecommendedPlatformId[]; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement | null {
-  if (platforms.length === 0) {
-    return null;
-  }
-
-  return <span className="os-icon-list platform-icon-list">{platforms.map((platform) => <PlatformIcon id={platform} key={platform} setPlatform={setPlatform} />)}</span>;
-}
-
-function PlatformIcon({ id, setPlatform }: { id: RecommendedPlatformId; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement {
-  const iconMap: Record<RecommendedPlatformId, { Icon: IconType; label: string }> = {
-    webapp: { Icon: FiMonitor, label: "WebApp" },
-    saas: { Icon: FiGlobe, label: "SaaS" },
-    cli: { Icon: FiTerminal, label: "CLI" },
-    api: { Icon: FiCode, label: "API" },
-  };
-  const { Icon, label } = iconMap[id];
-
-  return <button aria-label={`Filter by ${label}`} data-tooltip={`Filter by ${label}`} onClick={() => setPlatform(id)} title={`Filter by ${label}`} type="button"><Icon aria-hidden="true" focusable="false" /></button>;
-}
-
-function OsIconList({ os, setOs }: { os: RecommendedOsId[]; setOs: (os: RecommendedOsId) => void }): ReactElement | null {
-  if (os.length === 0) {
-    return null;
-  }
-
-  return <span className="os-icon-list">{os.map((item) => <OsIcon id={item} key={item} setOs={setOs} />)}</span>;
-}
-
-function OsIcon({ id, setOs }: { id: RecommendedOsId; setOs: (os: RecommendedOsId) => void }): ReactElement {
-  const iconMap: Record<RecommendedOsId, { Icon: IconType; label: string }> = {
-    all: { Icon: FiGlobe, label: "Web app" },
-    macos: { Icon: FaApple, label: "macOS" },
-    linux: { Icon: FaLinux, label: "Linux" },
-    windows: { Icon: FaWindows, label: "Windows" },
-    ios: { Icon: SiIos, label: "iOS" },
-    android: { Icon: IoLogoAndroid, label: "Android" },
-  };
-  const { Icon, label } = iconMap[id];
-
-  return <button aria-label={`Filter by ${label}`} data-tooltip={`Filter by ${label}`} onClick={() => setOs(id)} title={`Filter by ${label}`} type="button"><Icon aria-hidden="true" focusable="false" /></button>;
-}
-
-function recommendedAppMatchesFilters(app: RecommendedApp, platform: RecommendedPlatformFilterId, os: RecommendedOsId): boolean {
-  const platformMatches = platform === "all" || app.platforms.includes(platform);
-  const osMatches = os === "all" || app.os.includes(os);
-
-  return platformMatches && osMatches;
-}
-
-export function nextRecommendedFilterValue<T extends string>(current: T, next: T, defaultValue: T): T {
-  return current === next && next !== defaultValue ? defaultValue : next;
-}
-
 function applyManagedPolicyToggles(app: GuiManagedAppSummary, policy: Partial<Record<ManagedPolicyId, boolean>> | undefined): GuiManagedAppSummary {
   if (policy === undefined) {
     return app;
@@ -599,6 +238,7 @@ function writeManagedPolicyToggles(policy: ManagedPolicyToggleState): void {
 }
 
 interface AppTooltipState {
+  align: "start" | "center" | "end";
   text: string;
   x: number;
   y: number;
@@ -631,7 +271,16 @@ function tooltipForElement(element: HTMLElement): AppTooltipState | null {
   }
 
   const rect = element.getBoundingClientRect();
-  return { text: textValue, x: rect.left + (rect.width / 2), y: rect.top };
+  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+  const edgeSafeWidth = 240;
+  if (rect.left < edgeSafeWidth) {
+    return { align: "start", text: textValue, x: rect.left, y: rect.top };
+  }
+  if (viewportWidth - rect.right < edgeSafeWidth) {
+    return { align: "end", text: textValue, x: rect.right, y: rect.top };
+  }
+
+  return { align: "center", text: textValue, x: rect.left + (rect.width / 2), y: rect.top };
 }
 
 function AppTooltip({ tooltip }: { tooltip: AppTooltipState }): ReactElement {
@@ -640,115 +289,5 @@ function AppTooltip({ tooltip }: { tooltip: AppTooltipState }): ReactElement {
     "--tooltip-y": `${tooltip.y}px`,
   } as CSSProperties;
 
-  return <div className="app-global-tooltip" role="tooltip" style={style}>{tooltip.text}</div>;
-}
-
-function openExternalLink(event: ReactMouseEvent<HTMLAnchorElement>, href: string): void {
-  event.stopPropagation();
-  if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
-    return;
-  }
-
-  event.preventDefault();
-  if (document.documentElement.dataset.desktopShell === "macos") {
-    window.location.assign(href);
-    return;
-  }
-
-  const opened = window.open(href, "_blank", "noopener,noreferrer");
-  if (opened !== null) {
-    opened.opener = null;
-    return;
-  }
-
-  window.location.assign(href);
-}
-
-export function InstallationSurface(): ReactElement {
-  return (
-    <section className="panel" aria-label={text.installation}>
-      <div className="section-heading">
-        <p className="eyebrow">{text.setup}</p>
-        <h2>{text.installation}</h2>
-        <p>{text.installationIntro}</p>
-      </div>
-      <div className="installation-list">
-        {installationRows.map((row) => (
-          <article className="install-row" key={row.name}>
-            <div><strong>{row.name}</strong><small>{row.scope}</small></div>
-            <TogglePill checked={row.install} label={text.install} />
-            <TogglePill checked={row.update} label={text.update} />
-          </article>
-        ))}
-      </div>
-      <p className="empty-state">{text.plannedNotice}</p>
-    </section>
-  );
-}
-
-export function EditableInventorySurface({ columns, initialRows, intro, title }: {
-  columns: InventoryColumn[];
-  initialRows: Record<string, string>[];
-  intro: string;
-  title: string;
-}): ReactElement {
-  const [draftRows, setDraftRows] = useState(() => initialRows.map((row) => createDraftRow(row)));
-
-  function updateDraftRow(rowId: string, key: string, value: string): void {
-    setDraftRows((currentRows) => currentRows.map((row) => row.id === rowId ? { ...row, values: { ...row.values, [key]: value } } : row));
-  }
-
-  function addDraftRow(): void {
-    setDraftRows((currentRows) => [...currentRows, createDraftRow(emptyRow(columns))]);
-  }
-
-  return (
-    <section className="panel" aria-label={title}>
-      <div className="section-heading split-heading">
-        <div>
-          <p className="eyebrow">{text.infrastructure}</p>
-          <h2>{title}</h2>
-          <p>{intro}</p>
-        </div>
-        <button className="secondary-action" onClick={addDraftRow} type="button">{text.addRow}</button>
-      </div>
-      <p className="notice compact-notice">{text.draftOnly}</p>
-      <div className="editable-table">
-        <div className="editable-row header-row">
-          {columns.map((column) => <span key={column.key}>{column.label}</span>)}
-        </div>
-        {draftRows.map((row) => (
-          <div className="editable-row" key={row.id}>
-            {columns.map((column) => (
-              <input
-                aria-label={`${title} ${column.label}`}
-                key={column.key}
-                onChange={(event) => updateDraftRow(row.id, column.key, event.currentTarget.value)}
-                placeholder={column.label}
-                value={row.values[column.key] ?? ""}
-              />
-            ))}
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}
-
-function TogglePill({ checked, label }: { checked: boolean; label: string }): ReactElement {
-  return <span className={checked ? "toggle-pill checked" : "toggle-pill"}>{label}</span>;
-}
-
-function createDraftRow(values: Record<string, string>): DraftInventoryRow {
-  draftRowCounter += 1;
-  return { id: `draft-row-${draftRowCounter}`, values };
-}
-
-function emptyRow(columns: InventoryColumn[]): Record<string, string> {
-  const row: Record<string, string> = {};
-  for (const column of columns) {
-    row[column.key] = "";
-  }
-
-  return row;
+  return <div className={`app-global-tooltip ${tooltip.align}`} role="tooltip" style={style}>{tooltip.text}</div>;
 }