aidevops 3.21.12 → 3.22.1

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

@@ -0,0 +1,114 @@
+/* jshint esversion: 11 */
+import type { ReactNode } from "react";
+import type { GuiFileRootId, GuiStatusData } from "../../gui-shared/src";
+import { SurfaceGlyph } from "./AppNavigation";
+import type { SurfaceId, SurfaceNavItem } from "./app-model";
+import { inventorySurfaceConfigs, text } from "./app-model";
+import { FileExplorerSurface } from "./FileExplorerSurface";
+import { AppsSurface, EditableInventorySurface, InstallationSurface } from "./InventorySurfaces";
+import { AiProvidersSurface, LocalReposSurface, OverviewSurface, PlannedSurface, ProjectsSurface, SecuritySurface } from "./StatusSurfaces";
+
+export function Workspace({ activeItem, activeSectionLabel, activeSurface, fileRoot, status }: {
+  activeItem: SurfaceNavItem;
+  activeSectionLabel: string;
+  activeSurface: SurfaceId;
+  fileRoot: GuiFileRootId | undefined;
+  status: GuiStatusData;
+}) {
+  return (
+    <section className="app-inset" aria-label={text.workspaceLabel}>
+      <WorkspaceHeader activeItem={activeItem} activeSectionLabel={activeSectionLabel} version={displayVersion(status)} />
+      <div className="workspace-scroll">
+        <SurfaceContent activeSurface={activeSurface} fileRoot={fileRoot} status={status} />
+      </div>
+    </section>
+  );
+}
+
+function WorkspaceHeader({ activeItem, activeSectionLabel, version }: {
+  activeItem: SurfaceNavItem;
+  activeSectionLabel: string;
+  version: string;
+}) {
+  const versionLabel = version.startsWith("v") ? version : `v${version}`;
+
+  return (
+    <header className="workspace-header">
+      <div className="header-title">
+        <span className="workspace-surface-icon" aria-hidden="true"><SurfaceGlyph icon={activeItem.icon} /></span>
+        <div>
+          <p>{activeSectionLabel}</p>
+          <h1>{activeItem.label}</h1>
+        </div>
+      </div>
+      <div className="header-actions">
+        <label className="workspace-search">
+          <span>⌘K</span>
+          <input disabled placeholder={text.searchPlaceholder} />
+        </label>
+        <span className="version-pill" title={`aidevops version ${versionLabel}`}>{versionLabel}</span>
+      </div>
+    </header>
+  );
+}
+
+function displayVersion(status: GuiStatusData): string {
+  if (status.update.installed_version !== "unknown") {
+    return status.update.installed_version;
+  }
+
+  return status.aidevops_version;
+}
+
+function SurfaceContent({ activeSurface, fileRoot, status }: {
+  activeSurface: SurfaceId;
+  fileRoot: GuiFileRootId | undefined;
+  status: GuiStatusData;
+}) {
+  const inventoryConfig = inventorySurfaceConfigs[activeSurface];
+  const staticSurfaces: Partial<Record<SurfaceId, ReactNode>> = {
+    overview: <OverviewSurface status={status} />,
+    routines: <PlannedSurface label={text.routines} detail={text.routineDetail} />,
+    devices: <PlannedSurface label={text.devices} detail={text.devicesIntro} />,
+    vpnsProxies: <PlannedSurface label={text.vpnsProxies} detail={text.vpnsProxiesIntro} />,
+    emailAccounts: <PlannedSurface label={text.emailAccounts} detail={text.managementIntro} />,
+    messagingAccounts: <PlannedSurface label={text.messagingAccounts} detail={text.managementIntro} />,
+    tasks: <PlannedSurface label={text.tasks} detail={text.managementIntro} />,
+    contacts: <PlannedSurface label={text.contacts} detail={text.managementIntro} />,
+    events: <PlannedSurface label={text.events} detail={text.managementIntro} />,
+    notes: <PlannedSurface label={text.notes} detail={text.managementIntro} />,
+    bookmarks: <PlannedSurface label={text.bookmarks} detail={text.managementIntro} />,
+    websites: <PlannedSurface label={text.websites} detail={text.websitesIntro} />,
+    forums: <PlannedSurface label={text.forums} detail={text.forumsIntro} />,
+    socialMedia: <PlannedSurface label={text.socialMedia} detail={text.socialMediaIntro} />,
+    marketplaces: <PlannedSurface label={text.marketplaces} detail={text.marketplacesIntro} />,
+    inbox: <PlannedSurface label={text.inbox} detail={text.projectWorkIntro} />,
+    campaigns: <PlannedSurface label={text.campaigns} detail={text.projectWorkIntro} />,
+    cases: <PlannedSurface label={text.cases} detail={text.projectWorkIntro} />,
+    projectConfig: <PlannedSurface label={text.config} detail={text.projectWorkIntro} />,
+    feedback: <PlannedSurface label={text.feedback} detail={text.projectWorkIntro} />,
+    knowledge: <PlannedSurface label={text.knowledge} detail={text.projectWorkIntro} />,
+    maintenance: <PlannedSurface label={text.maintenance} detail={text.projectWorkIntro} />,
+    performance: <PlannedSurface label={text.performance} detail={text.projectWorkIntro} />,
+    reports: <PlannedSurface label={text.reports} detail={text.projectWorkIntro} />,
+    apps: <AppsSurface />,
+    installation: <InstallationSurface />,
+    projects: <ProjectsSurface status={status} />,
+    security: <SecuritySurface status={status} />,
+    aiProviders: <AiProvidersSurface status={status} />,
+  };
+
+  if (activeSurface === "git") {
+    return <LocalReposSurface status={status} />;
+  }
+
+  if (fileRoot) {
+    return <FileExplorerSurface key={fileRoot} rootId={fileRoot} />;
+  }
+
+  if (inventoryConfig) {
+    return <EditableInventorySurface {...inventoryConfig} />;
+  }
+
+  return staticSurfaces[activeSurface] ?? null;
+}

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

@@ -0,0 +1,153 @@
+import type { GuiFileEntry, GuiFileExplorerData, GuiFilePreview, GuiFileRootId, GuiResponseEnvelope } from "@aidevops/gui-shared";
+import { type ReactElement, useEffect, useState } from "react";
+import { text } from "./app-model";
+import { PathActions } from "./PathActions";
+import { fetchFileExplorer, mockedFileExplorer } from "./status-client";
+
+export function FileExplorerSurface({ rootId }: { rootId: GuiFileRootId }): ReactElement {
+  const [relativePath, setRelativePath] = useState("");
+  const [explorer, setExplorer] = useState<GuiResponseEnvelope<GuiFileExplorerData>>(() => mockedFileExplorer(rootId));
+  const [markdownFormatted, setMarkdownFormatted] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchFileExplorer(rootId, relativePath)
+      .then((response) => {
+        if (!cancelled) {
+          setExplorer(response);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setExplorer(mockedFileExplorer(rootId));
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [rootId, relativePath]);
+
+  const data = explorer.data;
+  const intro = explorerIntro(rootId, data.root.description);
+
+  return (
+    <section className="surface-page" aria-label={data.root.label}>
+      <section className="panel explorer-panel">
+        <div className="section-heading split-heading">
+          <div>
+            <p className="eyebrow">{data.root.path_ref}</p>
+            <h2>{data.root.label}</h2>
+            <p>{intro}</p>
+          </div>
+          <PathActions pathRef={data.current_path_ref} />
+        </div>
+        <div className="file-workspace">
+          <div className="file-list-pane">
+            <ul className="file-list" aria-label={`${data.root.label} file list`}>
+              <li>
+                <button className="file-entry parent-entry" disabled={data.current_relative_path.length === 0} onClick={() => setRelativePath(parentPath(data.current_relative_path))} type="button">
+                  <span>↰</span>
+                  <strong>{text.parentDirectory}</strong>
+                </button>
+              </li>
+              {data.entries.map((entry) => (
+                <FileEntryButton entry={entry} key={entry.path_ref} setRelativePath={setRelativePath} />
+              ))}
+            </ul>
+          </div>
+          <FilePreviewPanel markdownFormatted={markdownFormatted} preview={data.selected_preview} setMarkdownFormatted={setMarkdownFormatted} />
+        </div>
+      </section>
+    </section>
+  );
+}
+
+function FileEntryButton({ entry, setRelativePath }: { entry: GuiFileEntry; setRelativePath: (path: string) => void }): ReactElement {
+  return (
+    <li className="file-entry-row">
+      <button className="file-entry" onClick={() => setRelativePath(entry.relative_path)} type="button">
+        <span>{entry.kind === "directory" ? "▸" : "•"}</span>
+        <strong>{entry.name}</strong>
+        <small>{entry.kind}</small>
+      </button>
+      <PathActions pathRef={entry.path_ref} />
+    </li>
+  );
+}
+
+function FilePreviewPanel({ markdownFormatted, preview, setMarkdownFormatted }: {
+  markdownFormatted: boolean;
+  preview: GuiFilePreview | null;
+  setMarkdownFormatted: (value: boolean) => void;
+}): ReactElement {
+  if (preview === null) {
+    return <aside className="file-preview empty-preview"><p>{text.noPreview}</p></aside>;
+  }
+
+  if (preview.mode === "blocked") {
+    return <aside className="file-preview empty-preview"><p>{preview.reason}</p></aside>;
+  }
+
+  const isMarkdown = preview.mode === "markdown";
+  return (
+    <aside className="file-preview">
+      <div className="preview-header">
+        <div>
+          <p className="eyebrow">{preview.language || text.codeView}</p>
+          <strong>{preview.path_ref}</strong>
+        </div>
+        {isMarkdown ? (
+          <label className="toggle-row">
+            <input checked={markdownFormatted} onChange={(event) => setMarkdownFormatted(event.currentTarget.checked)} type="checkbox" />
+            <span>{text.markdownFormatted}</span>
+          </label>
+        ) : null}
+      </div>
+      {preview.truncated ? <p className="notice compact-notice">{text.truncated}</p> : null}
+      {isMarkdown && markdownFormatted ? <MarkdownPreview content={preview.content} /> : <pre className="code-preview"><code>{preview.content}</code></pre>}
+    </aside>
+  );
+}
+
+function MarkdownPreview({ content }: { content: string }): ReactElement {
+  return (
+    <div className="markdown-preview">
+      {content.split("\n").slice(0, 240).map((line, index) => renderMarkdownLine(line, index))}
+    </div>
+  );
+}
+
+function renderMarkdownLine(line: string, index: number): ReactElement {
+  if (line.startsWith("### ")) {
+    return <h4 key={`${index}:${line}`}>{line.slice(4)}</h4>;
+  }
+  if (line.startsWith("## ")) {
+    return <h3 key={`${index}:${line}`}>{line.slice(3)}</h3>;
+  }
+  if (line.startsWith("# ")) {
+    return <h2 key={`${index}:${line}`}>{line.slice(2)}</h2>;
+  }
+  if (line.startsWith("- ")) {
+    return <p className="markdown-bullet" key={`${index}:${line}`}>{line}</p>;
+  }
+
+  return <p key={`${index}:${line}`}>{line.length > 0 ? line : "\u00a0"}</p>;
+}
+
+function explorerIntro(rootId: GuiFileRootId, agentsDescription: string): string {
+  if (rootId === "agents") {
+    return agentsDescription;
+  }
+  if (rootId === "config") {
+    return text.configIntro;
+  }
+
+  return rootId === "localSetup" ? text.localSetupIntro : text.gitIntro;
+}
+
+function parentPath(relativePath: string): string {
+  const parts = relativePath.split("/").filter(Boolean);
+  parts.pop();
+  return parts.join("/");
+}

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

@@ -0,0 +1,117 @@
+import { type ReactElement, useState } from "react";
+import type { InventoryColumn } from "./app-model";
+import { appRows, installationRows, text } from "./app-model";
+
+interface DraftInventoryRow {
+  id: string;
+  values: Record<string, string>;
+}
+
+let draftRowCounter = 0;
+
+export function AppsSurface(): ReactElement {
+  return (
+    <section className="panel" aria-label={text.apps}>
+      <div className="section-heading">
+        <p className="eyebrow">{text.infrastructure}</p>
+        <h2>{text.apps}</h2>
+        <p>{text.appsIntro}</p>
+      </div>
+      <div className="data-table">
+        <div className="data-row header-row"><span>{text.name}</span><span>{text.latest}</span><span>{text.channel}</span><span>{text.website}</span></div>
+        {appRows.map((row) => (
+          <div className="data-row" key={row.name}><span>{row.name}</span><span>{row.latest}</span><span>{row.channel}</span><span>{row.website}</span></div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+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;
+}

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

@@ -0,0 +1,17 @@
+/* jshint esversion: 11 */
+import { text } from "./app-model";
+
+export function PathActions({ pathRef }: { pathRef: string }) {
+  const copy = () => {
+    if (typeof navigator !== "undefined" && navigator.clipboard !== undefined) {
+      void navigator.clipboard.writeText(pathRef);
+    }
+  };
+
+  return (
+    <span className="path-actions">
+      <button aria-label={text.copyPath} onClick={copy} title={text.copyPath} type="button">⧉</button>
+      <button aria-label={text.folderOpenBlocked} disabled title={text.folderOpenBlocked} type="button">⌂</button>
+    </span>
+  );
+}