@design.estate/dees-catalog 9.0.0 → 9.1.0

package/ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.demo.ts

@@ -1,37 +1,63 @@
-import { html } from '@design.estate/dees-element';
-import { demoPage } from '../../../demos/templates.js';
+import { DeesElement, css, customElement, directives, html, state } from '@design.estate/dees-element';
+import { demoApp, demoOutput, demoStyles, showDemoResult } from '../../../demos/templates.js';
+import { themeDefaultStyles } from '../../00theme.js';
+import { harnessPillStyles } from '../harness.styles.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import '../dees-harness-question-card/dees-harness-question-card.js';
+import '../dees-harness-permission-card/dees-harness-permission-card.js';
+import type { DeesHarnessSessionList } from './dees-harness-session-list.js';
 import type {
   IHarnessResourceAssociation,
   IHarnessResourceContextDetail,
   IHarnessResourceEventDetail,
   IHarnessResourceMeta,
   IHarnessSessionGroup,
+  IHarnessSessionContextDetail,
   IHarnessSessionMeta,
   IHarnessSessionMoveDetail,
+  IHarnessQuestionResponseDetail,
+  IHarnessPermissionResponseDetail,
   THarnessResourceAssociationRequestDetail,
 } from '../interfaces.js';
 
-const demoSessions: IHarnessSessionMeta[] = Array.from({ length: 24 }, (_, index) => ({
+type TDemoStage = 'idle' | 'starting' | 'working' | 'feedback' | 'approval' | 'finished' | 'error' | 'paused';
+interface IDemoSession extends IHarnessSessionMeta {
+  stage: TDemoStage;
+  outcome?: string;
+}
+
+const stages: Record<TDemoStage, { state: NonNullable<IHarnessSessionMeta['state']>; label: string; description: string }> = {
+  idle: { state: 'normal', label: 'Ready to start', description: 'The brief is ready. Start the session to prepare the workspace.' },
+  starting: { state: 'working', label: 'Starting', description: 'Opening the workspace and reading the project instructions.' },
+  working: { state: 'working', label: 'Working', description: 'The agent is inspecting the changes and running focused checks.' },
+  feedback: { state: 'attention', label: 'Waiting for feedback', description: 'Work is paused at a decision. Your answer will let the agent continue.' },
+  approval: { state: 'attention', label: 'Approval needed', description: 'The agent has prepared the next action and is waiting for permission.' },
+  finished: { state: 'finished', label: 'Completed', description: 'The changes and focused checks are complete. The result is ready to review.' },
+  error: { state: 'error', label: 'Run failed', description: 'The model endpoint rejected the request. Retry when the connection is ready.' },
+  paused: { state: 'normal', label: 'Paused', description: 'Permission was declined. The requested action did not run.' },
+};
+
+const demoSessions = (): IDemoSession[] => [
+  { title: 'Fix sitemap cache key', harness: { id: 'codex', name: 'Codex' }, stage: 'approval' as const },
+  { title: 'Investigate model rate limits', harness: { id: 'opencode', name: 'OpenCode' }, stage: 'working' as const },
+  { title: 'Refactor workbench layout', harness: { id: 'flexharness', name: 'FlexHarness' }, stage: 'feedback' as const },
+  { title: 'Add adaptive code diffs', harness: { id: 'codex', name: 'Codex' }, stage: 'finished' as const },
+  { title: 'Prepare the catalog release', harness: { id: 'opencode', name: 'OpenCode' }, stage: 'error' as const },
+  { title: 'Improve agent onboarding', harness: { id: 'flexharness', name: 'FlexHarness' }, stage: 'idle' as const },
+  { title: 'Draft the migration guide', harness: { id: 'codex', name: 'Codex' }, stage: 'starting' as const },
+].map((session, index) => ({
+  ...session,
   id: `session-${index}`,
-  title: [
-    'Fix sitemap cache key',
-    'Investigate 429s from model endpoint',
-    'Refactor workbench layout',
-    'Add diff support to codebox',
-    'Release 3.91.0',
-    'Migrate agent chat to harness group',
-  ][index % 6],
-  createdAt: Date.now() - (index + 2) * 3_600_000,
-  updatedAt: Date.now() - (index + 1) * 3_500_000,
-  messageCount: 4 + (index % 9),
-  preview: 'Latest: the regression test asserts the cache key stays stable across…',
-  state: (['normal', 'working', 'finished', 'attention', 'error'] as const)[index % 5],
-  working: index % 5 === 1,
+  updatedAt: Date.now() - (index + 1) * 60_000,
+  messageCount: 4 + index * 3,
+  state: stages[session.stage].state,
+  statusLabel: stages[session.stage].label,
+  preview: stages[session.stage].description,
 }));
 
 const demoGroups: IHarnessSessionGroup[] = [
-  { id: 'active', name: 'Active work', sessionIds: ['session-0', 'session-1', 'session-2'] },
-  { id: 'review', name: 'Review', sessionIds: ['session-3', 'session-4'] },
+  { id: 'active', name: 'Workspace', sessionIds: ['session-0', 'session-1', 'session-2', 'session-6'] },
+  { id: 'review', name: 'Recent', sessionIds: ['session-3', 'session-5', 'session-4'] },
 ];
 
 const demoResources: IHarnessResourceMeta[] = [
@@ -49,7 +75,7 @@ const demoResources: IHarnessResourceMeta[] = [
     kind: 'file',
     title: 'Release notes',
     icon: 'lucide:FileText',
-    preview: '6.7.0 controlled resource draft',
+    preview: 'Catalog migration notes',
     updatedAt: Date.now() - 180_000,
   },
   {
@@ -63,22 +89,15 @@ const demoResources: IHarnessResourceMeta[] = [
 ];
 
 const demoResourceAssociations: IHarnessResourceAssociation[] = [
-  { resourceId: 'terminal:build', sessionId: 'session-0' },
-  { resourceId: 'file:release-notes', sessionId: 'session-0' },
+  { resourceId: 'terminal:build', sessionId: 'session-4' },
+  { resourceId: 'file:release-notes', sessionId: 'session-4' },
 ];
 
 const demoResourceEligibleSessionIds = Object.fromEntries(
-  demoResources.map((resource) => [resource.id, ['session-0', 'session-1', 'session-2']]),
+  demoResources.map((resource) => [resource.id, ['session-0', 'session-1', 'session-2', 'session-4']]),
 );
 
-type TDemoSessionList = HTMLElement & {
-  groups: IHarnessSessionGroup[];
-  resources: IHarnessResourceMeta[];
-  resourceAssociations: IHarnessResourceAssociation[];
-  selectedResourceId: string;
-  selectedSessionId: string;
-  ungroupedSessionIds: string[];
-};
+type TDemoSessionList = DeesHarnessSessionList;
 
 const handleSessionSelect = (event: CustomEvent<{ session: IHarnessSessionMeta }>): void => {
   const list = event.currentTarget as TDemoSessionList;
@@ -87,7 +106,11 @@ const handleSessionSelect = (event: CustomEvent<{ session: IHarnessSessionMeta }
 
 const handleSessionMove = (event: CustomEvent<IHarnessSessionMoveDetail>): void => {
   const list = event.currentTarget as TDemoSessionList;
-  const { sessionId, groupId, beforeSessionId } = event.detail;
+  applySessionMove(list, event.detail);
+};
+
+const applySessionMove = (list: TDemoSessionList, detail: IHarnessSessionMoveDetail): void => {
+  const { sessionId, groupId, beforeSessionId } = detail;
   const groups = list.groups.map((group) => ({
     ...group,
     sessionIds: group.sessionIds.filter((id) => id !== sessionId),
@@ -103,6 +126,64 @@ const handleSessionMove = (event: CustomEvent<IHarnessSessionMoveDetail>): void
   list.ungroupedSessionIds = ungroupedSessionIds;
 };
 
+const handleSessionOpen = (event: CustomEvent<{ session: IHarnessSessionMeta }>): void => {
+  const list = event.currentTarget as TDemoSessionList;
+  list.selectedSessionId = event.detail.session.id;
+  showDemoResult(list, `Opened “${event.detail.session.title}”.`);
+};
+
+const handleSessionContext = async (
+  event: CustomEvent<IHarnessSessionContextDetail>,
+  onChange: (opened?: boolean) => void = () => {},
+): Promise<void> => {
+  const list = event.currentTarget as TDemoSessionList;
+  const { session, originalEvent } = event.detail;
+  const invokingControl = originalEvent.composedPath().find(
+    (target): target is HTMLButtonElement => target instanceof HTMLButtonElement,
+  );
+  const currentGroup = list.groups.find((group) => group.sessionIds.includes(session.id));
+  // Capture dialog ownership before event dispatch ends: no await before opening.
+  const menu = await DeesContextmenu.openContextMenuWithOptions(originalEvent, [
+    {
+      name: 'Open conversation', iconName: 'lucide:MessageSquare',
+      action: async () => {
+        list.selectedSessionId = session.id;
+        onChange(true);
+        showDemoResult(list, `Opened “${session.title}”.`);
+      },
+    },
+    {
+      name: 'Show details', iconName: 'lucide:Info',
+      action: async () => showDemoResult(list, `${session.title} · ${session.messageCount ?? 0} messages · ${session.state ?? 'normal'}`),
+    },
+    ...list.groups.filter((group) => group.id !== currentGroup?.id).map((group) => ({
+      name: `Move to ${group.name}`, iconName: 'lucide:FolderInput',
+      action: async () => {
+        applySessionMove(list, { sessionId: session.id, groupId: group.id, index: group.sessionIds.length });
+        onChange();
+        showDemoResult(list, `Moved “${session.title}” to ${group.name}.`);
+      },
+    })),
+    ...(currentGroup ? [{
+      name: 'Move to Ungrouped', iconName: 'lucide:FolderInput',
+      action: async () => {
+        applySessionMove(list, { sessionId: session.id, groupId: null, index: list.ungroupedSessionIds.length });
+        onChange();
+        showDemoResult(list, `Moved “${session.title}” to Ungrouped.`);
+      },
+    }] : []),
+  ]);
+  menu?.registerGarbageFunction(async () => {
+    await list.updateComplete;
+    if (!list.isConnected) return;
+    // Moving between groups recreates the row; restore its equivalent control.
+    const control = invokingControl?.isConnected ? invokingControl : list.shadowRoot?.querySelector<HTMLButtonElement>(
+      `[data-session-id="${CSS.escape(session.id)}"] .${invokingControl?.classList.contains('itemPrimary') ? 'itemPrimary' : 'sessionActions'}`,
+    );
+    control?.focus({ preventScroll: true });
+  });
+};
+
 const handleResourceAssociation = (
   event: CustomEvent<THarnessResourceAssociationRequestDetail>,
 ): void => {
@@ -123,9 +204,8 @@ const handleResourceContext = async (
   event: CustomEvent<IHarnessResourceContextDetail>,
 ): Promise<void> => {
   const list = event.currentTarget as TDemoSessionList;
-  const { DeesContextmenu } = await import('../../00group-overlay/dees-contextmenu/dees-contextmenu.js');
   const currentSessionId = event.detail.sessionId;
-  const eligibleSessionIds = ['session-0', 'session-1', 'session-2'];
+  const eligibleSessionIds = list.eligibleSessionIdsByResourceId[event.detail.resource.id] ?? [];
   const menu = await DeesContextmenu.openContextMenuWithOptions(
     new MouseEvent('contextmenu', {
       clientX: event.detail.clientX,
@@ -136,7 +216,7 @@ const handleResourceContext = async (
         .filter((sessionId) => sessionId !== currentSessionId)
         .map((sessionId) => ({
           name: `${currentSessionId ? 'Reassign' : 'Attach'} to ${
-            demoSessions.find((session) => session.id === sessionId)?.title
+            list.sessions.find((session) => session.id === sessionId)?.title
           }`,
           iconName: 'lucide:Link',
           action: async () => {
@@ -159,73 +239,246 @@ const handleResourceContext = async (
   if (!menu) {
     event.detail.close();
   } else {
-    const observer = new MutationObserver(() => {
-      if (menu.isConnected) return;
-      observer.disconnect();
-      event.detail.close();
-    });
-    observer.observe(document.body, { childList: true });
+    menu.registerGarbageFunction(() => event.detail.close());
   }
   list.selectedResourceId = event.detail.resource.id;
 };
 
-const openModal = async () => {
+const openModal = async (sessions: IHarnessSessionMeta[], groups: IHarnessSessionGroup[]) => {
   const { DeesModal } = await import('../../00group-overlay/dees-modal/dees-modal.js');
   const content = document.createElement('dees-harness-session-list');
-  content.sessions = demoSessions;
+  content.sessions = sessions;
+  content.groups = groups;
+  content.ungroupedSessionIds = [];
+  content.enableGrouping = true;
   content.style.height = '420px';
   content.addEventListener('harness-session-select', handleSessionSelect as EventListener);
-  content.addEventListener('harness-session-open', (event) => {
-    console.log('open session', (event as CustomEvent).detail.session);
+  content.addEventListener('harness-session-open', handleSessionOpen as EventListener);
+  content.addEventListener('harness-session-context', (event) => {
+    void handleSessionContext(event as CustomEvent<IHarnessSessionContextDetail>);
   });
+  content.addEventListener('harness-session-move', handleSessionMove as EventListener);
   DeesModal.createAndShow({
     heading: 'Conversations',
-    content: html`${content}`,
+    content: html`<style>${demoStyles}</style><div class="dees-demo-stack">${content}${demoOutput('Choose a conversation action.')}</div>`,
     menuOptions: [],
   });
 };
 
-export const demoFunc = () => demoPage('Sessions', 'Select, organize and attach resources to conversations. Selection keeps the layout steady.', html`
-  <style>
-    .sessionDemo {
-      display: grid;
-      grid-template-rows: auto auto minmax(0, 1fr);
-      gap: 12px;
-      height: 640px;
-      width: min(100%, 360px);
-      box-sizing: border-box;
-      padding: 12px;
-      border-radius: var(--dees-radius-xl);
-      border: 1px solid var(--dees-color-border-subtle);
-      background: var(--dees-color-bg-canvas);
+@customElement('dees-demo-session-workspace')
+class DeesDemoSessionWorkspace extends DeesElement {
+  @state() private accessor sessions = demoSessions();
+  @state() private accessor selectedSessionId = 'session-0';
+  @state() private accessor groups = demoGroups.map((group) => ({ ...group, sessionIds: [...group.sessionIds] }));
+  @state() private accessor ungroupedSessionIds: string[] = [];
+  @state() private accessor associations = [...demoResourceAssociations];
+  @state() private accessor notice = 'Interactive demo · Changes stay in this example.';
+  @state() private accessor showDetails = false;
+
+  public static styles = [themeDefaultStyles, demoStyles, harnessPillStyles, css`
+    :host { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 16px; container-type: inline-size; }
+    * { box-sizing: border-box; }
+    .topbar, .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+    .topbar { justify-content: space-between; }
+    h1 { margin: 0; font-size: 22px; font-weight: 620; letter-spacing: -.025em; }
+    .subtitle { margin: 4px 0 0; font-size: 12px; color: var(--dees-color-text-secondary); }
+    .workspace { display: grid; grid-template-columns: minmax(330px, 39%) minmax(0, 1fr); flex: 1; min-height: 0; border: 1px solid var(--dees-color-border-subtle); border-radius: var(--dees-radius-2xl); overflow: hidden; background: var(--dees-color-bg-primary); }
+    .sidebar { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding-top: 8px; border-right: 1px solid var(--dees-color-border-subtle); background: var(--dees-color-bg-canvas); }
+    .sidebarSummary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 12px; font-weight: 600; }
+    .attentionSummary { display: inline-flex; align-items: center; gap: 5px; color: var(--dees-color-text-warning); font-size: 11px; }
+    dees-harness-session-list { flex: 1; min-height: 0; }
+    .sidebar output { margin: 0; padding: 10px 16px; min-height: 44px; font-size: 11px; line-height: 1.5; color: var(--dees-color-text-secondary); border-top: 1px solid var(--dees-color-border-subtle); }
+    .detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; }
+    .detailHeader { padding: 24px 28px 20px; border-bottom: 1px solid var(--dees-color-border-subtle); }
+    .identity { font-size: 12px; color: var(--dees-color-text-secondary); margin-bottom: 12px; }
+    .detailHeader .harness-pill { text-transform: none; }
+    h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
+    h2:focus-visible { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 4px; border-radius: 4px; }
+    .detailBody { display: grid; align-content: start; gap: 20px; padding: 24px 28px; flex: 1; }
+    .description { font-size: 13px; line-height: 1.65; color: var(--dees-color-text-secondary); margin: 0; }
+    .activity { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
+    .activity li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--dees-color-border-subtle); font-size: 12px; color: var(--dees-color-text-secondary); }
+    .activity dees-icon { color: var(--dees-color-text-success); }
+    .activity .pending dees-icon { color: var(--dees-color-text-muted); }
+    .result { border-left: 3px solid var(--dees-color-text-success); padding: 10px 14px; background: var(--dees-color-bg-secondary); font-size: 12px; line-height: 1.6; border-radius: 0 var(--dees-radius-md) var(--dees-radius-md) 0; }
+    .error { border-left-color: var(--dees-color-text-error); }
+    .scenarioControls { display: grid; gap: 10px; padding: 20px 28px; background: var(--dees-color-bg-canvas); border-top: 1px solid var(--dees-color-border-subtle); }
+    .scenarioLabel { font-size: 11px; color: var(--dees-color-text-muted); }
+    .back { display: none; }
+    @container (max-width: 700px) {
+      .workspace { grid-template-columns: minmax(0, 1fr); }
+      .detail { display: none; }
+      .workspace.showDetails .sidebar { display: none; }
+      .workspace.showDetails .detail { display: flex; }
+      .sidebar { border-right: 0; }
+      .back { display: inline-block; margin-bottom: 14px; }
+      .detailHeader, .detailBody, .scenarioControls { padding: 20px; }
+      .topbar { gap: 12px; }
+      h2 { font-size: 21px; }
     }
-    .demoHint {
-      color: var(--dees-color-text-secondary);
-      font-size: var(--dees-font-caption1-size, 11px);
+  `];
+
+  private get list(): DeesHarnessSessionList | null {
+    return this.shadowRoot?.querySelector('dees-harness-session-list') ?? null;
+  }
+
+  private syncList(): void {
+    const list = this.list;
+    if (!list) return;
+    this.selectedSessionId = list.selectedSessionId;
+    this.groups = list.groups;
+    this.ungroupedSessionIds = list.ungroupedSessionIds;
+    this.associations = list.resourceAssociations;
+  }
+
+  private async select(event: CustomEvent<{ session: IHarnessSessionMeta }>): Promise<void> {
+    handleSessionSelect(event);
+    this.selectedSessionId = event.detail.session.id;
+    await this.revealSession();
+  }
+
+  private async revealSession(): Promise<void> {
+    this.showDetails = true;
+    await this.updateComplete;
+    if (this.list && getComputedStyle(this.list.parentElement!).display === 'none') {
+      this.shadowRoot?.querySelector<HTMLElement>('h2')?.focus();
     }
-    .sessionDemo dees-harness-session-list { min-height: 0; }
-  </style>
-  <div class="sessionDemo">
-    <dees-button @clicked=${openModal}>Open session browser</dees-button>
-    <div class="demoHint">
-      Drag grips to organize sessions and their resources. Use Actions or Shift+F10 to attach or move a resource.
-    </div>
-    <dees-harness-session-list
-      .sessions=${demoSessions}
-      .groups=${demoGroups}
-      .ungroupedSessionIds=${demoSessions.slice(5).map((session) => session.id)}
-      .resources=${demoResources}
-      .resourceAssociations=${demoResourceAssociations}
-      .eligibleSessionIdsByResourceId=${demoResourceEligibleSessionIds}
-      .enableGrouping=${true}
-      selectedSessionId="session-2"
-      @harness-session-select=${handleSessionSelect}
-      @harness-session-move=${handleSessionMove}
-      @harness-resource-select=${(event: CustomEvent<IHarnessResourceEventDetail>) => {
-        (event.currentTarget as TDemoSessionList).selectedResourceId = event.detail.resource.id;
-      }}
-      @harness-resource-context=${handleResourceContext}
-      @harness-resource-association-request=${handleResourceAssociation}
-    ></dees-harness-session-list>
-  </div>
-`);
+  }
+
+  private async advance(stage: TDemoStage, outcome?: string): Promise<void> {
+    const selected = this.sessions.find((session) => session.id === this.selectedSessionId)!;
+    this.sessions = this.sessions.map((session) => session.id !== selected.id ? session : {
+      ...session, stage, state: stages[stage].state, statusLabel: stages[stage].label,
+      preview: stages[stage].description, updatedAt: Date.now(), outcome,
+    });
+    this.notice = `${selected.title} · ${stages[stage].label}${outcome ? ` · ${outcome}` : ''}`;
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<HTMLElement>('h2')?.focus({ preventScroll: true });
+  }
+
+  private reset(): void {
+    this.sessions = demoSessions();
+    this.selectedSessionId = 'session-0';
+    this.groups = demoGroups.map((group) => ({ ...group, sessionIds: [...group.sessionIds] }));
+    this.ungroupedSessionIds = [];
+    this.associations = [...demoResourceAssociations];
+    this.notice = 'Demo reset. Choose a session or respond to the approval request.';
+    if (this.list) {
+      this.list.search = '';
+      this.list.selectedResourceId = '';
+      this.list.expandedSessionIds = new Set();
+      this.list.collapsedGroupIds = new Set();
+    }
+  }
+
+  public render() {
+    const selected = this.sessions.find((session) => session.id === this.selectedSessionId) ?? this.sessions[0];
+    const current = stages[selected.stage];
+    const attentionCount = this.sessions.filter((session) => session.state === 'attention' || session.state === 'error').length;
+    const tone = { normal: 'default', working: 'running', attention: 'warning', error: 'error', finished: 'success' }[current.state];
+    return html`
+      <header class="topbar">
+        <div><h1>Sessions</h1><p class="subtitle">Follow the work. Step in when you’re needed.</p></div>
+        <div class="toolbar">
+          <dees-button size="sm" @clicked=${() => openModal(this.sessions, this.groups)}>Open session browser</dees-button>
+          <dees-button size="sm" type="ghost" @clicked=${this.reset}>Reset demo</dees-button>
+        </div>
+      </header>
+      <div class="workspace ${this.showDetails ? 'showDetails' : ''}">
+        <aside class="sidebar" aria-label="Sessions">
+          <div class="sidebarSummary"><span>All sessions <span class="scenarioLabel">${this.sessions.length}</span></span>
+            <span class="attentionSummary"><dees-icon icon="lucide:CircleAlert" iconSize="12"></dees-icon>${attentionCount} need attention</span>
+          </div>
+          <dees-harness-session-list
+            .sessions=${this.sessions} .groups=${this.groups} .ungroupedSessionIds=${this.ungroupedSessionIds}
+            .resources=${demoResources} .resourceAssociations=${this.associations}
+            .eligibleSessionIdsByResourceId=${demoResourceEligibleSessionIds} .enableGrouping=${true}
+            .selectedSessionId=${this.selectedSessionId}
+            @harness-session-select=${this.select} @harness-session-open=${this.select}
+            @harness-session-context=${(event: CustomEvent<IHarnessSessionContextDetail>) => handleSessionContext(event, (opened) => {
+              this.syncList();
+              if (opened) void this.revealSession();
+            })}
+            @harness-session-move=${(event: CustomEvent<IHarnessSessionMoveDetail>) => { handleSessionMove(event); this.syncList(); }}
+            @harness-group-create-request=${() => {
+              this.groups = [...this.groups, { id: `group-${this.groups.length}`, name: `Group ${this.groups.length + 1}`, sessionIds: [] }];
+              if (this.list) this.list.search = '';
+              this.notice = 'Group created. Drag a session here or use its Actions menu.';
+            }}
+            @harness-resource-select=${(event: CustomEvent<IHarnessResourceEventDetail>) => {
+              (event.currentTarget as TDemoSessionList).selectedResourceId = event.detail.resource.id;
+              this.notice = `Selected ${event.detail.resource.title}. Use Actions to attach or move it.`;
+            }}
+            @harness-resource-context=${handleResourceContext}
+            @harness-resource-association-request=${(event: CustomEvent<THarnessResourceAssociationRequestDetail>) => { handleResourceAssociation(event); this.syncList(); }}
+          ></dees-harness-session-list>
+          <output role="status">${this.notice}</output>
+        </aside>
+        <section class="detail" aria-label="Selected session">
+          <header class="detailHeader">
+            <dees-button class="back" size="sm" type="ghost" icon="lucide:ChevronLeft" @clicked=${async () => {
+              this.showDetails = false;
+              await this.updateComplete;
+              this.list?.shadowRoot?.querySelector<HTMLElement>(`[data-session-id="${this.selectedSessionId}"] .itemPrimary`)?.focus();
+            }}>All sessions</dees-button>
+            <div class="identity">${selected.harness?.name} <span aria-hidden="true">·</span> design.estate</div>
+            <h2 tabindex="-1">${selected.title}</h2>
+            <span class="harness-pill tone-${tone}">${current.label}</span>
+          </header>
+          <div class="detailBody">
+            <p class="description">${current.description}</p>
+            ${directives.keyed(`${selected.id}:${selected.stage}:${selected.updatedAt}`, html`
+              ${selected.stage === 'feedback' ? html`
+                <dees-harness-question-card .suppressEntry=${true} .request=${{
+                  id: `${selected.id}:feedback`, sessionId: selected.id,
+                  question: 'How should we handle the compact layout?',
+                  options: [
+                    { label: 'Keep a compact sidebar', description: 'Preserve quick access to sessions on wider screens.' },
+                    { label: 'Use a focused single pane', description: 'Give the active task all available space.' },
+                  ],
+                }} @harness-question-response=${(event: CustomEvent<IHarnessQuestionResponseDetail>) => {
+                  void this.advance('working', `Feedback received: ${event.detail.answers.join(', ')}`);
+                }}></dees-harness-question-card>
+              ` : selected.stage === 'approval' ? html`
+                <dees-harness-permission-card .suppressEntry=${true} .request=${{
+                  id: `${selected.id}:approval`, sessionId: selected.id, title: 'Run the test suite',
+                  type: 'shell', metadata: { command: 'pnpm test', cwd: '/workspace/design.estate' },
+                }} @harness-permission-response=${(event: CustomEvent<IHarnessPermissionResponseDetail>) => {
+                  void this.advance(event.detail.response === 'reject' ? 'paused' : 'working',
+                    event.detail.response === 'reject' ? 'Permission declined.' : 'Permission granted. Continuing the checks.');
+                }}></dees-harness-permission-card>
+              ` : ''}
+            `)}
+            ${selected.outcome ? html`<div class="result">${selected.outcome}</div>` : ''}
+            ${selected.stage === 'error' ? html`<div class="result error"><strong>Model request failed</strong><br />HTTP 429 · Request limit reached.<br />No changes were lost.</div>` : ''}
+            ${['idle', 'starting', 'working', 'finished'].includes(selected.stage) ? html`
+              <ol class="activity" aria-label="Work progress">
+                ${['Prepare workspace', 'Inspect and update the implementation', 'Run checks and summarize'].map((label, index) => {
+                  const complete = selected.stage === 'finished' || (selected.stage === 'working' && index === 0);
+                  return html`<li class=${complete ? '' : 'pending'}><dees-icon aria-hidden="true" icon=${complete ? 'lucide:CircleCheck' : 'lucide:CircleDashed'} iconSize="16"></dees-icon>${label}${complete ? html`<span class="scenarioLabel">Done</span>` : ''}</li>`;
+                })}
+              </ol>
+            ` : ''}
+          </div>
+          <footer class="scenarioControls">
+            <div class="scenarioLabel">Demo controls · Advance this session</div>
+            <div class="toolbar">
+              ${selected.stage === 'idle' || selected.stage === 'paused' || selected.stage === 'finished' || selected.stage === 'error' ? html`
+                <dees-button size="sm" type="accent" @clicked=${() => this.advance('starting')}>${selected.stage === 'error' ? 'Retry session' : selected.stage === 'finished' ? 'Start another run' : 'Start work'}</dees-button>
+              ` : selected.stage === 'starting' ? html`
+                <dees-button size="sm" type="accent" @clicked=${() => this.advance('working')}>Begin task</dees-button>
+              ` : selected.stage === 'working' ? html`
+                <dees-button size="sm" type="accent" @clicked=${() => this.advance('feedback')}>Ask for feedback</dees-button>
+                <dees-button size="sm" @clicked=${() => this.advance('approval')}>Request approval</dees-button>
+                <dees-button size="sm" @clicked=${() => this.advance('finished')}>Complete work</dees-button>
+                <dees-button size="sm" type="ghost" @clicked=${() => this.advance('error')}>Simulate failure</dees-button>
+              ` : html`<span class="description">Respond above to continue the session.</span>`}
+            </div>
+          </footer>
+        </section>
+      </div>
+    `;
+  }
+}
+
+export const demoFunc = () => demoApp(html`<dees-demo-session-workspace></dees-demo-session-workspace>`);