@olares/lares-mobile 0.15.6 → 0.15.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.6",
+  "version": "0.15.7",
   "description": "Lares chat component for LarePass",
   "type": "module",
   "repository": {
@@ -28,7 +28,7 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@olares/lares-core": "0.15.6",
+    "@olares/lares-core": "0.15.7",
     "markdown-it": "^14.3.0"
   }
 }

package/src/App.vue

@@ -14,6 +14,7 @@
       :effort-name="effortName"
       @create="newChat"
       @pick-session="pickSession"
+      @pick-workspace="pickWorkspace"
       @retry="retry"
       @open-file="openFile"
       @answer="answerQuestion"

package/src/desktop/DesktopComposer.vue

@@ -1,7 +1,50 @@
 <template>
-  <form class="desktop-composer" @submit.prevent>
+  <form class="desktop-composer" :data-hero="hero ? 'true' : undefined" @submit.prevent>
     <div class="desktop-composer__model-row">
-      <LaresPcPopover v-model="modelOpen" :width="260" placement="top-end">
+      <LaresPcPopover
+        v-if="hero"
+        v-model="workspaceOpen"
+        class="desktop-composer__workspace-slot"
+        :width="240"
+        placement="top-start"
+      >
+        <template #trigger="{ toggle }">
+          <button
+            type="button"
+            class="desktop-composer__model desktop-composer__workspace"
+            :disabled="!state.workspacesReady"
+            aria-haspopup="menu"
+            :aria-expanded="workspaceOpen"
+            @mousedown.prevent
+            @click="toggle"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M3.5 7.5h6l1.6 2H20.5v9H3.5z" />
+            </svg>
+            <span>{{ workspaceLabel }}</span>
+            <ChevronIcon />
+          </button>
+        </template>
+        <div class="desktop-composer__menu">
+          <button
+            v-for="workspace in state.workspaces"
+            :key="workspace.workspaceId"
+            type="button"
+            class="desktop-composer__option"
+            :data-selected="workspace.workspaceId === state.currentWorkspaceId"
+            @click="pickWorkspace(workspace.workspaceId)"
+          >
+            <span>{{ workspace.title || defaultWorkspaceTitle }}</span>
+            <CheckIcon v-if="workspace.workspaceId === state.currentWorkspaceId" />
+          </button>
+        </div>
+      </LaresPcPopover>
+      <LaresPcPopover
+        v-model="modelOpen"
+        class="desktop-composer__model-slot"
+        :width="260"
+        placement="top-end"
+      >
         <template #trigger="{ toggle }">
           <button
             type="button"
@@ -397,6 +440,7 @@
 <script>
 import { h } from "vue";
 import { resolveSubmitMode } from "@olares/lares-core/larepass/submission-settings";
+import { DEFAULT_WORKSPACE_TITLE } from "@olares/lares-core/workspace/constants";
 import { activeReferenceToken, insertReference } from "@olares/lares-core/larepass/references";
 import { draftImageStatus } from "@olares/lares-core/files/draft-images";
 import LaresDesktopQueue from "./DesktopQueue.vue";
@@ -456,16 +500,18 @@ export default {
   props: {
     state: { type: Object, required: true },
     t: { type: Function, required: true },
+    hero: { type: Boolean, default: false },
     modelKey: { type: Function, required: true },
     effortName: { type: Function, required: true },
   },
   emits: [
     "update-draft", "send", "stop", "steer-queue", "files", "choose-model", "choose-effort", "answer-approval", "answer-questions",
-    "choose-permission", "disable-plan", "goal-action", "open-commands", "pick-command", "queue-action", "remove-image",
+    "choose-permission", "disable-plan", "goal-action", "open-commands", "pick-command", "queue-action", "remove-image", "pick-workspace",
   ],
   data() {
     return {
       modelOpen: false,
+      workspaceOpen: false,
       effortOpen: false,
       permissionOpen: false,
       permissionConfirm: false,
@@ -484,6 +530,16 @@ export default {
     };
   },
   computed: {
+    defaultWorkspaceTitle() {
+      return DEFAULT_WORKSPACE_TITLE;
+    },
+    workspaceLabel() {
+      if (!this.state.workspacesReady) return this.t("agent.loading");
+      const current = this.state.workspaces.find(
+        (row) => row.workspaceId === this.state.currentWorkspaceId,
+      );
+      return current?.title || this.state.workspaces[0]?.title || DEFAULT_WORKSPACE_TITLE;
+    },
     /** Held by id, so removing or sending the draft closes the dialog. */
     previewImage() {
       return this.state.draftImages.find((row) => row.id === this.previewImageId) ?? null;
@@ -524,6 +580,7 @@ export default {
         return this.t("chat.placeholderSteerQueue", { shortcut });
       }
       if (this.state.planActive) return this.t("chat.placeholderPlan");
+      if (this.hero) return this.t("chat.placeholderNewSession");
       return this.t("chat.placeholderDesktop");
     },
   },
@@ -544,6 +601,11 @@ export default {
     window.removeEventListener("mousedown", this.onComposerOverlayPointer, true);
   },
   methods: {
+    pickWorkspace(workspaceId) {
+      this.workspaceOpen = false;
+      if (!workspaceId || workspaceId === this.state.currentWorkspaceId) return;
+      this.$emit("pick-workspace", workspaceId);
+    },
     chooseModel(model) {
       this.modelOpen = false;
       this.$emit("choose-model", model);
@@ -768,12 +830,21 @@ export default {
   padding: 8px 0 20px;
 }
 .desktop-composer__model-row { display:flex; justify-content:flex-end; gap:2px; min-height:28px; margin-bottom:6px; }
+.desktop-composer[data-hero="true"] .desktop-composer__model-row { justify-content:space-between; }
 .desktop-composer__model,
 .desktop-composer__circle,
 .desktop-composer__send {
   border:0; color:var(--q-ink-2); cursor:pointer;
 }
 .desktop-composer__model { display:flex; align-items:center; gap:4px; border-radius:999px; padding:4px 10px; background:transparent; font-size:14px; }
+/* The model name is the long label of the pair, so it is the one that gives way;
+   without a floor of its own the workspace chip absorbs every pixel of shrink. */
+.desktop-composer__workspace-slot { flex:0 0 auto; max-width:45%; }
+.desktop-composer__model-slot { min-width:0; }
+.desktop-composer__workspace,
+.desktop-composer__model-slot .desktop-composer__model { min-width:0; max-width:100%; }
+.desktop-composer__workspace span,
+.desktop-composer__model-slot .desktop-composer__model span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .desktop-composer__model svg,
 .desktop-composer__permission svg,
 .desktop-composer__circle svg,

package/src/desktop/DesktopShell.vue

@@ -16,7 +16,7 @@
       @archive-session="$emit('archive-session', $event)"
     />
     <main class="desktop-shell__main">
-      <header class="desktop-shell__header">
+      <header v-if="!newSessionHero" class="desktop-shell__header">
         <h1>{{ state.sessionTitle }}</h1>
         <Transition name="lares-tabs">
           <LaresDesktopPreviewTabs
@@ -30,12 +30,17 @@
           />
         </Transition>
       </header>
-      <section class="desktop-shell__conversation">
+      <section class="desktop-shell__conversation" :data-hero="newSessionHero ? 'true' : 'false'">
         <div v-if="state.failed" class="desktop-shell__failure">
           <span>{{ state.failText }}</span>
           <button type="button" :disabled="state.starting" @click="$emit('retry')">{{ t("probe.retry") }}</button>
         </div>
+        <div v-if="newSessionHero" class="desktop-shell__brand">
+          <div class="desktop-shell__logo" :style="logoStyle" aria-hidden="true" />
+          <h1>{{ t("shell.title") }}</h1>
+        </div>
         <LaresTranscript
+          v-if="!newSessionHero"
           ref="transcript"
           :items="state.viewItems"
           :running="state.running"
@@ -58,6 +63,7 @@
           ref="composer"
           :state="state"
           :t="t"
+          :hero="newSessionHero"
           :model-key="modelKey"
           :effort-name="effortName"
           @update-draft="$emit('update-draft', $event)"
@@ -67,6 +73,7 @@
           @files="$emit('files', $event)"
           @remove-image="$emit('remove-image', $event)"
           @choose-model="$emit('choose-model', $event)"
+          @pick-workspace="$emit('pick-workspace', $event)"
           @choose-effort="$emit('choose-effort', $event)"
           @choose-permission="$emit('choose-permission', $event)"
           @disable-plan="$emit('disable-plan')"
@@ -115,6 +122,7 @@ import LaresDesktopPreviewTabs from "./DesktopPreviewTabs.vue";
 import LaresDesktopSidebar from "./DesktopSidebar.vue";
 import LaresDesktopComposer from "./DesktopComposer.vue";
 import LaresDirectoryBrowser from "./DirectoryBrowser.vue";
+import { MARK_DATA_URI } from "@olares/lares-core/icons/mark";
 
 export default {
   name: "LaresDesktopShell",
@@ -138,7 +146,7 @@ export default {
     effortName: { type: Function, required: true },
   },
   emits: [
-    "create", "pick-session", "retry", "open-file", "answer", "update-draft",
+    "create", "pick-session", "pick-workspace", "retry", "open-file", "answer", "update-draft",
     "send", "stop", "steer-queue", "files", "remove-image", "choose-model", "choose-effort", "choose-permission", "disable-plan", "goal-action", "answer-approval", "answer-questions",
     "open-commands", "open-references", "pick-command", "queue-action", "show-chat", "close-preview-tab",
     "refresh-workspaces", "browse-workspaces", "browse-directory",
@@ -146,6 +154,20 @@ export default {
     "delete-workspace", "move-workspace", "move-session", "rename-session",
     "fork-session", "archive-session",
   ],
+  computed: {
+    newSessionHero() {
+      if (this.state.previewMode === "preview" && this.state.preview.path) return false;
+      return (
+        this.state.viewItems.length === 0
+        && !this.state.running
+        && !this.state.historyLoading
+        && !this.state.starting
+      );
+    },
+    logoStyle() {
+      return { backgroundImage: MARK_DATA_URI };
+    },
+  },
   methods: {
     focusComposer() {
       this.$refs.composer?.focus?.();
@@ -188,6 +210,10 @@ export default {
 .desktop-shell__header { display:flex; height:44px; flex-shrink:0; align-items:center; gap:16px; padding:0 18px; border-bottom:1px solid var(--q-separator); }
 .desktop-shell__header h1 { max-width:min(280px, 40%); overflow:hidden; margin:0; font-size:15px; font-weight:500; line-height:22px; text-overflow:ellipsis; white-space:nowrap; }
 .desktop-shell__conversation { position:relative; display:flex; min-width:0; min-height:0; flex:1; flex-direction:column; }
+.desktop-shell__conversation[data-hero="true"] { justify-content:center; }
+.desktop-shell__brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:36px; }
+.desktop-shell__brand h1 { margin:0; color:var(--q-ink-1); font-size:26px; font-weight:600; line-height:34px; letter-spacing:-.01em; }
+.desktop-shell__logo { width:44px; height:44px; background-position:center; background-repeat:no-repeat; background-size:cover; box-shadow:inset 0 1.5px 0 rgb(255 255 255 / 50%); }
 .desktop-shell__failure { display:flex; width:calc(var(--lares-column) - 2 * var(--lares-gutter)); align-items:center; gap:10px; margin:12px auto 0; color:var(--q-orange-default); font-size:14px; }
 .desktop-shell__failure button { border:0; border-radius:6px; padding:5px 8px; background:var(--q-blue-alpha); color:var(--q-blue-default); }
 /* The scroller stays full width so the wheel works over the gutters; the rows carry the reading column. */

package/src/desktop/DirectoryBrowser.vue

@@ -1,18 +1,50 @@
 <template>
   <LaresPcDialog
     :open="state.open"
-    :title="t('desktop.chooseFolder')"
+    :title="t('desktop.selectWorkspaceDirectory')"
     :close-label="t('desktop.close')"
     :busy="state.creating || state.creatingFolder"
     :width="620"
+    variant="directory"
     @close="$emit('close')"
   >
+    <template #header="{ titleId }">
+      <div class="directory-browser__header">
+        <h2 :id="titleId">{{ t("desktop.selectWorkspaceDirectory") }}</h2>
+        <div class="directory-browser__location">
+          <input
+            v-if="editingPath"
+            ref="pathInput"
+            v-model="pathDraft"
+            :aria-label="t('desktop.folderPath')"
+            @keydown.enter.prevent="submitPath"
+            @keydown.esc.prevent="editingPath = false"
+            @blur="editingPath = false"
+          />
+          <nav v-else-if="state.listing" :aria-label="t('desktop.folderPath')">
+            <template v-for="(crumb, index) in homeCrumbs" :key="crumb.path">
+              <span v-if="index" aria-hidden="true">/</span>
+              <button type="button" @click="$emit('browse', crumb.path)">
+                {{ crumb.path === state.listing.home ? t("desktop.home") : crumb.name }}
+              </button>
+            </template>
+          </nav>
+          <button
+            v-if="!editingPath"
+            type="button"
+            class="directory-browser__edit"
+            :aria-label="t('desktop.folderPath')"
+            @click="beginPathEdit"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="m4 16-.75 4.25L7.5 19.5 18.4 8.6a2.1 2.1 0 0 0-3-3Z" />
+              <path d="m13.8 7.2 3 3M3 21h18" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </template>
     <div class="directory-browser">
-      <nav v-if="state.listing" class="directory-browser__crumbs" :aria-label="t('desktop.folderPath')">
-        <button v-for="crumb in state.listing.crumbs" :key="crumb.path" type="button" @click="$emit('browse', crumb.path)">
-          {{ crumb.path === state.listing.home ? t("desktop.home") : crumb.name }}
-        </button>
-      </nav>
       <div class="directory-browser__body">
         <p v-if="state.loading" class="directory-browser__status">{{ t("desktop.loadingFolders") }}</p>
         <p v-else-if="state.error" class="directory-browser__error">{{ state.error }}</p>
@@ -40,9 +72,7 @@
     </div>
     <template #footer>
       <div class="directory-browser__footer">
-        <p class="directory-browser__path">{{ selected || state.listing?.path || "" }}</p>
-        <div class="directory-browser__footer-row">
-          <div class="directory-browser__footer-left">
+        <div class="directory-browser__footer-left">
             <button
               type="button"
               class="directory-browser__new-folder"
@@ -60,8 +90,8 @@
               />
               <span>{{ t("desktop.showHiddenFiles") }}</span>
             </label>
-          </div>
-          <div class="directory-browser__footer-right">
+        </div>
+        <div class="directory-browser__footer-right">
             <button type="button" class="directory-browser__cancel" :disabled="state.creating" @click="$emit('close')">
               {{ t("desktop.cancel") }}
             </button>
@@ -71,9 +101,8 @@
               :disabled="state.loading || state.creating || !(selected || state.listing?.path)"
               @click="$emit('choose', selected || state.listing.path)"
             >
-              {{ state.creating ? t("desktop.addingWorkspace") : t("desktop.addWorkspace") }}
+              {{ state.creating ? t("desktop.addingWorkspace") : t("desktop.open") }}
             </button>
-          </div>
         </div>
       </div>
     </template>
@@ -100,17 +129,25 @@ export default {
   },
   emits: ["close", "browse", "choose", "create-folder", "toggle-hidden"],
   data() {
-    return { selected: "", newFolderOpen: false };
+    return { selected: "", newFolderOpen: false, editingPath: false, pathDraft: "" };
   },
   computed: {
     visibleEntries() {
       const entries = this.state.listing?.entries ?? [];
       return this.state.showHidden ? entries : entries.filter((entry) => !entry.hidden);
     },
+    homeCrumbs() {
+      const crumbs = this.state.listing?.crumbs ?? [];
+      const home = this.state.listing?.home;
+      const homeIndex = crumbs.findIndex((crumb) => crumb.path === home);
+      return homeIndex >= 0 ? crumbs.slice(homeIndex) : crumbs;
+    },
   },
   watch: {
     "state.listing.path"() {
       this.selected = this.state.selectPath || "";
+      this.pathDraft = this.state.listing?.path || "";
+      this.editingPath = false;
     },
     "state.selectPath"(path) {
       if (path) this.selected = path;
@@ -129,38 +166,62 @@ export default {
     onCreateFolder(name) {
       this.$emit("create-folder", name);
     },
+    beginPathEdit() {
+      this.pathDraft = this.state.listing?.path || "";
+      this.editingPath = true;
+      this.$nextTick(() => {
+        this.$refs.pathInput?.focus();
+        this.$refs.pathInput?.select();
+      });
+    },
+    submitPath() {
+      const path = this.pathDraft.trim();
+      if (!path) return;
+      this.editingPath = false;
+      this.$emit("browse", path);
+    },
   },
 };
 </script>
 
 <style scoped>
-.directory-browser { display:flex; height:min(440px, calc(100vh - 180px)); flex-direction:column; margin:-16px; }
+.directory-browser__header { height:76px; }
+.directory-browser__header h2 { height:42px; margin:0; padding:19px 22px 0; font-size:16px; font-weight:500; line-height:22px; }
+.directory-browser__location { display:flex; height:34px; align-items:center; gap:8px; padding:0 20px 7px 22px; }
+.directory-browser__location nav { display:flex; min-width:0; flex:1; align-items:center; gap:7px; overflow:hidden; color:var(--q-ink-2); }
+.directory-browser__location nav button { min-width:0; overflow:hidden; border:0; padding:0; background:transparent; color:inherit; font:inherit; font-size:14px; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
+.directory-browser__location nav button:hover { color:var(--q-ink-1); }
+.directory-browser__location input { box-sizing:border-box; min-width:0; height:27px; flex:1; border:1px solid var(--q-input-stroke); border-radius:5px; padding:0 8px; outline:none; background:var(--q-background-2); color:var(--q-ink-1); font:inherit; font-size:13px; }
+.directory-browser__edit { display:grid; width:30px; height:30px; flex-shrink:0; place-items:center; border:0; border-radius:6px; background:transparent; color:var(--q-ink-2); cursor:pointer; }
+.directory-browser__edit:hover { background:var(--q-background-hover); color:var(--q-ink-1); }
+.directory-browser__edit svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
+.directory-browser { display:flex; height:min(316px, calc(100vh - 186px)); flex-direction:column; }
 .directory-browser svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
-.directory-browser__crumbs { display:flex; gap:3px; min-height:38px; align-items:center; overflow:auto; padding:0 14px; border-bottom:1px solid var(--q-separator); }
-.directory-browser__crumbs button { flex-shrink:0; border:0; border-radius:5px; padding:4px 6px; background:transparent; color:var(--q-ink-3); font-size:14px; }
-.directory-browser__crumbs button:hover { background:var(--q-background-hover); color:var(--q-ink-1); }
-.directory-browser__body { flex:1; min-height:0; overflow:auto; padding:8px; }
-.directory-browser__row { display:flex; width:100%; align-items:center; gap:9px; border:0; border-radius:7px; padding:8px 10px; background:transparent; color:var(--q-ink-1); text-align:left; }
-.directory-browser__row:hover,
-.directory-browser__row[data-selected="true"] { background:var(--q-background-hover); }
+.directory-browser__body { flex:1; min-height:0; overflow:auto; padding:13px 20px; }
+.directory-browser__row { display:flex; width:100%; height:28px; align-items:center; gap:7px; border:0; border-radius:6px; padding:0 6px; background:transparent; color:var(--q-ink-1); font-size:14px; text-align:left; }
+.directory-browser__row:hover { background:var(--q-background-hover); }
+.directory-browser__row[data-selected="true"] { background:var(--q-background-selected); }
 .directory-browser__row > span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .directory-browser__open { display:grid; width:26px; height:26px; place-items:center; border:0; background:transparent; color:var(--q-ink-3); }
 .directory-browser__status,
-.directory-browser__error { margin:20px; color:var(--q-ink-3); font-size:15px; text-align:center; }
+.directory-browser__error { margin:20px; color:var(--q-ink-3); font-size:14px; text-align:center; }
 .directory-browser__error { color:var(--q-orange-default); }
-.directory-browser__footer { display:flex; width:100%; flex-direction:column; gap:10px; }
-.directory-browser__path { min-width:0; margin:0; overflow:hidden; color:var(--q-ink-3); font-size:13px; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
-.directory-browser__footer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.directory-browser__footer { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; }
 .directory-browser__footer-left { display:flex; min-width:0; flex:1; align-items:center; gap:12px; }
 .directory-browser__footer-right { display:flex; flex-shrink:0; align-items:center; gap:8px; }
-.directory-browser__new-folder { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--q-separator); border-radius:999px; padding:0 10px; height:32px; background:transparent; color:var(--q-ink-2); font:inherit; font-size:13px; white-space:nowrap; }
-.directory-browser__new-folder svg { width:14px; height:14px; }
-.directory-browser__hidden { display:inline-flex; align-items:center; gap:6px; color:var(--q-ink-3); font-size:13px; white-space:nowrap; cursor:pointer; }
-.directory-browser__hidden input { width:15px; height:15px; margin:0; }
+.directory-browser__new-folder { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--q-btn-stroke); border-radius:999px; padding:0 14px; height:34px; background:transparent; color:var(--q-ink-1); font:inherit; font-size:14px; white-space:nowrap; }
+/* The footer is a dialog slot, outside `.directory-browser`, so it misses the shared icon rule. */
+.directory-browser__new-folder svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
+.directory-browser__hidden { display:inline-flex; align-items:center; color:var(--q-ink-2); font-size:13px; white-space:nowrap; cursor:pointer; }
+.directory-browser__hidden input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
+.directory-browser__hidden:has(input:checked) { color:var(--q-ink-1); }
 .directory-browser__cancel,
-.directory-browser__choose { min-width:76px; height:32px; border-radius:999px; padding:0 12px; }
-.directory-browser__cancel { border:1px solid var(--q-separator); background:transparent; color:var(--q-ink-2); }
-.directory-browser__choose { border:0; background:var(--q-blue-default); color:var(--q-ink-on-brand); }
+.directory-browser__choose { min-width:67px; height:34px; border-radius:999px; padding:0 14px; font-size:14px; }
+.directory-browser__cancel { border:1px solid var(--q-btn-stroke); background:transparent; color:var(--q-ink-1); }
+.directory-browser__new-folder:hover:not(:disabled),
+.directory-browser__cancel:hover:not(:disabled) { background:var(--q-btn-bg-hover); border-color:var(--q-btn-stroke-hover); }
+/* The confirm button is the inverse surface: white on dark, dark on light. */
+.directory-browser__choose { border:0; background:var(--q-background-9); color:var(--q-background-1); }
 .directory-browser button,
 .directory-browser__cancel,
 .directory-browser__choose { cursor:pointer; font:inherit; }

package/src/desktop/ui/PcDialog.vue

@@ -1,17 +1,26 @@
 <template>
   <Teleport to="body">
     <Transition name="lares-dialog">
-      <div v-if="open" class="lares-pc-dialog" role="dialog" aria-modal="true" :aria-labelledby="titleId">
+      <div
+        v-if="open"
+        class="lares-pc-dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="titleId"
+        :data-variant="variant || undefined"
+      >
         <button class="lares-pc-dialog__backdrop" type="button" :aria-label="closeLabel" @click="close" />
         <section class="lares-pc-dialog__surface" :style="{ width: surfaceWidth }">
         <header class="lares-pc-dialog__header">
-          <div class="lares-pc-dialog__title">
-            <h2 :id="titleId">{{ title }}</h2>
-            <button type="button" class="lares-pc-dialog__close" :aria-label="closeLabel" @click="close">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 7 10 10M17 7 7 17" /></svg>
-            </button>
-          </div>
-          <p v-if="description">{{ description }}</p>
+          <slot name="header" :title-id="titleId">
+            <div class="lares-pc-dialog__title">
+              <h2 :id="titleId">{{ title }}</h2>
+              <button type="button" class="lares-pc-dialog__close" :aria-label="closeLabel" @click="close">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 7 10 10M17 7 7 17" /></svg>
+              </button>
+            </div>
+            <p v-if="description">{{ description }}</p>
+          </slot>
         </header>
         <div class="lares-pc-dialog__body">
           <slot />
@@ -37,6 +46,7 @@ export default {
     closeLabel: { type: String, default: "Close" },
     width: { type: [Number, String], default: 440 },
     busy: { type: Boolean, default: false },
+    variant: { type: String, default: "" },
   },
   emits: ["close"],
   data() {
@@ -82,4 +92,9 @@ export default {
 .lares-pc-dialog__close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
 .lares-pc-dialog__body { min-height:0; overflow:auto; padding:16px; }
 .lares-pc-dialog__footer { display:flex; min-height:58px; flex-shrink:0; align-items:center; justify-content:flex-end; gap:8px; padding:0 16px; border-top:1px solid var(--q-separator); }
+/* The directory variant only changes geometry; colors stay on the shared tokens. */
+.lares-pc-dialog[data-variant="directory"] .lares-pc-dialog__surface { border-radius:20px; }
+.lares-pc-dialog[data-variant="directory"] .lares-pc-dialog__header { padding:0; }
+.lares-pc-dialog[data-variant="directory"] .lares-pc-dialog__body { padding:0; }
+.lares-pc-dialog[data-variant="directory"] .lares-pc-dialog__footer { min-height:62px; padding:0 22px; }
 </style>