dsh-homepage 0.1.1 → 0.1.2

package/lib/cards/sidebar-list.js

@@ -117,6 +117,28 @@
       if (value === null || value === undefined) return ''
       return String(value)
     }
+    /**
+     * @param value - a workspace view, a workspace id, or anything else.
+     * @returns the workspace id it carries, or '' when it names none. The
+     *   client service answers `workspaceId`; a host that answers `id` is the
+     *   one other spelling this region accepts.
+     */
+    function sbWorkspaceId(value) {
+      if (typeof value === 'string') return value
+      if (!value || typeof value !== 'object') return ''
+      return sbText(value.workspaceId || value.id)
+    }
+    /**
+     * @param value - an ISO-8601 instant, epoch milliseconds, or anything else.
+     * @returns epoch milliseconds, or 0 when it names no time.
+     */
+    function sbEpoch(value) {
+      if (typeof value === 'number') return isFinite(value) && value > 0 ? value : 0
+      var text = sbText(value)
+      if (text === '') return 0
+      var parsed = Date.parse(text)
+      return isFinite(parsed) && parsed > 0 ? parsed : 0
+    }
     /** @param value - a path. @returns its last segment, both separators accepted. */
     function sbBase(value) {
       var path = sbText(value)
@@ -223,19 +245,22 @@
       return draw(size || 16)
     }
     /**
-     * A project's own recency: the newest session it shows. A project with no
-     * sessions stays at zero on purpose — it has nothing to be recent about, and
-     * borrowing its neighbours' time would make it outrank a project in use.
+     * A project's own recency: the newest session it shows, or when the
+     * workspace itself was created — whichever is later. A project with no
+     * sessions is not an old project: registering it is an event, so it must
+     * not sink to the bottom of a section ordered by recency the moment it is
+     * added. Borrowing a neighbour's time is still wrong, which is what the
+     * creation instant keeps from happening.
      *
      * A blank row is skipped: it is the draft the shell holds for a workspace
      * you focused, never sent, so it is not an event and cannot make a project
      * recent. All its `updatedAt` ever says is when the draft was made.
      * @param project - a projected project.
-     * @returns the newest `updatedAt` below it, or 0.
+     * @returns the newest instant the project stands for, or 0.
      */
     function sbProjectAt(project) {
+      var at = Number(project && project.createdAt) || 0
       var rows = Array.isArray(project && project.rows) ? project.rows : []
-      var at = 0
       for (var i = 0; i < rows.length; i += 1) {
         if (rows[i] && rows[i].blank === true) continue
         var value = Number(rows[i] && rows[i].updatedAt) || 0
@@ -273,12 +298,19 @@
      * ungrouped bucket. Members are the projects the sidebar listed plus any
      * the document still names, so a stale assignment stays visible and
      * removable instead of silently disappearing.
+     *
+     * A member the projection has not carried yet — one this region created a
+     * moment ago — is drawn from the `fresh` memory instead: without it the row
+     * has no title and no path, so it reads as the workspace id, and it is
+     * marked as a stale assignment it is not.
      * @param layout - the document, or null.
      * @param items - the projected projects.
+     * @param fresh - `{ [id]: { title, path, createdAt } }` for just-created workspaces.
      * @returns the sections, each `{ key, title, color, items, collapsed, sort }`.
      */
-    function sbSections(layout, items) {
+    function sbSections(layout, items, fresh) {
       var projects = Array.isArray(items) ? items : []
+      var memory = fresh && typeof fresh === 'object' ? fresh : null
       var groups = kit.sidebarGroups(layout).slice().sort(function (left, right) {
         var a = left && typeof left.order === 'number' ? left.order : 0
         var b = right && typeof right.order === 'number' ? right.order : 0
@@ -310,7 +342,16 @@
         if (known[id]) return
         var member = members[id]
         var section = member && member.group && byId[member.group] ? byId[member.group] : loose
-        section.items.push({ id: id, title: '', path: '', sessions: 0, rows: [], orphan: true })
+        var made = memory && memory[id] ? memory[id] : null
+        section.items.push({
+          id: id,
+          title: made ? sbText(made.title) : '',
+          path: made ? sbText(made.path) : '',
+          sessions: 0,
+          rows: [],
+          createdAt: made ? Number(made.createdAt) || 0 : 0,
+          orphan: !made,
+        })
       })
       var out = sections.slice()
       if (loose.items.length > 0) out.push(loose)
@@ -937,11 +978,25 @@
         }
       }, [])
 
-      /** Register the folder on screen as a workspace. */
-      function adopt() {
-        var listing = state.listing
-        var path = sbText(listing && listing.path)
-        if (path === '') return
+      /**
+       * The folder this dialog would register as a workspace: the path in the
+       * open field — a typed path is a target even before Enter has walked the
+       * list to it — and the level on screen when the field is closed or blank.
+       * Without the draft the two disagree: the operator types a folder, clicks
+       * the confirm, and the workspace is made in whatever level happened to be
+       * listed underneath, which reads as "it ignored what I typed".
+       * @returns an absolute path, or '' when there is nothing to name.
+       */
+      function targetPath() {
+        var draft = state.pathDraft === null ? '' : sbText(state.pathDraft).trim()
+        if (draft !== '') return draft
+        return sbText(state.listing && state.listing.path)
+      }
+      /**
+       * Register one directory as a workspace and hand it back to the caller.
+       * @param path - an absolute directory the Host has already accepted.
+       */
+      function commit(path) {
         var projects = sbService('workspaces')
         if (!projects || typeof projects.create !== 'function') {
           patch({ error: sbT('sidebar.list.readonly'), phase: 'error' })
@@ -956,16 +1011,68 @@
           return
         }
         if (!outcome || typeof outcome.then !== 'function') {
-          onPicked()
+          onPicked(outcome)
           return
         }
-        outcome.then(function () {
-          if (alive.current) onPicked()
+        outcome.then(function (created) {
+          if (alive.current) onPicked(created)
         }, function (error) {
           if (!alive.current) return
           patch({ busy: false, phase: 'error', error: sbT('sidebar.list.failed', { reason: sbReason(error) }) })
         })
       }
+      /**
+       * The confirm action. It commits the folder it names, and a typed path is
+       * read through the Host first: the listing proves the directory exists
+       * and answers with its canonical spelling, which is what the workspace has
+       * to store (`..`, a trailing separator, a Windows forward slash).
+       */
+      function adopt() {
+        var target = targetPath()
+        if (target === '') return
+        if (state.busy) return
+        if (target === sbText(state.listing && state.listing.path)) {
+          commit(target)
+          return
+        }
+        var service = sbService('uiWorkspace')
+        if (!service || typeof service.listDirectory !== 'function') {
+          // No browsing capability behind the field: the Host still owns
+          // `create`, and it is the one that validates the path.
+          commit(target)
+          return
+        }
+        patch({ busy: true, error: '' })
+        var outcome = null
+        try {
+          outcome = service.listDirectory(target)
+        } catch (error) {
+          patch({
+            busy: false,
+            phase: 'error',
+            pathDraft: target,
+            error: sbT('sidebar.list.dirFailed', { reason: sbReason(error) }),
+          })
+          return
+        }
+        if (!outcome || typeof outcome.then !== 'function') {
+          var resolved = sbText(outcome && outcome.path) || target
+          commit(resolved)
+          return
+        }
+        outcome.then(function (listing) {
+          if (!alive.current) return
+          commit(sbText(listing && listing.path) || target)
+        }, function (error) {
+          if (!alive.current) return
+          patch({
+            busy: false,
+            phase: 'error',
+            pathDraft: target,
+            error: sbT('sidebar.list.dirFailed', { reason: sbReason(error) }),
+          })
+        })
+      }
       /** Create the folder named in the field, then open it. */
       function mint() {
         var name = sbText(state.folder).trim()
@@ -1067,8 +1174,17 @@
             patch({ pathDraft: here })
           }, { key: 'edit', sb: 'dirEditPath', size: 14, className: 'ph-sb-dir-edit' }),
         ])
+      // What the confirm action will register, said out loud under the path it
+      // reads: a field whose contents are not the folder that will be created is
+      // the trap this line exists to remove.
+      var target = targetPath()
+      var targetLine = target === ''
+        ? null
+        : h('div', { className: 'ph-sb-dir-note ph-sb-dir-target', key: 'target', 'data-sb': 'dirTarget' },
+          sbT('sidebar.list.dirTarget', { path: target }))
       var body = h('div', { className: 'ph-sb-dir', key: 'dir' }, [
         pathRow,
+        targetLine,
         state.phase === 'loading'
           ? h('div', { className: 'ph-sb-dir-note', key: 'loading' }, sbT('sidebar.list.dirLoading'))
           : null,
@@ -1134,7 +1250,9 @@
           ? h('div', { className: 'ph-sb-form-error', key: 'error', 'data-sb': 'dirError' }, state.error)
           : null,
       ])
-      var choose = sbText(listing && listing.path) !== ''
+      // A typed path is a target of its own: the confirm action stays live for
+      // it even when the level underneath could not be listed at all.
+      var choose = target !== ''
       // The same footer the shipped browser draws: the two actions that change
       // the folder on the left, the confirm/cancel pair on the right, and the
       // hidden-items toggle between them — its label never shifts, because the
@@ -1312,7 +1430,18 @@
       var store = kit.useSidebarLayout()
       var layout = store.layout || null
       var items = Array.isArray(store.workspaces) ? store.workspaces : []
-      var sections = sbSections(layout, items)
+      /**
+       * The workspaces this region created a moment ago, keyed by id, with the
+       * title, path and creation instant the Host answered with. The projection
+       * that carries the same facts is published by an effect in another React
+       * root, so for the first render after a create the document is all this
+       * region has — and a member with no title and no path draws as its
+       * workspace id, which is not the folder the reader just picked.
+       */
+      var freshPair = sbReact.useState({})
+      var fresh = freshPair[0]
+      var setFresh = freshPair[1]
+      var sections = sbSections(layout, items, fresh)
       var current = sbText(store.current)
       var ready = sbKitReady()
 
@@ -1357,9 +1486,11 @@
        * The region's own directory browser, when it is up. The Host's native
        * chooser cannot exist for a browser connected to another address, so the
        * picker that is missing its Host half falls back to this dialog instead
-       * of reporting that the control does nothing.
+       * of reporting that the control does nothing. `null` is closed and a
+       * string is the group the flow started from ('' for the plain add), so the
+       * workspace it makes lands where the reader asked for it.
        */
-      var pickingPair = sbReact.useState(false)
+      var pickingPair = sbReact.useState(null)
       var picking = pickingPair[0]
       var setPicking = pickingPair[1]
 
@@ -1376,6 +1507,23 @@
         }
       }, [])
 
+      // A workspace stops being "fresh" the moment the projection carries it:
+      // from then on the Host's own title and path are what the row reads.
+      sbReact.useEffect(function () {
+        var listed = {}
+        for (var i = 0; i < items.length; i += 1) listed[sbText(items[i] && items[i].id)] = true
+        setFresh(function (live) {
+          var kept = {}
+          var changed = false
+          for (var key in live) {
+            if (!Object.prototype.hasOwnProperty.call(live, key)) continue
+            if (listed[key]) { changed = true; continue }
+            kept[key] = live[key]
+          }
+          return changed ? kept : live
+        })
+      }, [items])
+
       /**
        * The header's narrow shape, as the stylesheet drew it. Both shapes are in
        * the tree and the container query hides one of them, so this is the only
@@ -1414,12 +1562,12 @@
       // this is the region's own card's way out; closing twice is the same as
       // closing once, and a dialog with no way out is the defect being fixed.
       sbReact.useEffect(function () {
-        if (!editor && !picking && !confirming) return undefined
+        if (!editor && picking === null && !confirming) return undefined
         if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return undefined
         function onKey(event) {
           if (!event || event.key !== 'Escape') return
           setEditor(null)
-          setPicking(false)
+          setPicking(null)
           setConfirming(null)
         }
         document.addEventListener('keydown', onKey)
@@ -1530,21 +1678,120 @@
         if (!projects) return null
         return projects.create({ path: path })
       }
-      /** @param picked - whatever the Host's picker resolved. */
-      function adoptPicked(picked) {
-        if (picked && typeof picked === 'object' && sbText(picked.id) !== '') return picked
+      /**
+       * What this region knows about a workspace the Host just answered with,
+       * in the shape the list draws a member it has no projection for: the id
+       * it files, the name and path the row needs, and when it was created.
+       * @param workspace - a WorkspaceView from `workspaces.create`, or an id.
+       * @returns `{ id, title, path, createdAt }`, or null when there is no id.
+       */
+      function freshOf(workspace) {
+        var id = sbWorkspaceId(workspace)
+        if (id === '') return null
+        var view = workspace && typeof workspace === 'object' ? workspace : {}
+        var path = sbText(view.path)
+        return {
+          id: id,
+          // The Host titles a Workspace after its folder; a workspace it did
+          // not title still has the folder to fall back to, and the id is the
+          // one thing this row must never be named after.
+          title: sbText(view.title).trim() || sbBase(path),
+          path: path,
+          createdAt: sbEpoch(view.createdAt) || Date.now(),
+        }
+      }
+      /** @param entry - one `freshOf` record, remembered until the projection carries it. */
+      function rememberFresh(entry) {
+        setFresh(function (live) {
+          var next = {}
+          for (var key in live) {
+            if (Object.prototype.hasOwnProperty.call(live, key)) next[key] = live[key]
+          }
+          next[entry.id] = entry
+          return next
+        })
+      }
+      /** @param workspaceId - the workspace whose remembered name is no longer wanted. */
+      function forgetFresh(workspaceId) {
+        var id = sbText(workspaceId)
+        if (id === '') return
+        setFresh(function (live) {
+          if (!Object.prototype.hasOwnProperty.call(live, id)) return live
+          var next = {}
+          for (var key in live) {
+            if (Object.prototype.hasOwnProperty.call(live, key) && key !== id) next[key] = live[key]
+          }
+          return next
+        })
+      }
+      /**
+       * File a workspace the reader just added into the group whose own control
+       * started the flow, and unfold that group so the new row is on screen.
+       * A project added from "实验室" that surfaces in the ungrouped bucket reads
+       * as "it did not land in the category at all", which is the report this
+       * answers.
+       *
+       * The member record is written even when there is no group: it is what
+       * puts the row in the list at once instead of waiting for the Host's
+       * projection, and the remembered name is what keeps that row from
+       * appearing as its workspace id for the first render.
+       * @param workspace - the workspace the Host answered with, or its id.
+       * @param groupKey - the group the flow started from; '' for the plain add.
+       * @returns the save promise, or null when there is nothing to file.
+       */
+      function fileNewWorkspace(workspace, groupKey) {
+        var entry = freshOf(workspace)
+        if (!entry) return null
+        rememberFresh(entry)
+        var key = sbText(groupKey)
+        return kit.mutateSidebarLayout(function (live) {
+          var next = kit.withWorkspace(live, entry.id, { group: key === '' ? null : key })
+          if (key === '') return next
+          var groups = kit.sidebarGroups(next)
+          for (var i = 0; i < groups.length; i += 1) {
+            var group = groups[i]
+            if (group && sbText(group.id) === key && group.collapsed === true) {
+              return kit.withGroupPatch(next, key, { collapsed: false })
+            }
+          }
+          return next
+        })
+      }
+      /**
+       * Take whatever the Host's chooser resolved and register it, filing it
+       * into the group the flow started from.
+       * @param picked - the path the Host resolved, or a workspace it already made.
+       * @param groupKey - the group the flow started from; '' for the plain add.
+       * @returns the created workspace (or its save), or null.
+       */
+      function adoptPicked(picked, groupKey) {
+        var home = sbText(groupKey)
+        // A workspace the Host already made, as opposed to a path it resolved:
+        // a path is a string, and a workspace is the view that carries its id.
+        if (picked && typeof picked === 'object' && sbWorkspaceId(picked) !== '') {
+          return fileNewWorkspace(picked, home)
+        }
         var path = pickedPath(picked)
         if (path === '') return null
-        return createWorkspace(path)
+        var created = createWorkspace(path)
+        if (!created || typeof created.then !== 'function') {
+          return fileNewWorkspace(created, home)
+        }
+        return created.then(function (workspace) {
+          return fileNewWorkspace(workspace, home)
+        })
       }
-      /** Put the region's own directory browser up. */
-      function openDirectoryPicker() {
+      /**
+       * Put the region's own directory browser up.
+       * @param groupKey - the group the flow started from; '' for the plain add.
+       */
+      function openDirectoryPicker(groupKey) {
         if (!mountedRef.current) return
         setActionError('')
         setMenu(null)
         setEditor(null)
         setConfirming(null)
-        setPicking(true)
+        setPicking(sbText(groupKey))
       }
       /**
        * Add a project. The Host's chooser is asked first: on a local connection
@@ -1554,21 +1801,36 @@
        * then opens its own browser (see `SidebarDirectoryDialog`), which lists
        * directories through the Host the way the shipped sidebar does, instead
        * of leaving the control dead.
+       * @param section - the group whose control started the flow, or null.
        */
-      function newProject() {
+      function newProject(section) {
+        var home = sbText(section && section.key)
         act(function () {
-          var service = need('uiWorkspace', 'pickDirectory')
-          if (!service) return null
+          var service = sbService('uiWorkspace')
+          var picks = service && typeof service.pickDirectory === 'function'
+          var browses = service && typeof service.listDirectory === 'function'
+          if (!picks && !browses) {
+            setActionError(sbT('sidebar.list.readonly'))
+            return null
+          }
+          // A Host with listing but no chooser is exactly the remote case; the
+          // region's own browser is the only interaction it can offer.
+          if (!picks) {
+            openDirectoryPicker(home)
+            return null
+          }
           var outcome = null
           try {
             outcome = service.pickDirectory()
           } catch (error) {
-            openDirectoryPicker()
+            openDirectoryPicker(home)
             return null
           }
-          if (!outcome || typeof outcome.then !== 'function') return adoptPicked(outcome)
-          return outcome.then(adoptPicked, function () {
-            openDirectoryPicker()
+          if (!outcome || typeof outcome.then !== 'function') return adoptPicked(outcome, home)
+          return outcome.then(function (picked) {
+            return adoptPicked(picked, home)
+          }, function () {
+            openDirectoryPicker(home)
             return null
           })
         })
@@ -1602,15 +1864,20 @@
       }
       /** @param project - the project to unregister. */
       function removeProject(project) {
+        var id = sbText(project && project.id)
         act(function () {
           var service = need('workspaces', 'delete')
           if (!service) return null
-          return service.delete(sbText(project && project.id))
+          // Its remembered name goes with it: the row it belongs to is about to
+          // stop existing, and a later workspace never reuses the id.
+          forgetFresh(id)
+          return service.delete(id)
         })
       }
       /** @param id - a workspace the document still names but the sidebar dropped. */
       function forgetProject(id) {
         act(function () {
+          forgetFresh(id)
           return kit.mutateSidebarLayout(function (live) { return kit.withoutWorkspace(live, id) })
         })
       }
@@ -1963,7 +2230,7 @@
       }
       /** @param choice - a group menu id. @param section - the group section. */
       function runGroupChoice(choice, section) {
-        if (choice === 'newProject') return newProject()
+        if (choice === 'newProject') return newProject(section)
         if (choice === 'rename') return openEditor('group', sbText(section && section.key), section && section.title)
         if (choice.indexOf('color:') === 0) return markSection(section, choice.slice(6))
         if (choice === 'sort') return setSectionSort(section, section && section.sort === 'recent' ? 'manual' : 'recent')
@@ -2293,8 +2560,12 @@
           head.push(h('span', { className: 'ph-sb-actions', key: 'actions' }, [
             sbIconButton('plus', sbT('sidebar.list.newProject'), function (event) {
               if (event && event.stopPropagation) event.stopPropagation()
-              newProject()
-            }, { key: 'new', sb: 'newProject', disabled: !sbHas('uiWorkspace', 'pickDirectory') }),
+              newProject(section)
+            }, {
+              key: 'new',
+              sb: 'newProject',
+              disabled: !sbHas('uiWorkspace', 'pickDirectory') && !sbHas('uiWorkspace', 'listDirectory'),
+            }),
             sbMenu('group:' + key, open, anchor, entries, function (choice) { runGroupChoice(choice, section) }, closeMenu),
           ]))
         }
@@ -2501,11 +2772,15 @@
           cancelEditor,
         )
       }
-      if (picking) {
+      if (picking !== null) {
         layer = h(SidebarDirectoryDialog, {
           key: 'picker',
-          onCancel: function () { setPicking(false) },
-          onPicked: function () { setPicking(false) },
+          onCancel: function () { setPicking(null) },
+          onPicked: function (workspace) {
+            var home = picking
+            setPicking(null)
+            attempt(function () { return fileNewWorkspace(workspace, home) })
+          },
         })
       }
       if (confirming) {

package/lib/client.js

@@ -3284,10 +3284,10 @@ var GRAIN = 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org
       // The region's own directory browser (the shell's `Modal` draws the card
       // when the kit is there; these are the rows both draw).
       '.ph-sb-dir{display:flex;flex-direction:column;gap:6px;min-height:180px;max-height:46vh}',
-      '.ph-sb-dir-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;min-height:22px}',
+      '.ph-sb-dir-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;min-height:22px;flex:none}',
       // The trail turns into a path field: the shipped browser lets a reader
       // type an absolute path instead of walking to it.
-      '.ph-sb-dir-path{display:flex;align-items:center;gap:6px;min-height:22px}',
+      '.ph-sb-dir-path{display:flex;align-items:center;gap:6px;min-height:22px;flex:none}',
       '.ph-sb-dir-path-field{flex:1 1 auto;width:auto}',
       '.ph-sb-dir-edit{margin-left:auto}',
       '.ph-sb-dir-seat{display:inline-flex;align-items:center;gap:2px}',
@@ -3303,7 +3303,11 @@ var GRAIN = 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org
       '.ph-sb-dir-crumb:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid ' +
         'var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#3b6fe0));outline-offset:1px}',
       '.ph-sb-dir-crumb.is-current{color:var(--dsw-alias-label-primary,#e6e8ea)}',
-      '.ph-sb-dir-list{display:flex;flex-direction:column;gap:1px;min-height:0;overflow:auto}',
+      // The list is the one child that gives way when the dialog hits its
+      // height: a row of text shrunk to fit its box, which is how the target
+      // line lost its lower half. Every other child keeps its height, and the
+      // list scrolls instead.
+      '.ph-sb-dir-list{display:flex;flex-direction:column;gap:1px;min-height:0;overflow:auto;flex:1 1 auto}',
       '.ph-sb-dir-row{display:flex;align-items:center;gap:4px;width:100%;box-sizing:border-box;height:28px;padding:0 4px;' +
         'border:0;border-radius:var(--dsw-radius-sm,6px);background:transparent;cursor:pointer;text-align:left;' +
         'font-family:inherit;font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary,#e6e8ea)}',
@@ -3315,8 +3319,18 @@ var GRAIN = 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org
       '.ph-sb-dir-row.is-hidden{opacity:.62}',
       '.ph-sb-dir-icon{flex:none;display:inline-flex;opacity:.7}',
       '.ph-sb-dir-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
-      '.ph-sb-dir-note{padding:4px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#9aa4b2)}',
-      '.ph-sb-dir-newfold{display:flex;align-items:center;gap:6px}',
+      '.ph-sb-dir-note{padding:4px;font-size:12px;line-height:18px;flex:none;' +
+      'color:var(--dsw-alias-label-secondary,#9aa4b2)}',
+      // The target is a path, and the part of it that tells two folders apart is
+      // the end: it wraps rather than ellipsizing the folder away, and it never
+      // gives up height to the scrolling list below it (a clipped line is what a
+      // shrunk flex item with `overflow:hidden` looks like).
+      '.ph-sb-dir-target{flex:none;overflow-wrap:anywhere;' +
+      'color:var(--dsw-alias-label-primary,#e6e8ea)}',
+      '.ph-sb-dir-newfold{display:flex;align-items:center;gap:6px;flex:none}',
+      // The error line sits in the same column: it is the one thing the reader
+      // must be able to read, so it keeps its height like the notes above it.
+      '.ph-sb-dir .ph-sb-form-error{flex:none}',
       '.ph-sb-dir-newfold .ph-sb-field{flex:1 1 auto}',
       // The footer toggle from the shipped browser: plain text at control size,
       // no border, and the pressed state marked by a trailing check so the
@@ -4938,6 +4952,7 @@ var STYLES = [
       'sidebar.list.dirEmpty': '没有子文件夹',
       'sidebar.list.dirHiddenOnly': '没有可见的子文件夹，隐藏项已折叠',
       'sidebar.list.dirTruncated': '文件夹太多，只列出了前一部分',
+      'sidebar.list.dirTarget': '将在此创建工作区：{path}',
       'sidebar.list.dirFailed': '读不到这个目录：{reason}',
       'sidebar.list.apply': '确定',
       'sidebar.list.more': '更多',
@@ -5168,6 +5183,7 @@ var STYLES = [
       'sidebar.list.dirEmpty': 'No subfolders',
       'sidebar.list.dirHiddenOnly': 'No visible subfolders; hidden items are folded',
       'sidebar.list.dirTruncated': 'Too many folders; only the first ones are listed',
+      'sidebar.list.dirTarget': 'Creates the workspace in: {path}',
       'sidebar.list.dirFailed': 'Cannot read this folder: {reason}',
       'sidebar.list.apply': 'Apply',
       'sidebar.list.more': 'More',
@@ -5401,6 +5417,20 @@ var STYLES = [
         updatedAt: Number(row.updatedAt) || 0,
       }
     }
+    /**
+     * Read one workspace instant: the Host stamps Workspace rows with ISO-8601
+     * strings, while a projection that was already reduced can carry epoch
+     * milliseconds. Both are wanted by the list, which orders by them.
+     * @param value - an ISO-8601 instant, epoch milliseconds, or anything else.
+     * @returns epoch milliseconds, or 0 when it names no time.
+     */
+    function epochOf(value) {
+      if (typeof value === 'number') return isFinite(value) && value > 0 ? value : 0
+      var text = String(value === undefined || value === null ? '' : value)
+      if (text === '') return 0
+      var parsed = Date.parse(text)
+      return isFinite(parsed) && parsed > 0 ? parsed : 0
+    }
     /**
      * @param value - a workspace projection array.
      * @returns a clean projection array.
@@ -5415,6 +5445,10 @@ var STYLES = [
           title: String(item.title === undefined || item.title === null ? '' : item.title),
           path: String(item.path === undefined || item.path === null ? '' : item.path),
           sessions: rows.length || (Number(item.sessions) || 0),
+          // When the Workspace itself was registered. A project with no Sessions
+          // is not old — creating it is an event — so the list's recency order
+          // counts this alongside its newest Session.
+          createdAt: epochOf(item.createdAt),
           rows: rows,
         }
       }).filter(function (entry) { return entry.id !== '' })
@@ -5598,6 +5632,7 @@ var STYLES = [
           id: view.workspaceId,
           title: view.title,
           path: view.path,
+          createdAt: epochOf(view.createdAt),
           rows: rows,
         }
       })
@@ -5657,7 +5692,7 @@ var STYLES = [
       var parts = [String(current || ''), Object.keys(subagents).sort().join(',')]
       for (var i = 0; i < items.length; i += 1) {
         var item = items[i]
-        parts.push(item.id, item.title, item.path, String(item.sessions))
+        parts.push(item.id, item.title, item.path, String(item.sessions), String(item.createdAt))
         for (var j = 0; j < item.rows.length; j += 1) {
           var row = item.rows[j]
           parts.push(
@@ -10579,6 +10614,28 @@ var STYLES = [
         if (value === null || value === undefined) return ''
         return String(value)
       }
+      /**
+       * @param value - a workspace view, a workspace id, or anything else.
+       * @returns the workspace id it carries, or '' when it names none. The
+       *   client service answers `workspaceId`; a host that answers `id` is the
+       *   one other spelling this region accepts.
+       */
+      function sbWorkspaceId(value) {
+        if (typeof value === 'string') return value
+        if (!value || typeof value !== 'object') return ''
+        return sbText(value.workspaceId || value.id)
+      }
+      /**
+       * @param value - an ISO-8601 instant, epoch milliseconds, or anything else.
+       * @returns epoch milliseconds, or 0 when it names no time.
+       */
+      function sbEpoch(value) {
+        if (typeof value === 'number') return isFinite(value) && value > 0 ? value : 0
+        var text = sbText(value)
+        if (text === '') return 0
+        var parsed = Date.parse(text)
+        return isFinite(parsed) && parsed > 0 ? parsed : 0
+      }
       /** @param value - a path. @returns its last segment, both separators accepted. */
       function sbBase(value) {
         var path = sbText(value)
@@ -10685,19 +10742,22 @@ var STYLES = [
         return draw(size || 16)
       }
       /**
-       * A project's own recency: the newest session it shows. A project with no
-       * sessions stays at zero on purpose — it has nothing to be recent about, and
-       * borrowing its neighbours' time would make it outrank a project in use.
+       * A project's own recency: the newest session it shows, or when the
+       * workspace itself was created — whichever is later. A project with no
+       * sessions is not an old project: registering it is an event, so it must
+       * not sink to the bottom of a section ordered by recency the moment it is
+       * added. Borrowing a neighbour's time is still wrong, which is what the
+       * creation instant keeps from happening.
        *
        * A blank row is skipped: it is the draft the shell holds for a workspace
        * you focused, never sent, so it is not an event and cannot make a project
        * recent. All its `updatedAt` ever says is when the draft was made.
        * @param project - a projected project.
-       * @returns the newest `updatedAt` below it, or 0.
+       * @returns the newest instant the project stands for, or 0.
        */
       function sbProjectAt(project) {
+        var at = Number(project && project.createdAt) || 0
         var rows = Array.isArray(project && project.rows) ? project.rows : []
-        var at = 0
         for (var i = 0; i < rows.length; i += 1) {
           if (rows[i] && rows[i].blank === true) continue
           var value = Number(rows[i] && rows[i].updatedAt) || 0
@@ -10735,12 +10795,19 @@ var STYLES = [
        * ungrouped bucket. Members are the projects the sidebar listed plus any
        * the document still names, so a stale assignment stays visible and
        * removable instead of silently disappearing.
+       *
+       * A member the projection has not carried yet — one this region created a
+       * moment ago — is drawn from the `fresh` memory instead: without it the row
+       * has no title and no path, so it reads as the workspace id, and it is
+       * marked as a stale assignment it is not.
        * @param layout - the document, or null.
        * @param items - the projected projects.
+       * @param fresh - `{ [id]: { title, path, createdAt } }` for just-created workspaces.
        * @returns the sections, each `{ key, title, color, items, collapsed, sort }`.
        */
-      function sbSections(layout, items) {
+      function sbSections(layout, items, fresh) {
         var projects = Array.isArray(items) ? items : []
+        var memory = fresh && typeof fresh === 'object' ? fresh : null
         var groups = kit.sidebarGroups(layout).slice().sort(function (left, right) {
           var a = left && typeof left.order === 'number' ? left.order : 0
           var b = right && typeof right.order === 'number' ? right.order : 0
@@ -10772,7 +10839,16 @@ var STYLES = [
           if (known[id]) return
           var member = members[id]
           var section = member && member.group && byId[member.group] ? byId[member.group] : loose
-          section.items.push({ id: id, title: '', path: '', sessions: 0, rows: [], orphan: true })
+          var made = memory && memory[id] ? memory[id] : null
+          section.items.push({
+            id: id,
+            title: made ? sbText(made.title) : '',
+            path: made ? sbText(made.path) : '',
+            sessions: 0,
+            rows: [],
+            createdAt: made ? Number(made.createdAt) || 0 : 0,
+            orphan: !made,
+          })
         })
         var out = sections.slice()
         if (loose.items.length > 0) out.push(loose)
@@ -11399,11 +11475,25 @@ var STYLES = [
           }
         }, [])
 
-        /** Register the folder on screen as a workspace. */
-        function adopt() {
-          var listing = state.listing
-          var path = sbText(listing && listing.path)
-          if (path === '') return
+        /**
+         * The folder this dialog would register as a workspace: the path in the
+         * open field — a typed path is a target even before Enter has walked the
+         * list to it — and the level on screen when the field is closed or blank.
+         * Without the draft the two disagree: the operator types a folder, clicks
+         * the confirm, and the workspace is made in whatever level happened to be
+         * listed underneath, which reads as "it ignored what I typed".
+         * @returns an absolute path, or '' when there is nothing to name.
+         */
+        function targetPath() {
+          var draft = state.pathDraft === null ? '' : sbText(state.pathDraft).trim()
+          if (draft !== '') return draft
+          return sbText(state.listing && state.listing.path)
+        }
+        /**
+         * Register one directory as a workspace and hand it back to the caller.
+         * @param path - an absolute directory the Host has already accepted.
+         */
+        function commit(path) {
           var projects = sbService('workspaces')
           if (!projects || typeof projects.create !== 'function') {
             patch({ error: sbT('sidebar.list.readonly'), phase: 'error' })
@@ -11418,16 +11508,68 @@ var STYLES = [
             return
           }
           if (!outcome || typeof outcome.then !== 'function') {
-            onPicked()
+            onPicked(outcome)
             return
           }
-          outcome.then(function () {
-            if (alive.current) onPicked()
+          outcome.then(function (created) {
+            if (alive.current) onPicked(created)
           }, function (error) {
             if (!alive.current) return
             patch({ busy: false, phase: 'error', error: sbT('sidebar.list.failed', { reason: sbReason(error) }) })
           })
         }
+        /**
+         * The confirm action. It commits the folder it names, and a typed path is
+         * read through the Host first: the listing proves the directory exists
+         * and answers with its canonical spelling, which is what the workspace has
+         * to store (`..`, a trailing separator, a Windows forward slash).
+         */
+        function adopt() {
+          var target = targetPath()
+          if (target === '') return
+          if (state.busy) return
+          if (target === sbText(state.listing && state.listing.path)) {
+            commit(target)
+            return
+          }
+          var service = sbService('uiWorkspace')
+          if (!service || typeof service.listDirectory !== 'function') {
+            // No browsing capability behind the field: the Host still owns
+            // `create`, and it is the one that validates the path.
+            commit(target)
+            return
+          }
+          patch({ busy: true, error: '' })
+          var outcome = null
+          try {
+            outcome = service.listDirectory(target)
+          } catch (error) {
+            patch({
+              busy: false,
+              phase: 'error',
+              pathDraft: target,
+              error: sbT('sidebar.list.dirFailed', { reason: sbReason(error) }),
+            })
+            return
+          }
+          if (!outcome || typeof outcome.then !== 'function') {
+            var resolved = sbText(outcome && outcome.path) || target
+            commit(resolved)
+            return
+          }
+          outcome.then(function (listing) {
+            if (!alive.current) return
+            commit(sbText(listing && listing.path) || target)
+          }, function (error) {
+            if (!alive.current) return
+            patch({
+              busy: false,
+              phase: 'error',
+              pathDraft: target,
+              error: sbT('sidebar.list.dirFailed', { reason: sbReason(error) }),
+            })
+          })
+        }
         /** Create the folder named in the field, then open it. */
         function mint() {
           var name = sbText(state.folder).trim()
@@ -11529,8 +11671,17 @@ var STYLES = [
               patch({ pathDraft: here })
             }, { key: 'edit', sb: 'dirEditPath', size: 14, className: 'ph-sb-dir-edit' }),
           ])
+        // What the confirm action will register, said out loud under the path it
+        // reads: a field whose contents are not the folder that will be created is
+        // the trap this line exists to remove.
+        var target = targetPath()
+        var targetLine = target === ''
+          ? null
+          : h('div', { className: 'ph-sb-dir-note ph-sb-dir-target', key: 'target', 'data-sb': 'dirTarget' },
+            sbT('sidebar.list.dirTarget', { path: target }))
         var body = h('div', { className: 'ph-sb-dir', key: 'dir' }, [
           pathRow,
+          targetLine,
           state.phase === 'loading'
             ? h('div', { className: 'ph-sb-dir-note', key: 'loading' }, sbT('sidebar.list.dirLoading'))
             : null,
@@ -11596,7 +11747,9 @@ var STYLES = [
             ? h('div', { className: 'ph-sb-form-error', key: 'error', 'data-sb': 'dirError' }, state.error)
             : null,
         ])
-        var choose = sbText(listing && listing.path) !== ''
+        // A typed path is a target of its own: the confirm action stays live for
+        // it even when the level underneath could not be listed at all.
+        var choose = target !== ''
         // The same footer the shipped browser draws: the two actions that change
         // the folder on the left, the confirm/cancel pair on the right, and the
         // hidden-items toggle between them — its label never shifts, because the
@@ -11774,7 +11927,18 @@ var STYLES = [
         var store = kit.useSidebarLayout()
         var layout = store.layout || null
         var items = Array.isArray(store.workspaces) ? store.workspaces : []
-        var sections = sbSections(layout, items)
+        /**
+         * The workspaces this region created a moment ago, keyed by id, with the
+         * title, path and creation instant the Host answered with. The projection
+         * that carries the same facts is published by an effect in another React
+         * root, so for the first render after a create the document is all this
+         * region has — and a member with no title and no path draws as its
+         * workspace id, which is not the folder the reader just picked.
+         */
+        var freshPair = sbReact.useState({})
+        var fresh = freshPair[0]
+        var setFresh = freshPair[1]
+        var sections = sbSections(layout, items, fresh)
         var current = sbText(store.current)
         var ready = sbKitReady()
 
@@ -11819,9 +11983,11 @@ var STYLES = [
          * The region's own directory browser, when it is up. The Host's native
          * chooser cannot exist for a browser connected to another address, so the
          * picker that is missing its Host half falls back to this dialog instead
-         * of reporting that the control does nothing.
+         * of reporting that the control does nothing. `null` is closed and a
+         * string is the group the flow started from ('' for the plain add), so the
+         * workspace it makes lands where the reader asked for it.
          */
-        var pickingPair = sbReact.useState(false)
+        var pickingPair = sbReact.useState(null)
         var picking = pickingPair[0]
         var setPicking = pickingPair[1]
 
@@ -11838,6 +12004,23 @@ var STYLES = [
           }
         }, [])
 
+        // A workspace stops being "fresh" the moment the projection carries it:
+        // from then on the Host's own title and path are what the row reads.
+        sbReact.useEffect(function () {
+          var listed = {}
+          for (var i = 0; i < items.length; i += 1) listed[sbText(items[i] && items[i].id)] = true
+          setFresh(function (live) {
+            var kept = {}
+            var changed = false
+            for (var key in live) {
+              if (!Object.prototype.hasOwnProperty.call(live, key)) continue
+              if (listed[key]) { changed = true; continue }
+              kept[key] = live[key]
+            }
+            return changed ? kept : live
+          })
+        }, [items])
+
         /**
          * The header's narrow shape, as the stylesheet drew it. Both shapes are in
          * the tree and the container query hides one of them, so this is the only
@@ -11876,12 +12059,12 @@ var STYLES = [
         // this is the region's own card's way out; closing twice is the same as
         // closing once, and a dialog with no way out is the defect being fixed.
         sbReact.useEffect(function () {
-          if (!editor && !picking && !confirming) return undefined
+          if (!editor && picking === null && !confirming) return undefined
           if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return undefined
           function onKey(event) {
             if (!event || event.key !== 'Escape') return
             setEditor(null)
-            setPicking(false)
+            setPicking(null)
             setConfirming(null)
           }
           document.addEventListener('keydown', onKey)
@@ -11992,21 +12175,120 @@ var STYLES = [
           if (!projects) return null
           return projects.create({ path: path })
         }
-        /** @param picked - whatever the Host's picker resolved. */
-        function adoptPicked(picked) {
-          if (picked && typeof picked === 'object' && sbText(picked.id) !== '') return picked
+        /**
+         * What this region knows about a workspace the Host just answered with,
+         * in the shape the list draws a member it has no projection for: the id
+         * it files, the name and path the row needs, and when it was created.
+         * @param workspace - a WorkspaceView from `workspaces.create`, or an id.
+         * @returns `{ id, title, path, createdAt }`, or null when there is no id.
+         */
+        function freshOf(workspace) {
+          var id = sbWorkspaceId(workspace)
+          if (id === '') return null
+          var view = workspace && typeof workspace === 'object' ? workspace : {}
+          var path = sbText(view.path)
+          return {
+            id: id,
+            // The Host titles a Workspace after its folder; a workspace it did
+            // not title still has the folder to fall back to, and the id is the
+            // one thing this row must never be named after.
+            title: sbText(view.title).trim() || sbBase(path),
+            path: path,
+            createdAt: sbEpoch(view.createdAt) || Date.now(),
+          }
+        }
+        /** @param entry - one `freshOf` record, remembered until the projection carries it. */
+        function rememberFresh(entry) {
+          setFresh(function (live) {
+            var next = {}
+            for (var key in live) {
+              if (Object.prototype.hasOwnProperty.call(live, key)) next[key] = live[key]
+            }
+            next[entry.id] = entry
+            return next
+          })
+        }
+        /** @param workspaceId - the workspace whose remembered name is no longer wanted. */
+        function forgetFresh(workspaceId) {
+          var id = sbText(workspaceId)
+          if (id === '') return
+          setFresh(function (live) {
+            if (!Object.prototype.hasOwnProperty.call(live, id)) return live
+            var next = {}
+            for (var key in live) {
+              if (Object.prototype.hasOwnProperty.call(live, key) && key !== id) next[key] = live[key]
+            }
+            return next
+          })
+        }
+        /**
+         * File a workspace the reader just added into the group whose own control
+         * started the flow, and unfold that group so the new row is on screen.
+         * A project added from "实验室" that surfaces in the ungrouped bucket reads
+         * as "it did not land in the category at all", which is the report this
+         * answers.
+         *
+         * The member record is written even when there is no group: it is what
+         * puts the row in the list at once instead of waiting for the Host's
+         * projection, and the remembered name is what keeps that row from
+         * appearing as its workspace id for the first render.
+         * @param workspace - the workspace the Host answered with, or its id.
+         * @param groupKey - the group the flow started from; '' for the plain add.
+         * @returns the save promise, or null when there is nothing to file.
+         */
+        function fileNewWorkspace(workspace, groupKey) {
+          var entry = freshOf(workspace)
+          if (!entry) return null
+          rememberFresh(entry)
+          var key = sbText(groupKey)
+          return kit.mutateSidebarLayout(function (live) {
+            var next = kit.withWorkspace(live, entry.id, { group: key === '' ? null : key })
+            if (key === '') return next
+            var groups = kit.sidebarGroups(next)
+            for (var i = 0; i < groups.length; i += 1) {
+              var group = groups[i]
+              if (group && sbText(group.id) === key && group.collapsed === true) {
+                return kit.withGroupPatch(next, key, { collapsed: false })
+              }
+            }
+            return next
+          })
+        }
+        /**
+         * Take whatever the Host's chooser resolved and register it, filing it
+         * into the group the flow started from.
+         * @param picked - the path the Host resolved, or a workspace it already made.
+         * @param groupKey - the group the flow started from; '' for the plain add.
+         * @returns the created workspace (or its save), or null.
+         */
+        function adoptPicked(picked, groupKey) {
+          var home = sbText(groupKey)
+          // A workspace the Host already made, as opposed to a path it resolved:
+          // a path is a string, and a workspace is the view that carries its id.
+          if (picked && typeof picked === 'object' && sbWorkspaceId(picked) !== '') {
+            return fileNewWorkspace(picked, home)
+          }
           var path = pickedPath(picked)
           if (path === '') return null
-          return createWorkspace(path)
+          var created = createWorkspace(path)
+          if (!created || typeof created.then !== 'function') {
+            return fileNewWorkspace(created, home)
+          }
+          return created.then(function (workspace) {
+            return fileNewWorkspace(workspace, home)
+          })
         }
-        /** Put the region's own directory browser up. */
-        function openDirectoryPicker() {
+        /**
+         * Put the region's own directory browser up.
+         * @param groupKey - the group the flow started from; '' for the plain add.
+         */
+        function openDirectoryPicker(groupKey) {
           if (!mountedRef.current) return
           setActionError('')
           setMenu(null)
           setEditor(null)
           setConfirming(null)
-          setPicking(true)
+          setPicking(sbText(groupKey))
         }
         /**
          * Add a project. The Host's chooser is asked first: on a local connection
@@ -12016,21 +12298,36 @@ var STYLES = [
          * then opens its own browser (see `SidebarDirectoryDialog`), which lists
          * directories through the Host the way the shipped sidebar does, instead
          * of leaving the control dead.
+         * @param section - the group whose control started the flow, or null.
          */
-        function newProject() {
+        function newProject(section) {
+          var home = sbText(section && section.key)
           act(function () {
-            var service = need('uiWorkspace', 'pickDirectory')
-            if (!service) return null
+            var service = sbService('uiWorkspace')
+            var picks = service && typeof service.pickDirectory === 'function'
+            var browses = service && typeof service.listDirectory === 'function'
+            if (!picks && !browses) {
+              setActionError(sbT('sidebar.list.readonly'))
+              return null
+            }
+            // A Host with listing but no chooser is exactly the remote case; the
+            // region's own browser is the only interaction it can offer.
+            if (!picks) {
+              openDirectoryPicker(home)
+              return null
+            }
             var outcome = null
             try {
               outcome = service.pickDirectory()
             } catch (error) {
-              openDirectoryPicker()
+              openDirectoryPicker(home)
               return null
             }
-            if (!outcome || typeof outcome.then !== 'function') return adoptPicked(outcome)
-            return outcome.then(adoptPicked, function () {
-              openDirectoryPicker()
+            if (!outcome || typeof outcome.then !== 'function') return adoptPicked(outcome, home)
+            return outcome.then(function (picked) {
+              return adoptPicked(picked, home)
+            }, function () {
+              openDirectoryPicker(home)
               return null
             })
           })
@@ -12064,15 +12361,20 @@ var STYLES = [
         }
         /** @param project - the project to unregister. */
         function removeProject(project) {
+          var id = sbText(project && project.id)
           act(function () {
             var service = need('workspaces', 'delete')
             if (!service) return null
-            return service.delete(sbText(project && project.id))
+            // Its remembered name goes with it: the row it belongs to is about to
+            // stop existing, and a later workspace never reuses the id.
+            forgetFresh(id)
+            return service.delete(id)
           })
         }
         /** @param id - a workspace the document still names but the sidebar dropped. */
         function forgetProject(id) {
           act(function () {
+            forgetFresh(id)
             return kit.mutateSidebarLayout(function (live) { return kit.withoutWorkspace(live, id) })
           })
         }
@@ -12425,7 +12727,7 @@ var STYLES = [
         }
         /** @param choice - a group menu id. @param section - the group section. */
         function runGroupChoice(choice, section) {
-          if (choice === 'newProject') return newProject()
+          if (choice === 'newProject') return newProject(section)
           if (choice === 'rename') return openEditor('group', sbText(section && section.key), section && section.title)
           if (choice.indexOf('color:') === 0) return markSection(section, choice.slice(6))
           if (choice === 'sort') return setSectionSort(section, section && section.sort === 'recent' ? 'manual' : 'recent')
@@ -12755,8 +13057,12 @@ var STYLES = [
             head.push(h('span', { className: 'ph-sb-actions', key: 'actions' }, [
               sbIconButton('plus', sbT('sidebar.list.newProject'), function (event) {
                 if (event && event.stopPropagation) event.stopPropagation()
-                newProject()
-              }, { key: 'new', sb: 'newProject', disabled: !sbHas('uiWorkspace', 'pickDirectory') }),
+                newProject(section)
+              }, {
+                key: 'new',
+                sb: 'newProject',
+                disabled: !sbHas('uiWorkspace', 'pickDirectory') && !sbHas('uiWorkspace', 'listDirectory'),
+              }),
               sbMenu('group:' + key, open, anchor, entries, function (choice) { runGroupChoice(choice, section) }, closeMenu),
             ]))
           }
@@ -12963,11 +13269,15 @@ var STYLES = [
             cancelEditor,
           )
         }
-        if (picking) {
+        if (picking !== null) {
           layer = h(SidebarDirectoryDialog, {
             key: 'picker',
-            onCancel: function () { setPicking(false) },
-            onPicked: function () { setPicking(false) },
+            onCancel: function () { setPicking(null) },
+            onPicked: function (workspace) {
+              var home = picking
+              setPicking(null)
+              attempt(function () { return fileNewWorkspace(workspace, home) })
+            },
           })
         }
         if (confirming) {

package/lib/framework.part.js

@@ -3272,10 +3272,10 @@ var GRAIN = 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org
       // The region's own directory browser (the shell's `Modal` draws the card
       // when the kit is there; these are the rows both draw).
       '.ph-sb-dir{display:flex;flex-direction:column;gap:6px;min-height:180px;max-height:46vh}',
-      '.ph-sb-dir-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;min-height:22px}',
+      '.ph-sb-dir-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;min-height:22px;flex:none}',
       // The trail turns into a path field: the shipped browser lets a reader
       // type an absolute path instead of walking to it.
-      '.ph-sb-dir-path{display:flex;align-items:center;gap:6px;min-height:22px}',
+      '.ph-sb-dir-path{display:flex;align-items:center;gap:6px;min-height:22px;flex:none}',
       '.ph-sb-dir-path-field{flex:1 1 auto;width:auto}',
       '.ph-sb-dir-edit{margin-left:auto}',
       '.ph-sb-dir-seat{display:inline-flex;align-items:center;gap:2px}',
@@ -3291,7 +3291,11 @@ var GRAIN = 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org
       '.ph-sb-dir-crumb:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid ' +
         'var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#3b6fe0));outline-offset:1px}',
       '.ph-sb-dir-crumb.is-current{color:var(--dsw-alias-label-primary,#e6e8ea)}',
-      '.ph-sb-dir-list{display:flex;flex-direction:column;gap:1px;min-height:0;overflow:auto}',
+      // The list is the one child that gives way when the dialog hits its
+      // height: a row of text shrunk to fit its box, which is how the target
+      // line lost its lower half. Every other child keeps its height, and the
+      // list scrolls instead.
+      '.ph-sb-dir-list{display:flex;flex-direction:column;gap:1px;min-height:0;overflow:auto;flex:1 1 auto}',
       '.ph-sb-dir-row{display:flex;align-items:center;gap:4px;width:100%;box-sizing:border-box;height:28px;padding:0 4px;' +
         'border:0;border-radius:var(--dsw-radius-sm,6px);background:transparent;cursor:pointer;text-align:left;' +
         'font-family:inherit;font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary,#e6e8ea)}',
@@ -3303,8 +3307,18 @@ var GRAIN = 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org
       '.ph-sb-dir-row.is-hidden{opacity:.62}',
       '.ph-sb-dir-icon{flex:none;display:inline-flex;opacity:.7}',
       '.ph-sb-dir-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
-      '.ph-sb-dir-note{padding:4px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#9aa4b2)}',
-      '.ph-sb-dir-newfold{display:flex;align-items:center;gap:6px}',
+      '.ph-sb-dir-note{padding:4px;font-size:12px;line-height:18px;flex:none;' +
+      'color:var(--dsw-alias-label-secondary,#9aa4b2)}',
+      // The target is a path, and the part of it that tells two folders apart is
+      // the end: it wraps rather than ellipsizing the folder away, and it never
+      // gives up height to the scrolling list below it (a clipped line is what a
+      // shrunk flex item with `overflow:hidden` looks like).
+      '.ph-sb-dir-target{flex:none;overflow-wrap:anywhere;' +
+      'color:var(--dsw-alias-label-primary,#e6e8ea)}',
+      '.ph-sb-dir-newfold{display:flex;align-items:center;gap:6px;flex:none}',
+      // The error line sits in the same column: it is the one thing the reader
+      // must be able to read, so it keeps its height like the notes above it.
+      '.ph-sb-dir .ph-sb-form-error{flex:none}',
       '.ph-sb-dir-newfold .ph-sb-field{flex:1 1 auto}',
       // The footer toggle from the shipped browser: plain text at control size,
       // no border, and the pressed state marked by a trailing check so the
@@ -4926,6 +4940,7 @@ var STYLES = [
       'sidebar.list.dirEmpty': '没有子文件夹',
       'sidebar.list.dirHiddenOnly': '没有可见的子文件夹，隐藏项已折叠',
       'sidebar.list.dirTruncated': '文件夹太多，只列出了前一部分',
+      'sidebar.list.dirTarget': '将在此创建工作区：{path}',
       'sidebar.list.dirFailed': '读不到这个目录：{reason}',
       'sidebar.list.apply': '确定',
       'sidebar.list.more': '更多',
@@ -5156,6 +5171,7 @@ var STYLES = [
       'sidebar.list.dirEmpty': 'No subfolders',
       'sidebar.list.dirHiddenOnly': 'No visible subfolders; hidden items are folded',
       'sidebar.list.dirTruncated': 'Too many folders; only the first ones are listed',
+      'sidebar.list.dirTarget': 'Creates the workspace in: {path}',
       'sidebar.list.dirFailed': 'Cannot read this folder: {reason}',
       'sidebar.list.apply': 'Apply',
       'sidebar.list.more': 'More',
@@ -5389,6 +5405,20 @@ var STYLES = [
         updatedAt: Number(row.updatedAt) || 0,
       }
     }
+    /**
+     * Read one workspace instant: the Host stamps Workspace rows with ISO-8601
+     * strings, while a projection that was already reduced can carry epoch
+     * milliseconds. Both are wanted by the list, which orders by them.
+     * @param value - an ISO-8601 instant, epoch milliseconds, or anything else.
+     * @returns epoch milliseconds, or 0 when it names no time.
+     */
+    function epochOf(value) {
+      if (typeof value === 'number') return isFinite(value) && value > 0 ? value : 0
+      var text = String(value === undefined || value === null ? '' : value)
+      if (text === '') return 0
+      var parsed = Date.parse(text)
+      return isFinite(parsed) && parsed > 0 ? parsed : 0
+    }
     /**
      * @param value - a workspace projection array.
      * @returns a clean projection array.
@@ -5403,6 +5433,10 @@ var STYLES = [
           title: String(item.title === undefined || item.title === null ? '' : item.title),
           path: String(item.path === undefined || item.path === null ? '' : item.path),
           sessions: rows.length || (Number(item.sessions) || 0),
+          // When the Workspace itself was registered. A project with no Sessions
+          // is not old — creating it is an event — so the list's recency order
+          // counts this alongside its newest Session.
+          createdAt: epochOf(item.createdAt),
           rows: rows,
         }
       }).filter(function (entry) { return entry.id !== '' })
@@ -5586,6 +5620,7 @@ var STYLES = [
           id: view.workspaceId,
           title: view.title,
           path: view.path,
+          createdAt: epochOf(view.createdAt),
           rows: rows,
         }
       })
@@ -5645,7 +5680,7 @@ var STYLES = [
       var parts = [String(current || ''), Object.keys(subagents).sort().join(',')]
       for (var i = 0; i < items.length; i += 1) {
         var item = items[i]
-        parts.push(item.id, item.title, item.path, String(item.sessions))
+        parts.push(item.id, item.title, item.path, String(item.sessions), String(item.createdAt))
         for (var j = 0; j < item.rows.length; j += 1) {
           var row = item.rows[j]
           parts.push(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-homepage",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "DeepSeek Harness plugin: a personal home page in the sidebar for a DSH instance. Review a plugin before installing it, and read sessions, projects, tool usage, device, storage, DSH cores, Skills and cost from one composable, registrable card wall.",
   "keywords": [
     "dsh-plugin",