@hyperdreamer/pi-webui 1.11.2 → 1.11.4

package/dist/client/index.html

@@ -21,6 +21,7 @@
         --pi-terminal-text: #e6edf3;
         --pi-border: #30363d;
         --pi-border-muted: #21262d;
+        --pi-hierarchy-border: #5c6b80;
         --pi-text: #e6edf3;
         --pi-text-secondary: #c9d1d9;
         --pi-text-bright: #f0f6fc;
@@ -53,7 +54,7 @@
       html, body { margin: 0; height: 100%; overflow: hidden; background: var(--pi-bg); color: var(--pi-text); }
       body { min-height: 100dvh; }
     </style>
-    <script type="module" crossorigin src="./assets/index-DG-QGbW9.js"></script>
+    <script type="module" crossorigin src="./assets/index-6Nw3vRPS.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/vendor-editor-core-vUi74DnD.js">
     <link rel="modulepreload" crossorigin href="./assets/vendor-editor-languages-DoaXUodB.js">
     <link rel="modulepreload" crossorigin href="./assets/vendor-terminal-D8k4UKM2.js">

package/dist/pi-webui-plugins/workspace-learned-skills/learnedSkillsData.js

@@ -0,0 +1,2 @@
+// Generated from pi-webui-plugins/workspace-learned-skills/learnedSkillsData.ts. Do not edit directly.
+export {};

package/dist/pi-webui-plugins/workspace-learned-skills/learnedSkillsPanelElement.js

@@ -0,0 +1,420 @@
+// Generated from pi-webui-plugins/workspace-learned-skills/learnedSkillsPanelElement.ts. Do not edit directly.
+import { MAX_LIST_WIDTH, MIN_LIST_WIDTH, clampLearnedSkillsListWidth, readLearnedSkillsListWidth, writeLearnedSkillsListWidth, } from "./learnedSkillsPanelLayout.js";
+export const learnedSkillsPanelTagName = "pi-webui-learned-skills-panel";
+export function learnedSkillsBadge(state) {
+    if (state.kind !== "data")
+        return undefined;
+    const total = state.globalSkills.length + state.projectSkills.length;
+    return total > 0 ? total : undefined;
+}
+export function isLearnedSkillsPanelVisible(state) {
+    return state.kind !== "unavailable";
+}
+export function defineLearnedSkillsPanelElement() {
+    if (typeof customElements !== "undefined" && !customElements.get(learnedSkillsPanelTagName)) {
+        customElements.define(learnedSkillsPanelTagName, PiWebUiLearnedSkillsPanel);
+    }
+}
+// Keep the plugin importable in the Node-based contribution tests, where the
+// browser element globals are intentionally absent.
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+class NoopElement {
+}
+function noopElementConstructor() {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return NoopElement;
+}
+const BaseElement = typeof HTMLElement === "undefined"
+    ? noopElementConstructor()
+    : HTMLElement;
+class PiWebUiLearnedSkillsPanel extends BaseElement {
+    state = { kind: "loading" };
+    retry;
+    selectedSkillId;
+    showMobileDetail = false;
+    pointerInteraction;
+    resizeObserver;
+    connected = false;
+    preferredListWidth;
+    listWidth;
+    root;
+    constructor() {
+        super();
+        this.root = this.attachShadow({ mode: "open" });
+        this.preferredListWidth = readLearnedSkillsListWidth();
+        this.listWidth = this.preferredListWidth;
+    }
+    set context(_value) {
+        // Activity Rail supplies context for the host boundary. The panel reads
+        // only the already-shaped snapshot and retry callback below.
+    }
+    set learnedSkillsState(value) {
+        if (this.state === value)
+            return;
+        this.state = value;
+        this.reconcileSelection();
+        this.render();
+    }
+    set onRetry(value) {
+        this.retry = value;
+    }
+    connectedCallback() {
+        if (this.connected)
+            return;
+        this.connected = true;
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", this.handleWindowResize);
+            window.addEventListener("pointermove", this.handlePointerMove);
+            window.addEventListener("pointerup", this.handlePointerUp);
+            window.addEventListener("pointercancel", this.handlePointerCancel);
+        }
+        this.render();
+        if (typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver(this.handleObservedResize);
+            this.resizeObserver.observe(this);
+        }
+    }
+    disconnectedCallback() {
+        this.finishPointerInteraction(false);
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        if (this.connected && typeof window !== "undefined") {
+            window.removeEventListener("resize", this.handleWindowResize);
+            window.removeEventListener("pointermove", this.handlePointerMove);
+            window.removeEventListener("pointerup", this.handlePointerUp);
+            window.removeEventListener("pointercancel", this.handlePointerCancel);
+        }
+        this.connected = false;
+    }
+    handleObservedResize = () => {
+        if (this.connected)
+            this.handleWindowResize();
+    };
+    handleWindowResize = () => {
+        if (this.pointerInteraction === undefined)
+            this.applyPreferredListWidth();
+        else
+            this.updateSeparator();
+    };
+    handlePointerDown = (event) => {
+        if (event.button !== 0)
+            return;
+        const divider = event.currentTarget;
+        if (!(divider instanceof HTMLElement))
+            return;
+        event.preventDefault();
+        this.finishPointerInteraction(false);
+        this.pointerInteraction = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startWidth: this.listWidth,
+            divider,
+        };
+        divider.classList.add("dragging");
+        callPointerMethod(divider, "setPointerCapture", event.pointerId);
+    };
+    handlePointerMove = (event) => {
+        const interaction = this.pointerInteraction;
+        if (interaction?.pointerId !== event.pointerId)
+            return;
+        event.preventDefault();
+        this.updatePreferredListWidth(interaction.startWidth + event.clientX - interaction.startX);
+    };
+    handlePointerUp = (event) => {
+        if (this.pointerInteraction?.pointerId !== event.pointerId)
+            return;
+        this.finishPointerInteraction(true);
+    };
+    handlePointerCancel = (event) => {
+        if (this.pointerInteraction?.pointerId !== event.pointerId)
+            return;
+        this.finishPointerInteraction(false);
+    };
+    render() {
+        this.finishPointerInteraction(false);
+        this.applyPreferredListWidth();
+        this.root.innerHTML = `${panelStyles()}${renderPanelState(this.state, this.selectedSkillId, this.showMobileDetail)}`;
+        this.attachEventListeners();
+        this.updateSeparator();
+    }
+    attachEventListeners() {
+        for (const button of this.root.querySelectorAll("button[data-retry]")) {
+            button.addEventListener("click", () => { this.retry?.(); });
+        }
+        for (const button of this.root.querySelectorAll("button[data-skill-key]")) {
+            button.addEventListener("click", () => {
+                const key = button.dataset["skillKey"];
+                if (key !== undefined)
+                    this.selectSkill(key);
+            });
+        }
+        this.root.querySelector("button[data-back]")?.addEventListener("click", () => {
+            this.showMobileDetail = false;
+            this.render();
+        });
+        const divider = this.root.querySelector("[role=separator]");
+        divider?.addEventListener("pointerdown", this.handlePointerDown);
+        divider?.addEventListener("keydown", this.handleDividerKeyDown);
+    }
+    handleDividerKeyDown = (event) => {
+        const step = event.shiftKey ? 72 : 24;
+        let nextWidth;
+        if (event.key === "ArrowLeft")
+            nextWidth = this.listWidth - step;
+        else if (event.key === "ArrowRight")
+            nextWidth = this.listWidth + step;
+        else if (event.key === "Home")
+            nextWidth = MIN_LIST_WIDTH;
+        else if (event.key === "End")
+            nextWidth = this.runtimeMaximumWidth();
+        if (nextWidth === undefined)
+            return;
+        event.preventDefault();
+        this.updatePreferredListWidth(nextWidth, true);
+    };
+    selectSkill(key) {
+        if (findSelectedSkill(this.state, key) === undefined)
+            return;
+        this.selectedSkillId = key;
+        this.showMobileDetail = true;
+        this.render();
+    }
+    reconcileSelection() {
+        if (this.selectedSkillId !== undefined && findSelectedSkill(this.state, this.selectedSkillId) !== undefined)
+            return;
+        this.selectedSkillId = undefined;
+        this.showMobileDetail = false;
+    }
+    applyPreferredListWidth() {
+        this.applyEffectiveListWidth(this.preferredListWidth);
+    }
+    applyEffectiveListWidth(width) {
+        const containerWidth = this.isNarrowViewport() ? undefined : this.knownContainerWidth();
+        this.listWidth = clampLearnedSkillsListWidth(width, containerWidth);
+        this.style.setProperty("--learned-skills-list-width", `${String(this.listWidth)}px`);
+        this.updateSeparator();
+    }
+    updatePreferredListWidth(width, persist = false) {
+        this.applyEffectiveListWidth(width);
+        this.preferredListWidth = this.listWidth;
+        if (persist)
+            writeLearnedSkillsListWidth(this.preferredListWidth);
+    }
+    updateSeparator() {
+        const divider = this.root.querySelector("[role=separator]");
+        if (divider === null)
+            return;
+        divider.setAttribute("aria-valuenow", String(this.listWidth));
+        divider.setAttribute("aria-valuemax", String(this.runtimeMaximumWidth()));
+    }
+    runtimeMaximumWidth() {
+        if (this.isNarrowViewport())
+            return MAX_LIST_WIDTH;
+        return clampLearnedSkillsListWidth(MAX_LIST_WIDTH, this.knownContainerWidth());
+    }
+    knownContainerWidth() {
+        try {
+            const width = this.getBoundingClientRect().width;
+            if (Number.isFinite(width) && width > 0)
+                return width;
+            const clientWidth = this.clientWidth;
+            return clientWidth > 0 ? clientWidth : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    isNarrowViewport() {
+        if (typeof window === "undefined")
+            return false;
+        try {
+            return window.matchMedia("(max-width: 760px)").matches;
+        }
+        catch {
+            return window.innerWidth <= 760;
+        }
+    }
+    finishPointerInteraction(persist) {
+        const interaction = this.pointerInteraction;
+        if (interaction === undefined)
+            return;
+        this.pointerInteraction = undefined;
+        interaction.divider.classList.remove("dragging");
+        callPointerMethod(interaction.divider, "releasePointerCapture", interaction.pointerId);
+        if (persist)
+            writeLearnedSkillsListWidth(this.preferredListWidth);
+    }
+}
+function renderPanelState(state, selectedSkillId, showMobileDetail) {
+    if (state.kind === "loading")
+        return `<section class="state-screen" role="status">Loading learned skills...</section>`;
+    if (state.kind === "unavailable")
+        return `<section class="state-screen">Learned skills are unavailable.</section>`;
+    if (state.kind === "error") {
+        return `<section class="state-screen error" role="alert">
+      <p>${escapeHtml(state.message)}</p>
+      <button type="button" class="secondary" data-retry>Retry</button>
+    </section>`;
+    }
+    const groups = [
+        renderSkillGroup("project", "PROJECT", state.projectSkills, state.projectUnavailableMessage, selectedSkillId),
+        renderSkillGroup("global", "GLOBAL", state.globalSkills, undefined, selectedSkillId),
+    ].filter((group) => group !== "").join("");
+    const empty = groups === "" ? `<p class="empty-list">No learned skills found.</p>` : "";
+    const warning = state.refreshError === undefined
+        ? ""
+        : `<div class="refresh-warning" role="status">${escapeHtml(state.refreshError)}</div>`;
+    const retry = state.refreshError === undefined ? "" : `<button type="button" class="secondary refresh-retry" data-retry>Retry</button>`;
+    return `<section class="learned-skills-panel${showMobileDetail ? " show-mobile-detail" : ""}">
+    <section class="skill-list" aria-label="Learned skills list">
+      ${warning}
+      ${groups}
+      ${empty}
+      ${retry}
+    </section>
+    <div
+      class="skill-divider"
+      role="separator"
+      aria-label="Resize learned skills list"
+      aria-orientation="vertical"
+      aria-valuemin="${String(MIN_LIST_WIDTH)}"
+      aria-valuemax="${String(MAX_LIST_WIDTH)}"
+      aria-valuenow="280"
+      tabindex="0"
+    ></div>
+    <section class="skill-detail" aria-label="Learned skill details">
+      ${renderSkillDetail(state, selectedSkillId)}
+    </section>
+  </section>`;
+}
+function renderSkillGroup(scope, title, skills, unavailableMessage, selectedSkillId) {
+    if (skills.length === 0 && unavailableMessage === undefined)
+        return "";
+    const warning = unavailableMessage === undefined
+        ? ""
+        : `<p class="group-warning" role="status">${escapeHtml(unavailableMessage)}</p>`;
+    const rows = skills.map((skill) => renderSkillRow(scope, skill, selectedSkillId)).join("");
+    return `<section class="skill-group" data-skill-group="${scope}">
+    <header class="skill-group-header">
+      <h2>${title}</h2>
+      <span class="skill-count">${String(skills.length)}</span>
+    </header>
+    ${warning}
+    ${rows}
+  </section>`;
+}
+function renderSkillRow(scope, skill, selectedSkillId) {
+    const key = skillKey(scope, skill.id);
+    const selected = key === selectedSkillId;
+    return `<button type="button" class="skill-row${selected ? " selected" : ""}" data-skill-key="${escapeAttribute(key)}" aria-pressed="${String(selected)}">
+    <span class="skill-row-name">${escapeHtml(skill.name)}</span>
+    <span class="skill-row-description">${escapeHtml(skill.description)}</span>
+  </button>`;
+}
+function renderSkillDetail(state, selectedSkillId) {
+    const selected = selectedSkillId === undefined ? undefined : findSelectedSkill(state, selectedSkillId);
+    if (selected === undefined)
+        return `<div class="detail-empty">Select a skill</div>`;
+    const { scope, skill } = selected;
+    const metadata = [
+        `<div><dt>Path</dt><dd><code>${escapeHtml(skill.filePath)}</code></dd></div>`,
+        ...(skill.version === undefined ? [] : [`<div><dt>Version</dt><dd>${escapeHtml(skill.version)}</dd></div>`]),
+        ...(skill.created === undefined ? [] : [`<div><dt>Created</dt><dd>${escapeHtml(skill.created)}</dd></div>`]),
+        ...(skill.updated === undefined ? [] : [`<div><dt>Updated</dt><dd>${escapeHtml(skill.updated)}</dd></div>`]),
+    ].join("");
+    return `<div class="detail-content">
+    <button type="button" class="mobile-back" data-back aria-label="Back to learned skills" title="Back to learned skills">
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m15 18-6-6 6-6"></path>
+      </svg>
+    </button>
+    <div class="skill-scope">${scope.toUpperCase()}</div>
+    <h2>${escapeHtml(skill.name)}</h2>
+    <p class="skill-description">${escapeHtml(skill.description)}</p>
+    <dl class="skill-metadata">${metadata}</dl>
+  </div>`;
+}
+function findSelectedSkill(state, key) {
+    if (state.kind !== "data")
+        return undefined;
+    const project = state.projectSkills.find((skill) => skillKey("project", skill.id) === key);
+    if (project !== undefined)
+        return { scope: "project", skill: project };
+    const global = state.globalSkills.find((skill) => skillKey("global", skill.id) === key);
+    return global === undefined ? undefined : { scope: "global", skill: global };
+}
+function skillKey(scope, id) {
+    return `${scope}:${id}`;
+}
+function panelStyles() {
+    return `<style>
+    :host { display: block; height: 100%; min-height: 0; color: var(--pi-text); font: 14px system-ui, sans-serif; }
+    * { box-sizing: border-box; }
+    .learned-skills-panel { display: grid; grid-template-columns: var(--learned-skills-list-width) 8px minmax(320px, 1fr); height: 100%; min-height: 0; overflow: hidden; }
+    .skill-list, .skill-detail { min-width: 0; min-height: 0; overflow: auto; }
+    .skill-list { padding: 2px 12px 12px 0; }
+    .skill-detail { padding: 2px 0 12px 16px; border-left: 0; }
+    .skill-group { margin-bottom: 16px; }
+    .skill-group-header { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 4px 6px; border-bottom: 1px solid var(--pi-border); }
+    .skill-group-header h2 { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--pi-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
+    .skill-count { flex: 0 0 auto; color: var(--pi-muted); font-size: 12px; }
+    .skill-row { display: block; width: 100%; min-width: 0; margin: 4px 0 0; padding: 9px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--pi-text); cursor: pointer; text-align: left; font: inherit; }
+    .skill-row:hover { background: var(--pi-surface-hover); }
+    .skill-row:focus-visible, .mobile-back:focus-visible, .skill-divider:focus-visible { outline: 2px solid var(--pi-accent); outline-offset: 2px; }
+    .skill-row.selected { border-color: var(--pi-accent-border); background: var(--pi-selection-bg); }
+    .skill-row-name { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+    .skill-row-description { display: block; margin-top: 3px; overflow: hidden; color: var(--pi-muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
+    .skill-divider { position: relative; min-width: 8px; border: 0; background: transparent; cursor: col-resize; touch-action: none; }
+    .skill-divider::before { position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: var(--pi-border); content: ""; }
+    .skill-divider:hover::before, .skill-divider:focus-visible::before, .skill-divider.dragging::before { background: var(--pi-accent); }
+    .detail-content { max-width: 760px; padding: 2px 12px 12px 0; }
+    .detail-content h2 { margin: 0 0 12px; overflow-wrap: anywhere; font-size: 22px; line-height: 1.25; }
+    .skill-scope { margin-bottom: 6px; color: var(--pi-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
+    .skill-description { margin: 0 0 20px; max-width: 70ch; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
+    .skill-metadata { display: grid; gap: 8px; margin: 0; color: var(--pi-muted); }
+    .skill-metadata > div { display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr); gap: 12px; }
+    .skill-metadata dt { font-weight: 600; }
+    .skill-metadata dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
+    .skill-metadata code { color: var(--pi-text-secondary); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+    .detail-empty, .empty-list, .state-screen { color: var(--pi-muted); }
+    .detail-empty { display: grid; min-height: 180px; place-items: center; padding: 24px; text-align: center; }
+    .empty-list { padding: 20px 4px; }
+    .state-screen { display: grid; min-height: 160px; place-items: center; gap: 12px; padding: 24px; text-align: center; }
+    .state-screen.error { color: var(--pi-danger); }
+    .state-screen p { margin: 0; overflow-wrap: anywhere; }
+    .refresh-warning, .group-warning { color: var(--pi-warning, #b45309); line-height: 1.4; overflow-wrap: anywhere; }
+    .refresh-warning { margin: 0 0 8px; padding: 8px 10px; border-left: 2px solid var(--pi-warning, #b45309); }
+    .group-warning { margin: 8px 4px; }
+    button.secondary { border: 1px solid var(--pi-border); border-radius: 6px; background: var(--pi-surface); color: var(--pi-text); cursor: pointer; padding: 7px 10px; font: inherit; }
+    button.secondary:hover { background: var(--pi-surface-hover); }
+    .refresh-retry { margin: 0 0 12px 4px; }
+    .mobile-back { display: none; width: 32px; height: 32px; margin: 0 0 12px; padding: 5px; border: 1px solid var(--pi-border); border-radius: 6px; background: var(--pi-surface); color: var(--pi-text); cursor: pointer; }
+    .mobile-back svg { display: block; width: 20px; height: 20px; }
+
+    @media (max-width: 760px) {
+      .learned-skills-panel { display: block; }
+      .skill-list, .skill-detail { height: 100%; padding: 0; }
+      .skill-detail { display: none; }
+      .learned-skills-panel.show-mobile-detail .skill-list { display: none; }
+      .learned-skills-panel.show-mobile-detail .skill-detail { display: block; }
+      .skill-divider { display: none; }
+      .mobile-back { display: block; }
+    }
+  </style>`;
+}
+function escapeHtml(value) {
+    return String(value)
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+}
+function escapeAttribute(value) {
+    return escapeHtml(value);
+}
+function callPointerMethod(element, methodName, pointerId) {
+    const method = Reflect.get(element, methodName);
+    if (typeof method === "function")
+        method.call(element, pointerId);
+}

package/dist/pi-webui-plugins/workspace-learned-skills/learnedSkillsPanelLayout.js

@@ -0,0 +1,68 @@
+// Generated from pi-webui-plugins/workspace-learned-skills/learnedSkillsPanelLayout.ts. Do not edit directly.
+export const LEARNED_SKILLS_LAYOUT_STORAGE_KEY = "pi-webui:workspace-learned-skills:layout:v1";
+export const DEFAULT_LIST_WIDTH = 280;
+export const MIN_LIST_WIDTH = 190;
+export const MAX_LIST_WIDTH = 440;
+export const MIN_DETAIL_WIDTH = 320;
+export const DIVIDER_WIDTH = 8;
+export function readLearnedSkillsListWidth(storage) {
+    const source = storage ?? browserStorage();
+    if (source === undefined)
+        return DEFAULT_LIST_WIDTH;
+    try {
+        const raw = source.getItem(LEARNED_SKILLS_LAYOUT_STORAGE_KEY);
+        if (raw === null)
+            return DEFAULT_LIST_WIDTH;
+        const parsed = JSON.parse(raw);
+        if (!isLayoutEnvelope(parsed) || !Number.isFinite(parsed.listWidth))
+            return DEFAULT_LIST_WIDTH;
+        return clampLearnedSkillsListWidth(parsed.listWidth);
+    }
+    catch {
+        return DEFAULT_LIST_WIDTH;
+    }
+}
+export function writeLearnedSkillsListWidth(width, storage) {
+    const source = storage ?? browserStorage();
+    if (source === undefined)
+        return;
+    const envelope = {
+        version: 1,
+        listWidth: clampLearnedSkillsListWidth(width),
+    };
+    try {
+        source.setItem(LEARNED_SKILLS_LAYOUT_STORAGE_KEY, JSON.stringify(envelope));
+    }
+    catch {
+        // Browser privacy modes and full quotas should not break the panel.
+    }
+}
+export function clampLearnedSkillsListWidth(width, containerWidth) {
+    const safeWidth = Number.isFinite(width) ? width : DEFAULT_LIST_WIDTH;
+    let maximum = MAX_LIST_WIDTH;
+    if (containerWidth !== undefined && Number.isFinite(containerWidth)) {
+        maximum = Math.min(MAX_LIST_WIDTH, Math.floor(containerWidth - MIN_DETAIL_WIDTH - DIVIDER_WIDTH));
+    }
+    // A desktop container is expected to be wide enough for the minimum detail
+    // pane. Keep the minimum as the final guard for transient narrow geometry.
+    maximum = Math.max(MIN_LIST_WIDTH, maximum);
+    return Math.round(Math.min(maximum, Math.max(MIN_LIST_WIDTH, safeWidth)));
+}
+function browserStorage() {
+    try {
+        if (typeof globalThis.localStorage === "undefined")
+            return undefined;
+        return globalThis.localStorage;
+    }
+    catch {
+        return undefined;
+    }
+}
+function isLayoutEnvelope(value) {
+    if (!isRecord(value))
+        return false;
+    return value["version"] === 1 && typeof value["listWidth"] === "number";
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}

package/dist/pi-webui-plugins/workspace-learned-skills/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@pi-webui/workspace-learned-skills-plugin",
+  "private": true,
+  "piWebUi": {
+    "plugins": [
+      { "id": "workspace-learned-skills", "module": "pi-webui-plugin.js" }
+    ]
+  }
+}

package/dist/pi-webui-plugins/workspace-learned-skills/pi-webui-plugin.js

@@ -0,0 +1,48 @@
+// Generated from pi-webui-plugins/workspace-learned-skills/pi-webui-plugin.ts. Do not edit directly.
+import { defineLearnedSkillsPanelElement, isLearnedSkillsPanelVisible, learnedSkillsBadge } from "./learnedSkillsPanelElement.js";
+// Keep the core-owned state dependency at the public Activity Rail boundary.
+function bundledLearnedSkillsContext(context) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return context;
+}
+const plugin = {
+    apiVersion: 1,
+    name: "Workspace Learned Skills",
+    activate: ({ html, svg }) => {
+        defineLearnedSkillsPanelElement();
+        return {
+            contributions: {
+                activityRailItems: [
+                    {
+                        id: "workspace.learned-skills",
+                        title: "Learned Skills",
+                        icon: svg `
+              <svg data-icon="lightbulb" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 18h6"></path>
+                <path d="M10 22h4"></path>
+                <path d="M15.09 14c.18-.69.66-1.22 1.19-1.75A6 6 0 1 0 7.72 12.25c.52.52 1 1.05 1.18 1.75"></path>
+                <path d="M9 14h6"></path>
+              </svg>
+            `,
+                        order: 51,
+                        visible: (context) => {
+                            const learned = bundledLearnedSkillsContext(context);
+                            return context.workspaceScope !== undefined
+                                && isLearnedSkillsPanelVisible(learned.state.learnedSkills);
+                        },
+                        badge: (context) => learnedSkillsBadge(bundledLearnedSkillsContext(context).state.learnedSkills),
+                        render: (context) => {
+                            const learned = bundledLearnedSkillsContext(context);
+                            return html `<pi-webui-learned-skills-panel
+                .context=${context}
+                .learnedSkillsState=${learned.state.learnedSkills}
+                .onRetry=${learned.onRefreshLearnedSkills}
+              ></pi-webui-learned-skills-panel>`;
+                        },
+                    },
+                ],
+            },
+        };
+    },
+};
+export default plugin;

package/dist/server/app.js

@@ -6,7 +6,7 @@ import fastifyCompress from "@fastify/compress";
 import fastifyStatic from "@fastify/static";
 import fastifyWebsocket from "@fastify/websocket";
 import { ProjectStore } from "./storage/projectStore.js";
-import { ProjectService } from "./projects/projectService.js";
+import { ProjectNotFoundError, ProjectService } from "./projects/projectService.js";
 import { WorkspaceService } from "./workspaces/workspaceService.js";
 import { isAbsoluteishFileSuggestionQuery, listFileSuggestions, listPathSuggestions } from "./workspaces/fileSuggestions.js";
 import { pathAccessForCwd } from "./workspaces/effectivePathAccess.js";
@@ -32,6 +32,7 @@ import { getPiWebUiRuntime, getPiWebUiStatus, getPiWebUiVersionStatus } from "./
 import { ActiveAgentProfileAccessError, requireActiveAgentProfile, SessionDaemonActiveAgentProfileProvider, } from "./activeAgentProfileProvider.js";
 import { MachineService } from "./machines/machineService.js";
 import { registerMemoryRoutes } from "./memory/memoryRoutes.js";
+import { registerLearnedSkillsRoutes } from "./learnedSkills/learnedSkillsRoutes.js";
 import { registerMachineRoutes } from "./machines/machineRoutes.js";
 import { registerMachineProxyRoutes } from "./machines/machineProxyRoutes.js";
 import { proxyMachinePluginAsset, registerMachinePluginProxyRoutes } from "./machines/machinePluginProxyRoutes.js";
@@ -51,7 +52,31 @@ function registerLocalProjectRoutes(app, projects, workspaces, prefix, options =
             return { closed: true };
         }
         catch (error) {
-            return reply.code(404).send({ error: error instanceof Error ? error.message : String(error) });
+            return sendProjectRouteError(reply, error);
+        }
+    });
+    app.post(`${prefix}/projects/:projectId/pin`, async (request, reply) => {
+        try {
+            return await projects.pin(request.params.projectId);
+        }
+        catch (error) {
+            return sendProjectRouteError(reply, error);
+        }
+    });
+    app.post(`${prefix}/projects/:projectId/unpin`, async (request, reply) => {
+        try {
+            return await projects.unpin(request.params.projectId);
+        }
+        catch (error) {
+            return sendProjectRouteError(reply, error);
+        }
+    });
+    app.post(`${prefix}/projects/:projectId/close-tree`, async (request, reply) => {
+        try {
+            return await projects.closeTree(request.params.projectId);
+        }
+        catch (error) {
+            return sendProjectRouteError(reply, error);
         }
     });
     app.get(`${prefix}/project-directories`, async (request, reply) => {
@@ -68,10 +93,19 @@ function registerLocalProjectRoutes(app, projects, workspaces, prefix, options =
             return await listWorkspacesWithEffectiveConfig(project, workspaces, options.config);
         }
         catch (error) {
-            return reply.code(404).send({ error: error instanceof Error ? error.message : String(error) });
+            return sendProjectRouteError(reply, error);
         }
     });
 }
+function sendProjectRouteError(reply, error) {
+    // Only unknown project ids answer 404. Genuine store or workspace failures
+    // (git, filesystem) answer 500 so clients can distinguish them. The wider
+    // resolveWorkspaceContext consumers (git, workspace explorer, terminal, and
+    // workspace deletion routes) deliberately keep their own catch-all mapping
+    // instead of this instanceof split, so the asymmetry is not an oversight.
+    const status = error instanceof ProjectNotFoundError ? 404 : 500;
+    return reply.code(status).send({ error: error instanceof Error ? error.message : String(error) });
+}
 async function listWorkspacesWithEffectiveConfig(project, workspaces, config) {
     const [workspaceList, effectiveConfig] = await Promise.all([
         workspaces.list(project),
@@ -192,6 +226,8 @@ export async function buildApp(deps = {}) {
     registerLocalMachineConfigRoutes(app, invalidatingConfigService);
     registerMemoryRoutes(app, agentProfileProvider, "/api");
     registerMemoryRoutes(app, agentProfileProvider, "/api/machines/local");
+    registerLearnedSkillsRoutes(app, agentProfileProvider, "/api");
+    registerLearnedSkillsRoutes(app, agentProfileProvider, "/api/machines/local");
     registerMachineRoutes(app, machines);
     registerMachinePluginProxyRoutes(app, machines);
     registerLocalProjectRoutes(app, projects, workspaces, "/api", { config: configService });