CmdPal JS/TS Extensions - Phase 7: details size, prefix-select, image fix (+ design proposals)

[michaeljolley]

Note

This PR is the last in a series focused on adding TypeScript/JavaScript extension support to Command Palette. A detailed design can be located in the initial PR #49321.

Phase 7: CmdPal JS/TS Extensions - protocol additions

Stacked on dev/mjolley/phase-6-cmdpal-docs-sample (this PR targets that branch, not main). Part of the JS/TS Command Palette extensions effort tracked by #48707.

This phase delivers three items that are fully feasible inside the existing C# ABI (no new IDL, no new wire methods), plus two design proposals that need a go/no-go before any new wire surface is added.

1. Details size (small / medium / large)

The host already supports sized details panes: DetailsViewModel reads IExtendedAttributesProvider.GetProperties()["Size"] as an int and casts it to ContentSize (Small=0, Medium=1, Large=2), and DetailsSizeToGridLengthConverter consumes it. The toolkit Details type already implements IExtendedAttributesProvider and returns { "Size": (int)Size }. The only gaps were in the JS layers.

Changes:

• ts-sdk (types.ts, serialize.ts): added an optional size field to Details, typed DetailsSize | number where DetailsSize = 'small' | 'medium' | 'large', and serialize it on the wire (omitted when unset).
• C# (JSModelMapper.ParseDetails): map the details size field onto Details.Size. A new ParseContentSize helper accepts either the numeric ContentSize (0/1/2) or the string form ('small'/'medium'/'large') and defaults to Small.
• Sample (detailsPage.ts): the metadata details item now requests size: 'large' so the larger pane is visible.

Wire shape (Details): "size": "large" or "size": 2. Both map to ContentSize.Large.

2. Prefix-select (textToSuggest fills the search box)

Root-caused as already wired end to end. The TS SDK (IListItem.textToSuggest), the wire serializer (serialize.ts), and the C# JSListItemAdapter all carry textToSuggest, and the host ListViewModel posts UpdateSuggestionMessage on selection.

The only reason selection does not fill the box by default is the host feature flag IsTextToSuggestEnabled in SearchBar.xaml.cs, which reads the environment variable CMDPAL_ENABLE_SUGGESTION_SELECTION and is off by default. That flag ships on main (authored by a maintainer, not introduced by these phases) and is intentionally NOT force-enabled here. The textToSuggest SDK and adapter plumbing is correct and stays in place; a ts-sdk serialize test locks the wire field so a future refactor cannot silently drop it. See Round 2 item 5 for the fate of the sample demo page.

3. Image content sample renders nothing

The Phase 4 crash fix (short-circuiting IconLoaderService scaled size to Size.Empty when iconSize.IsEmpty) is not the cause. That no-resize path still loads string and URL icons; the details hero image flows through the same path and renders correctly because Phase 6 localized it to a packaged asset.

Root cause: the image content sample page still pointed at a remote https URL, which does not render in the host. Only the hero (details) image was localized in Phase 6.

Change (contentPages.ts): SampleImageContentPage now references the committed local assets/hero.png via the fileURLToPath(new URL(...)) pattern already used by the details page. No host code path changed, so no host tests were added.

Validation (Round 1)

• ts-sdk: npm run build clean, tests pass, eslint clean.
• Sample extension: npm run build exit 0.
• C# solution filter build (CommandPalette.slnf, x64 Debug): exit 0.
• CmdPal *.UnitTests assemblies green.

No XAML was changed. No warnings suppressed. No emdash used.

---

Deferred design items (documented as known gaps)

Per the orchestrating workstream's go/no-go, Phase 7 does not implement the two design proposals below. They are documented as known gaps in doc/json-rpc-spec/overview.md and deferred to a future phase. No new wire surface was added.

4. Per-page lifecycle: OnLoad / OnUnload (deferred)

IPage (IDL) has no OnLoad/OnUnload. In the JS runtime, "OnLoad" already happens implicitly: the first getItems fetch after navigation is the de facto load signal. There is no equivalent for a page being navigated away from, and no C# ABI notification exists for either direction. The likely future shape is an additive JS-only page/unloaded notification emitted at PageViewModel.UnsafeCleanup(), with no C# parity and no WinRT IDL change.

5. Drag and drop (DataPackage) (deferred)

There is no drag-drop or DataPackage concept anywhere in the ABI, C# or JS. The only related primitive is clipboard. The minimal future path is copy-on-drag built on the existing clipboard primitive; the fuller path is a dedicated DataPackage-style wire payload plus host drag source and drop target handling, which is the only shape that would touch the WinRT ABI.

---

Round 2: dogfooding sample fixes

A follow-up dogfooding punch list against the sample extension. Every item was root-caused and fixed in the correct layer. No new protocol or wire surface was added.

1. Grid images missing (sample layer). Section sample items carried no icon, so grid and gallery variants showed empty tiles, while the C# SampleListPageWithSections gives every item a bundled image. Fixed by assigning the committed local hero.png asset to each section item (sectionsPages.ts), resolved from import.meta.url.

2. Section separator line missing (sample layer, host-vs-sample surprise). A titled Separator renders as heading text with no divider line; a plain Separator renders a horizontal line. This host behavior is shared with the built-in C# section pages, so the C# built-ins show no line under a titled heading either. Rather than change the shared host template (which would alter the CmdPal home page and every C# extension), the sample now emits a plain Separator divider line between sections in addition to the titled heading.

3. Details buttons do nothing (no defect found). Traced end to end and confirmed the JS DetailsCommands to command/invoke path is fully wired; clicking a details command button sends command/invoke and the extension responds with a status message. Verified over stdio. Added a unit test (JSAdapterProxyTests) that maps a details commands element and asserts invoking it sends command/invoke with the correct command id. The earlier "noop" report did not reproduce.

4. OnUnload demo (sample layer). OnUnload has no protocol support (see deferred item 4). The OnLoad sample and its registration now demonstrate OnLoad only, dropping all unload wording so the sample never implies unsupported behavior.

5. Remove prefixed-search demo (sample layer). Because the type-ahead selection rides the pre-existing host feature flag that ships off by default, the demo did nothing for users. Removed the prefixed-search sample page and its registration. The textToSuggest SDK and adapter plumbing (Round 1 item 2) is legitimate and stays in place.

6. Remove drag-and-drop sample (sample layer). Drag and drop is a documented gap (deferred item 5). Removed the drag-and-drop bits from the clipboard sample, leaving a clipboard-only demo. The documented gap note in the spec is left intact.

Also removed two now-stale README lines: the prefix suggestions bullet and the details-size "not mirrored" entry that Phase 7 already delivered.

Validation (Round 2)

• Sample extension: npm run build exit 0. ts-sdk untouched this round.
• C# solution filter build (CommandPalette.slnf, x64 Debug): exit 0.
• CmdPal *.UnitTests via the built x64 MTP DLLs: all green. Microsoft.CmdPal.UI.ViewModels.UnitTests 233/233 (including the new details-command invoke test), Toolkit 646, Common 225, Bookmarks 222, TimeDate 301, and the rest passing; WindowWalker reports "zero tests ran" (known harness quirk).
• Sample smoke over stdio confirmed: section items now carry icons, plain divider lines appear between sections, the samples list no longer lists the prefix suggestions page, the OnLoad entry is load-only, and the clipboard demo carries no drag-and-drop items.

No XAML was changed. No warnings suppressed. No emdash used.

---

Draft. The three Round 1 items are complete and validated, the two design items are documented as known gaps, and the Round 2 dogfooding punch list is addressed entirely in the sample layer plus one host-mapping unit test.