@openforge-app/plugin-sdk 0.2.9 → 0.2.10

package/dist/types.js

@@ -34,7 +34,6 @@ const OPENFORGE_PLUGIN_CAPABILITY_TYPE_MEMBERS = [
     'config',
     'projectConfig',
     'browserSurfaces',
-    'taskLinks',
     'appEnablement',
     'customSidebarNavigation',
     'reviewUI',
@@ -71,6 +70,7 @@ export class TaskFollowUpError extends Error {
         this.code = code;
     }
 }
+export const MAX_AGENT_SESSION_PAGE_SIZE = 250;
 export function makePluginViewKey(pluginId, viewId) {
     return `plugin:${pluginId}:${viewId}`;
 }

package/dist/ui/Modal.svelte

@@ -4,12 +4,15 @@
 
   export type ModalInitialFocus = HTMLElement | string | (() => HTMLElement | null | undefined) | null | undefined
 
+  type ModalAccessibleName =
+    | { ariaLabel: string; ariaLabelledby?: never }
+    | { ariaLabel?: never; ariaLabelledby: string }
+
   interface Props {
     onClose: () => void
     maxWidth?: string
     overflowVisible?: boolean
     initialFocus?: ModalInitialFocus
-    ariaLabel?: string
     showHeader?: boolean
     closeLabel?: string
     closeDisabled?: boolean
@@ -21,7 +24,34 @@
     children: Snippet
   }
 
-  let { onClose, maxWidth = '500px', overflowVisible = false, initialFocus, ariaLabel, showHeader = true, closeLabel = 'Close dialog', closeDisabled = false, onKeydown, testId, modalClass = '', boxClass = '', header, children }: Props = $props()
+  let { onClose, maxWidth = '500px', overflowVisible = false, initialFocus, ariaLabel, ariaLabelledby, showHeader = true, closeLabel = 'Close dialog', closeDisabled = false, onKeydown, testId, modalClass = '', boxClass = '', header, children }: Props & ModalAccessibleName = $props()
+  let accessibleNameAttributes = $derived.by(() => {
+    const hasAriaLabel = Boolean(ariaLabel?.trim())
+    const hasAriaLabelledby = Boolean(ariaLabelledby?.trim())
+
+    if (hasAriaLabel === hasAriaLabelledby) {
+      throw new Error('Modal requires exactly one non-empty accessible name prop: ariaLabel or ariaLabelledby')
+    }
+
+    return {
+      ariaLabel: hasAriaLabel ? ariaLabel : undefined,
+      ariaLabelledby: hasAriaLabelledby ? ariaLabelledby : undefined,
+    }
+  })
+
+  $effect(() => {
+    const idReferences = accessibleNameAttributes.ariaLabelledby?.split(/\s+/)
+    if (!idReferences) return
+
+    const hasNamingText = idReferences.some((id) => {
+      const labelledElement = document.getElementById(id)
+      return Boolean(labelledElement?.textContent?.trim() || labelledElement?.getAttribute('aria-label')?.trim())
+    })
+
+    if (!hasNamingText) {
+      throw new Error('Modal ariaLabelledby must reference at least one element with naming text')
+    }
+  })
 
   let modalElement: HTMLDivElement | null = $state(null)
   let hasAppliedInitialFocus = false
@@ -142,7 +172,7 @@
   }
 </script>
 
-<div bind:this={modalElement} class="modal modal-open {modalClass}" data-testid={testId} onclick={handleOverlayClick} onkeydown={handleKeydown} role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="-1">
+<div bind:this={modalElement} class="modal modal-open {modalClass}" data-testid={testId} onclick={handleOverlayClick} onkeydown={handleKeydown} role="dialog" aria-modal="true" aria-label={accessibleNameAttributes.ariaLabel} aria-labelledby={accessibleNameAttributes.ariaLabelledby} tabindex="-1">
   <div class="modal-box bg-base-100 shadow-xl p-0 flex flex-col max-h-[90vh] {overflowVisible ? 'overflow-visible' : ''} {boxClass}" style="max-width: {maxWidth}">
     {#if showHeader}
       <div class="flex items-center justify-between px-5 py-4 border-b border-base-300">

package/dist/ui/PluginPageHeader.svelte

@@ -5,17 +5,24 @@
     title: string
     subtitle?: string | null
     surface?: 'default' | 'subtle'
+    headingLevel?: 'h1' | 'h2'
     actions?: Snippet
   }
 
-  let { title, subtitle = null, surface = 'subtle', actions }: Props = $props()
+  let {
+    title,
+    subtitle = null,
+    surface = 'default',
+    headingLevel = 'h1',
+    actions,
+  }: Props = $props()
 </script>
 
-<header class="flex items-center justify-between gap-4 border-b border-base-300 px-6 py-3 shrink-0 {surface === 'default' ? 'bg-base-100' : 'bg-base-200'}">
+<header class="flex min-h-13 shrink-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 border-b border-base-300 px-4 py-2 sm:px-6 {surface === 'default' ? 'bg-base-100' : 'bg-base-200'}">
   <div class="min-w-0">
-    <h2 class="text-[22px] font-semibold text-base-content tracking-tight m-0 truncate">{title}</h2>
+    <svelte:element this={headingLevel} class="m-0 truncate text-base font-semibold leading-5 tracking-[-0.01em] text-base-content">{title}</svelte:element>
     {#if subtitle}
-      <p class="text-[13px] text-secondary mt-0.5 m-0 truncate">{subtitle}</p>
+      <p class="m-0 mt-0.5 truncate text-[13px] leading-5 text-base-content/60">{subtitle}</p>
     {/if}
   </div>
   {#if actions}

package/dist/ui/PluginPageShell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    header: Snippet
+    children: Snippet
+    class?: string
+  }
+
+  let { header, children, class: className = '' }: Props = $props()
+</script>
+
+<div class="flex h-full min-h-0 flex-col overflow-hidden bg-base-100 text-base-content {className}">
+  <div class="shrink-0">
+    {@render header()}
+  </div>
+  <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+    {@render children()}
+  </div>
+</div>

package/dist/ui/ProjectFileTree.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+  import FileTypeIcon from './FileTypeIcon.svelte'
+  import {
+    buildProjectFileTree,
+    flattenVisibleProjectFileTree,
+    formatProjectFileTreeSize,
+    getProjectFileTreeDepth,
+    getProjectFileTreeItemAccessibility,
+    getProjectFileTreeKeyboardAction,
+    projectFileTreePathToId,
+    type ProjectFileTreeNode,
+  } from '../projectFileTree'
+  import type { FileEntry } from '../domain'
+
+  interface Props {
+    entries: FileEntry[]
+    expandedDirs: Set<string>
+    selectedPath: string | null
+    onToggleDir: (path: string) => void
+    onSelectFile: (path: string) => void
+    initialScrollTop?: number
+    onScrollTopChange?: (scrollTop: number) => void
+    focusSelectedRequest?: number | null
+  }
+
+  type TreeNode = ProjectFileTreeNode<FileEntry>
+
+  const {
+    entries,
+    expandedDirs,
+    selectedPath,
+    onToggleDir,
+    onSelectFile,
+    initialScrollTop = 0,
+    onScrollTopChange,
+    focusSelectedRequest = null,
+  }: Props = $props()
+
+  let scrollContainer = $state<HTMLDivElement | null>(null)
+  let appliedInitialScrollTop = $state<number | null>(null)
+  let focusedPath = $state<string | null>(null)
+  let lastSelectedPath = $state<string | null>(null)
+  let appliedFocusSelectedRequest = $state<number | null>(null)
+
+  const treeNodes = $derived(buildProjectFileTree(entries))
+  const visibleNodes = $derived(flattenVisibleProjectFileTree(treeNodes, expandedDirs))
+  const visiblePaths = $derived(visibleNodes.map((node) => node.entry.path))
+
+  function getTreeItemElement(path: string): HTMLElement | null {
+    const index = visiblePaths.indexOf(path)
+    if (index === -1) return null
+    return scrollContainer?.querySelector<HTMLElement>(`[data-tree-index="${index}"]`) ?? null
+  }
+
+  async function focusPath(path: string) {
+    focusedPath = path
+    await tick()
+    getTreeItemElement(path)?.focus()
+  }
+
+  function activateNode(node: TreeNode) {
+    if (node.entry.isDir) {
+      void focusPath(node.entry.path)
+      onToggleDir(node.entry.path)
+    } else {
+      onSelectFile(node.entry.path)
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent, node: TreeNode) {
+    const action = getProjectFileTreeKeyboardAction(event, node, { expandedDirs, visiblePaths })
+    if (!action.handled) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    switch (action.type) {
+      case 'activate':
+        activateNode(node)
+        break
+      case 'focus':
+        void focusPath(action.path)
+        break
+      case 'toggle':
+        onToggleDir(action.path)
+        break
+      case 'none':
+        break
+    }
+  }
+
+  function handleScroll() {
+    if (scrollContainer) {
+      onScrollTopChange?.(scrollContainer.scrollTop)
+    }
+  }
+
+  $effect(() => {
+    if (scrollContainer && appliedInitialScrollTop !== initialScrollTop) {
+      scrollContainer.scrollTop = initialScrollTop
+      appliedInitialScrollTop = initialScrollTop
+    }
+  })
+
+  $effect(() => {
+    const selectedChanged = selectedPath !== lastSelectedPath
+
+    if (selectedChanged && selectedPath !== null && visiblePaths.includes(selectedPath)) {
+      focusedPath = selectedPath
+    } else if (focusedPath === null || !visiblePaths.includes(focusedPath)) {
+      focusedPath = selectedPath !== null && visiblePaths.includes(selectedPath) ? selectedPath : visiblePaths[0] ?? null
+    }
+
+    lastSelectedPath = selectedPath
+  })
+
+  $effect(() => {
+    if (focusSelectedRequest === null || appliedFocusSelectedRequest === focusSelectedRequest) return
+    appliedFocusSelectedRequest = focusSelectedRequest
+    if (selectedPath !== null && visiblePaths.includes(selectedPath)) {
+      void focusPath(selectedPath)
+    }
+  })
+</script>
+
+<div class="flex h-full flex-col border-r border-base-300 bg-base-100">
+  <div
+    class="flex-1 overflow-y-auto py-2"
+    bind:this={scrollContainer}
+    onscroll={handleScroll}
+    role="tree"
+    aria-label="Project files"
+  >
+    {#snippet renderNodes(nodes: TreeNode[])}
+      {#each nodes as node (node.entry.path)}
+        {@const entry = node.entry}
+        {@const isExpanded = expandedDirs.has(entry.path)}
+        {@const isSelected = selectedPath === entry.path}
+        {@const treeIndex = visiblePaths.indexOf(entry.path)}
+        {@const labelId = `${projectFileTreePathToId(entry.path)}-label`}
+        {@const sizeId = `${projectFileTreePathToId(entry.path)}-size`}
+        {@const a11y = getProjectFileTreeItemAccessibility(node, { expandedDirs, selectedPath, labelId, sizeId })}
+        <div
+          class="outline-none [&:focus-visible>div:first-child]:ring-2 [&:focus-visible>div:first-child]:ring-inset [&:focus-visible>div:first-child]:ring-primary/60"
+          role="treeitem"
+          tabindex={focusedPath === entry.path ? 0 : -1}
+          aria-level={a11y.level}
+          aria-setsize={a11y.setSize}
+          aria-posinset={a11y.posInSet}
+          aria-expanded={a11y.expanded}
+          aria-current={a11y.current}
+          aria-selected={a11y.selected}
+          aria-labelledby={a11y.labelledBy}
+          data-testid="tree-entry"
+          data-tree-index={treeIndex}
+          onclick={(event) => {
+            event.stopPropagation()
+            activateNode(node)
+          }}
+          onkeydown={(event) => handleKeydown(event, node)}
+          onfocus={() => {
+            focusedPath = entry.path
+          }}
+        >
+          <div
+            class="w-full flex items-center gap-2 text-xs cursor-pointer transition-colors py-1.5 pr-3 {entry.isDir ? 'text-base-content hover:bg-base-content/5' : isSelected ? 'bg-primary/10 text-primary font-medium border-l-2 border-l-primary hover:bg-primary/15' : 'text-base-content hover:bg-base-content/5'}"
+            style="padding-left: {entry.isDir || !isSelected ? 12 + getProjectFileTreeDepth(entry.path) * 16 : 10 + getProjectFileTreeDepth(entry.path) * 16}px"
+          >
+            {#if entry.isDir}
+              <span class="text-[0.6rem] text-base-content/50 shrink-0" data-testid={`dir-indicator-${entry.path}`} aria-hidden="true">{isExpanded ? '▼' : '▶'}</span>
+              <FileTypeIcon folder open={isExpanded} class="w-3.5 h-3.5" />
+              <span id={labelId} class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left" data-testid="entry-label">{entry.name}/</span>
+            {:else}
+              <FileTypeIcon filename={entry.path} class="w-3.5 h-3.5" />
+              <span id={labelId} class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left" data-testid="entry-label">{entry.name}</span>
+              <span id={sizeId} class="text-base-content/50 text-[0.7rem] ml-auto">{formatProjectFileTreeSize(entry.size)}</span>
+            {/if}
+          </div>
+
+          {#if entry.isDir && isExpanded && node.children.length > 0}
+            <div role="group">
+              {@render renderNodes(node.children)}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    {/snippet}
+
+    {@render renderNodes(treeNodes)}
+  </div>
+</div>

package/dist/vite.js

@@ -4,7 +4,7 @@
  * plugin://host-runtime assets are derived from the same host-runtime contract.
  */
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { OPENFORGE_PLUGIN_SDK_PUBLIC_UI_EXPORTS } from './publicUiExports.mjs';
+import { OPENFORGE_PLUGIN_SDK_PUBLIC_ENTRYPOINTS } from './publicEntrypoints.mjs';
 import { OPENFORGE_HOST_RUNTIME_SVELTE_SPECIFIERS as HOST_RUNTIME_SVELTE_SPECIFIERS } from './svelteHostRuntimeContract.mjs';
 export const OPENFORGE_HOST_RUNTIME_SVELTE_SPECIFIERS = HOST_RUNTIME_SVELTE_SPECIFIERS;
 export const OPENFORGE_HOST_SHARED_SVELTE_IMPORTS = OPENFORGE_HOST_RUNTIME_SVELTE_SPECIFIERS;
@@ -26,22 +26,12 @@ export function isOpenForgeHostRuntimeExternal(id) {
 }
 export const openforgePluginViteExternals = isOpenForgeHostRuntimeExternal;
 const OPENFORGE_PLUGIN_SDK_SOURCE_ENTRYPOINTS = Object.freeze([
-    ['@openforge-app/plugin-sdk/frontend', 'packages/plugin-sdk/src/frontend.ts'],
-    ['@openforge-app/plugin-sdk/backend', 'packages/plugin-sdk/src/backend.ts'],
-    ['@openforge-app/plugin-sdk/testing', 'packages/plugin-sdk/src/testing.ts'],
-    ['@openforge-app/plugin-sdk/vite', 'packages/plugin-sdk/src/vite.ts'],
-    ['@openforge-app/plugin-sdk/package-metadata-schema.json', 'packages/plugin-sdk/src/openforgePackageMetadataSchema.json'],
-    ['@openforge-app/plugin-sdk/domain', 'packages/plugin-sdk/src/domain.ts'],
-    ['@openforge-app/plugin-sdk/prStatusPresentation', 'packages/plugin-sdk/src/prStatusPresentation.ts'],
-    ['@openforge-app/plugin-sdk/markdown', 'packages/plugin-sdk/src/markdown.ts'],
-    ['@openforge-app/plugin-sdk/numberParsing', 'packages/plugin-sdk/src/numberParsing.ts'],
-    ['@openforge-app/plugin-sdk/projectFileTree', 'packages/plugin-sdk/src/projectFileTree.ts'],
-    ['@openforge-app/plugin-sdk/sanitize', 'packages/plugin-sdk/src/sanitize.ts'],
-    ['@openforge-app/plugin-sdk/pluginIcons', 'packages/plugin-sdk/src/pluginIcons.ts'],
-    ['@openforge-app/plugin-sdk/fileIcons', 'packages/plugin-sdk/src/fileIcons.ts'],
-    ['@openforge-app/plugin-sdk/collapsibleSectionState', 'packages/plugin-sdk/src/collapsibleSectionState.ts'],
-    ...OPENFORGE_PLUGIN_SDK_PUBLIC_UI_EXPORTS.map(({ importSpecifier, workspaceSourcePath }) => [importSpecifier, workspaceSourcePath]),
-    ['@openforge-app/plugin-sdk', 'packages/plugin-sdk/src/index.ts'],
+    ...OPENFORGE_PLUGIN_SDK_PUBLIC_ENTRYPOINTS
+        .filter(({ packageSubpath }) => packageSubpath !== '.')
+        .map(({ importSpecifier, workspaceSourcePath }) => [importSpecifier, workspaceSourcePath]),
+    ...OPENFORGE_PLUGIN_SDK_PUBLIC_ENTRYPOINTS
+        .filter(({ packageSubpath }) => packageSubpath === '.')
+        .map(({ importSpecifier, workspaceSourcePath }) => [importSpecifier, workspaceSourcePath]),
 ]);
 function repoRootUrl(repoRoot) {
     if (repoRoot instanceof URL) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openforge-app/plugin-sdk",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -68,15 +68,21 @@
       "types": "./dist/collapsibleSectionState.d.ts",
       "default": "./dist/collapsibleSectionState.js"
     },
+    "./taskBrowserDevToolsShortcuts": {
+      "types": "./dist/taskBrowserDevToolsShortcuts.d.ts",
+      "default": "./dist/taskBrowserDevToolsShortcuts.js"
+    },
     "./ui/Button.svelte": "./dist/ui/Button.svelte",
     "./ui/Checkbox.svelte": "./dist/ui/Checkbox.svelte",
     "./ui/MarkdownContent.svelte": "./dist/ui/MarkdownContent.svelte",
     "./ui/ResizablePanel.svelte": "./dist/ui/ResizablePanel.svelte",
     "./ui/Modal.svelte": "./dist/ui/Modal.svelte",
     "./ui/PluginPageHeader.svelte": "./dist/ui/PluginPageHeader.svelte",
+    "./ui/PluginPageShell.svelte": "./dist/ui/PluginPageShell.svelte",
     "./ui/PluginViewState.svelte": "./dist/ui/PluginViewState.svelte",
     "./ui/PluginSidebarLink.svelte": "./dist/ui/PluginSidebarLink.svelte",
     "./ui/FileTypeIcon.svelte": "./dist/ui/FileTypeIcon.svelte",
+    "./ui/ProjectFileTree.svelte": "./dist/ui/ProjectFileTree.svelte",
     "./ui/CollapsibleSection.svelte": "./dist/ui/CollapsibleSection.svelte"
   },
   "files": [
@@ -104,7 +110,8 @@
   },
   "scripts": {
     "clean": "node -e \"import('node:fs').then(({ rmSync }) => rmSync('dist', { recursive: true, force: true }))\"",
-    "build": "pnpm run clean && tsc && pnpm run build:assets",
+    "check:entrypoints": "node ./scripts/check-entrypoint-registries.mjs",
+    "build": "pnpm run check:entrypoints && pnpm run clean && tsc && pnpm run build:assets",
     "build:assets": "node ./scripts/copy-package-assets.mjs",
     "check:contract": "node ./scripts/check-published-contract.mjs",
     "icons:generate": "node ./scripts/generate-file-type-icons.mjs",