@bvdm/delano 0.2.6 → 0.2.8

package/.delano/viewer/public/app.jsx

@@ -16,6 +16,8 @@ const I = {
   block:     <><circle cx="12" cy="12" r="8.5"/><path d="M6 6l12 12"/></>,
   trend:     <><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></>,
   check:     <><rect x="3.5" y="3.5" width="17" height="17" rx="2"/><path d="M8 12.5l3 3 5-6"/></>,
+  checkMark:  <path d="M5 12.5l4 4 10-11"/>,
+  copy:       <><rect x="8" y="4" width="11" height="14" rx="1.5"/><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2"/></>,
   warn:      <><path d="M12 3.5 21 19H3z"/><path d="M12 10v4.5"/><circle cx="12" cy="17" r="0.6" fill="currentColor"/></>,
   doc:       <><path d="M6 3.5h8l4 4V20.5H6z"/><path d="M14 3.5V8h4"/></>,
   plan:      <><path d="M4 5.5h16"/><path d="M4 12h16"/><path d="M4 18.5h10"/></>,
@@ -81,6 +83,72 @@ const escapeHtml = (s) =>
 const titleCase = (s) =>
   String(s || "").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 
+const normalizeCopyValue = (value) => {
+  if (value == null) return "";
+  if (Array.isArray(value)) return value.map((item) => String(item).trim()).filter(Boolean).join(", ");
+  if (typeof value === "boolean" || typeof value === "number") return String(value);
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value).trim();
+};
+
+const isCopyableMetaKey = (key) => {
+  const normalized = String(key || "").toLowerCase();
+  return (
+    normalized === "id" ||
+    normalized === "slug" ||
+    normalized === "workstream" ||
+    normalized === "depends_on" ||
+    normalized === "conflicts_with" ||
+    /(?:^|_)(?:id|ids)$/.test(normalized)
+  );
+};
+
+const copyLabelFromMetaKey = (key, role) => {
+  const normalized = String(key || "").toLowerCase();
+  if (normalized === "id" && role) return `${titleCase(role)} ID`;
+  if (normalized === "workstream") return "workstream ID";
+  if (normalized === "depends_on") return "dependency IDs";
+  if (normalized === "conflicts_with") return "conflict IDs";
+  return normalized.replace(/_/g, " ") || "value";
+};
+
+async function copyTextToClipboard(text) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch (_) {
+      /* fall through */
+    }
+  }
+
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+  textArea.setAttribute("readonly", "");
+  textArea.style.position = "fixed";
+  textArea.style.top = "-1000px";
+  textArea.style.opacity = "0";
+  document.body.appendChild(textArea);
+  textArea.select();
+  let ok = false;
+  try {
+    ok = document.execCommand("copy");
+  } catch (_) {
+    ok = false;
+  }
+  document.body.removeChild(textArea);
+  return ok;
+}
+
+function announceCopy(label) {
+  const live = document.getElementById("copy-live");
+  if (!live) return;
+  live.textContent = "";
+  window.setTimeout(() => {
+    live.textContent = `Copied ${label || "value"}`;
+  }, 10);
+}
+
 const formatShortDateTime = (value) => {
   if (!value) return "";
   const date = new Date(value);
@@ -527,10 +595,48 @@ const Pagination = ({ page, totalPages, onPageChange }) => {
 /* ================================================================
    Reusable components
    ================================================================ */
-const Field = ({ label, children, mono }) => (
+const CopyButton = ({ value, label = "value", className = "" }) => {
+  const [copied, setCopied] = useState(false);
+  const text = normalizeCopyValue(value);
+
+  useEffect(() => {
+    if (!copied) return undefined;
+    const timeout = window.setTimeout(() => setCopied(false), 1200);
+    return () => window.clearTimeout(timeout);
+  }, [copied]);
+
+  if (!text) return null;
+
+  const stateLabel = copied ? `Copied ${label}` : `Copy ${label}`;
+  const handleClick = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const ok = await copyTextToClipboard(text);
+    if (!ok) return;
+    setCopied(true);
+    announceCopy(label);
+  };
+
+  return (
+    <button
+      className={`copy-btn${copied ? " is-copied" : ""}${className ? ` ${className}` : ""}`}
+      type="button"
+      onClick={handleClick}
+      aria-label={stateLabel}
+      title={stateLabel}
+    >
+      <Icon d={copied ? I.checkMark : I.copy} size={13} />
+    </button>
+  );
+};
+
+const Field = ({ label, children, mono, copyValue, copyLabel }) => (
   <div className="field">
     <div className="field-label">{label}</div>
-    <div className={"field-value" + (mono ? " mono" : "")}>{children}</div>
+    <div className={"field-value" + (mono ? " mono" : "")}>
+      {children}
+      <CopyButton value={copyValue} label={copyLabel || label} />
+    </div>
   </div>
 );
 
@@ -986,7 +1092,10 @@ function Overview({ index, project, docs, scrollTarget, onOpenWorkstream, onOpen
       </div>
 
       <section className="summary overview-summary">
-        <Field label="Project">{project.title}</Field>
+        <Field label="Project" copyValue={project.slug} copyLabel="project ID">
+          <span>{project.title}</span>
+          <span className="field-id mono">{project.slug}</span>
+        </Field>
         <Field label="Status"><StatusChip>{project.status || "Planned"}</StatusChip></Field>
         <Field label="Health">
           <span className="health">
@@ -1116,11 +1225,29 @@ function Overview({ index, project, docs, scrollTarget, onOpenWorkstream, onOpen
    Workspace Pages
    ================================================================ */
 function WorkspacePage({ index, view, page, onPageChange, onOpenProject, onOpenProjectDoc, onOpenProjectWorkstream }) {
+  const [projectFilter, setProjectFilter] = useState("all");
   const workspace = useMemo(() => getWorkspaceModel(index), [index]);
   const projectStats = useMemo(
     () => (index.projects || []).filter((p) => p.outline).map((project) => getProjectStats(index, project)),
     [index]
   );
+  const projectFilterCounts = useMemo(() => {
+    const active = projectStats.filter((stat) => statusLabel(stat.project.status) !== "Complete").length;
+    return {
+      all: projectStats.length,
+      active,
+      complete: projectStats.length - active,
+    };
+  }, [projectStats]);
+  const filteredProjectStats = useMemo(() => {
+    if (projectFilter === "active") {
+      return projectStats.filter((stat) => statusLabel(stat.project.status) !== "Complete");
+    }
+    if (projectFilter === "complete") {
+      return projectStats.filter((stat) => statusLabel(stat.project.status) === "Complete");
+    }
+    return projectStats;
+  }, [projectFilter, projectStats]);
   const currentPage = page || 1;
 
   const titleMap = {
@@ -1133,7 +1260,7 @@ function WorkspacePage({ index, view, page, onPageChange, onOpenProject, onOpenP
   };
   const title = titleMap[view] || "Workspace";
   const itemsForView =
-    view === "workspace-projects" ? projectStats :
+    view === "workspace-projects" ? filteredProjectStats :
     view === "workspace-current" ? workspace.current :
     view === "workspace-blockers" ? workspace.blockers :
     view === "workspace-validation" ? workspace.validation :
@@ -1166,10 +1293,31 @@ function WorkspacePage({ index, view, page, onPageChange, onOpenProject, onOpenP
     <Pagination page={pagination.safePage} totalPages={pagination.totalPages} onPageChange={onPageChange} />
   );
 
+  const projectFilterControl = view === "workspace-projects" ? (
+    <div className="project-filter" aria-label="Project status filter">
+      {[
+        ["all", "All"],
+        ["active", "Active"],
+        ["complete", "Complete"],
+      ].map(([value, label]) => (
+        <button
+          className={"project-filter-option" + (projectFilter === value ? " is-active" : "")}
+          type="button"
+          onClick={() => setProjectFilter(value)}
+          aria-pressed={projectFilter === value}
+          key={value}
+        >
+          <span>{label}</span>
+          <span className="mono">{projectFilterCounts[value]}</span>
+        </button>
+      ))}
+    </div>
+  ) : null;
+
   const renderProjects = () =>
-    projectStats.length > 0 ? (
+    filteredProjectStats.length > 0 ? (
       <div className="project-grid">
-        {projectStats.map((stat) => (
+        {filteredProjectStats.map((stat) => (
           <button className="project-card" key={stat.project.slug} type="button" onClick={() => onOpenProject(stat.project.slug)}>
             <span className="project-card-head">
               <span className="project-card-title">{stat.project.title}</span>
@@ -1189,7 +1337,7 @@ function WorkspacePage({ index, view, page, onPageChange, onOpenProject, onOpenP
         ))}
       </div>
     ) : (
-      <div className="empty-state">No projects found.</div>
+      <div className="empty-state">No projects match this filter.</div>
     );
 
   const renderTaskRows = (items, emptyText, kind) => {
@@ -1311,7 +1459,7 @@ function WorkspacePage({ index, view, page, onPageChange, onOpenProject, onOpenP
   };
 
   const count =
-    view === "workspace-projects" ? workspace.counts.projects :
+    view === "workspace-projects" ? filteredProjectStats.length :
     view === "workspace-current" ? workspace.counts.current :
     view === "workspace-blockers" ? workspace.counts.blockers :
     view === "workspace-validation" ? workspace.counts.validation :
@@ -1321,9 +1469,8 @@ function WorkspacePage({ index, view, page, onPageChange, onOpenProject, onOpenP
 
   return (
     <div className="page">
-      <h1 className="page-title">{title}</h1>
       <section className="block">
-        <SectionHeader title={title} count={count} />
+        <SectionHeader title={title} count={count} right={projectFilterControl} />
         {renderBody()}
       </section>
     </div>
@@ -1735,6 +1882,7 @@ function WorkstreamDetail({ index, project, wsPath, onBack, onOpenDoc }) {
             <ul className="checklist">
               {tasks.map((t, i) => {
                 const done = statusLabel(t.status) === "Complete";
+                const taskId = t.taskId || t.path.split("/").pop()?.replace(/\.md$/, "");
                 return (
                   <li key={i} className={done ? "done" : ""}>
                     <span className="cb">
@@ -1745,7 +1893,10 @@ function WorkstreamDetail({ index, project, wsPath, onBack, onOpenDoc }) {
                     </LinkButton>
                     <span className="checklist-meta">
                       <StatusChip>{t.status || "Planned"}</StatusChip>
-                      <span className="mono">{t.taskId || t.path.split("/").pop()?.replace(/\.md$/, "")}</span>
+                      <span className="task-id-copy mono">
+                        <span>{taskId}</span>
+                        <CopyButton value={taskId} label="task ID" />
+                      </span>
                     </span>
                   </li>
                 );
@@ -1784,12 +1935,22 @@ function WorkstreamDetail({ index, project, wsPath, onBack, onOpenDoc }) {
                   <dd>{owner}</dd>
                 </>
               )}
-              <dt>Source path</dt>
-              <dd className="mono small">{wsPath}</dd>
+              <dt>
+                <span>Source path</span>
+                <CopyButton value={wsPath} label="source path" />
+              </dt>
+              <dd className="mono small">
+                <span className="copy-value">{wsPath}</span>
+              </dd>
               {wsOutline?.id && (
                 <>
-                  <dt>ID</dt>
-                  <dd className="mono">{wsOutline.id}</dd>
+                  <dt>
+                    <span>ID</span>
+                    <CopyButton value={wsOutline.id} label="workstream ID" />
+                  </dt>
+                  <dd className="mono">
+                    <span>{wsOutline.id}</span>
+                  </dd>
                 </>
               )}
             </dl>
@@ -1938,8 +2099,13 @@ function DocumentReader({ doc, project, index, onBack, onOpenAction, onOpenDoc,
         <div className="doc-meta-panel" aria-label="Document metadata">
           <div className="doc-meta-title">Metadata</div>
           <dl className="dl doc-meta-list">
-            <dt>Path</dt>
-            <dd className="mono">{doc.path}</dd>
+            <dt>
+              <span>Path</span>
+              <CopyButton value={doc.path} label="source path" />
+            </dt>
+            <dd className="mono">
+              <span className="copy-value">{doc.path}</span>
+            </dd>
             {doc.status && (
               <>
                 <dt>Status</dt>
@@ -1948,12 +2114,22 @@ function DocumentReader({ doc, project, index, onBack, onOpenAction, onOpenDoc,
             )}
             <dt>Updated</dt>
             <dd>{fmtDate(doc.updated)}</dd>
-            {props.map(([k, v]) => (
-              <React.Fragment key={k}>
-                <dt>{k}</dt>
-                <dd>{renderMetaValue(k, v)}</dd>
-              </React.Fragment>
-            ))}
+            {props.map(([k, v]) => {
+              const copyable = isCopyableMetaKey(k);
+              return (
+                <React.Fragment key={k}>
+                  <dt>
+                    <span>{k}</span>
+                    {copyable && (
+                      <CopyButton value={v} label={copyLabelFromMetaKey(k, doc.role)} />
+                    )}
+                  </dt>
+                  <dd>
+                    {renderMetaValue(k, v)}
+                  </dd>
+                </React.Fragment>
+              );
+            })}
           </dl>
         </div>
       </aside>
@@ -2305,6 +2481,7 @@ function App() {
         <div className="content content-reader-head-c">{mainContent}</div>
 
       </div>
+      <div id="copy-live" className="sr-only" aria-live="polite" aria-atomic="true"></div>
     </div>
   );
 }

package/.delano/viewer/public/styles.css

@@ -47,6 +47,17 @@ body {
 button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
 .mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.01em; }
 .small { font-size: 12px; }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 
 /* ---------- App shell ---------- */
 .app {
@@ -234,6 +245,31 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   background: var(--ink); color: var(--bg); border-color: var(--ink);
 }
 .btn-primary:hover { background: oklch(0.13 0.008 80); color: var(--bg); }
+.copy-btn {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  color: var(--ink-40);
+  text-decoration: none;
+  transition: background 90ms, border-color 90ms, color 90ms;
+}
+.copy-btn:hover,
+.copy-btn:focus-visible {
+  background: var(--line-soft);
+  border-color: var(--line);
+  color: var(--ink);
+  outline: none;
+}
+.copy-btn.is-copied {
+  background: var(--ok-soft);
+  border-color: color-mix(in oklch, var(--ok) 30%, var(--line));
+  color: var(--ok);
+}
+.copy-btn svg { pointer-events: none; }
 
 /* ---------- Page ---------- */
 .content { padding: 36px 48px 64px; max-width: 1320px; width: 100%; align-self: center; }
@@ -453,7 +489,7 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
 .summary-tight > .field:first-child { padding-left: 0; }
 .doc-reader-page {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
   gap: 44px;
   align-items: start;
 }
@@ -470,7 +506,7 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   margin-bottom: 6px;
 }
 .content-reader-head-c .doc-reader-main .page-title {
-  max-width: 17ch;
+  max-width: 100%;
 }
 .doc-meta-panel {
   position: sticky;
@@ -481,7 +517,7 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   overflow: hidden;
 }
 .doc-side {
-  min-width: 0;
+  min-width: 400px;
   position: sticky;
   top: 86px;
   display: flex;
@@ -505,6 +541,10 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
 .doc-meta-list dd {
   overflow-wrap: anywhere;
 }
+.copy-value {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 
 .field-label {
   font-size: 11px;
@@ -515,6 +555,7 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   margin-bottom: 6px;
 }
 .field-value { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.field-id { color: var(--ink-50); }
 
 /* health */
 .health { display: flex; align-items: center; gap: 10px; }
@@ -600,6 +641,40 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
 }
 
 /* ---------- Workspace dashboard ---------- */
+.project-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+}
+.project-filter-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 26px;
+  padding: 4px 8px;
+  border-radius: 3px;
+  color: var(--ink-50);
+  font-size: 12.5px;
+  line-height: 1;
+  transition: background 90ms, color 90ms;
+}
+.project-filter-option:hover {
+  background: var(--line-soft);
+  color: var(--ink);
+}
+.project-filter-option.is-active {
+  background: var(--ink);
+  color: var(--bg);
+}
+.project-filter-option .mono {
+  font-size: 11px;
+  color: currentColor;
+  opacity: 0.72;
+}
 .project-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
@@ -867,6 +942,12 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   flex: none;
   color: var(--ink-50);
 }
+.task-id-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ink-50);
+}
 
 .decisions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
 .decisions li {
@@ -938,26 +1019,42 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
 
 .dl {
   margin: 0; padding: 8px 0;
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
 }
 .dl dt {
-  padding: 8px 14px;
+  width: 100%;
+  padding: 8px 14px 0;
   font-size: 12px;
   color: var(--ink-50);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.dl dt > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .dl dd {
   margin: 0;
-  padding: 8px 14px;
+  padding: 4px 14px 8px;
   font-size: 13px;
   color: var(--ink);
   display: flex; align-items: center;
   gap: 6px;
   flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
 }
 
 .side-list { margin: 0; padding: 0; list-style: none; }
@@ -1209,6 +1306,10 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   .doc-reader-page,
   .two-col { grid-template-columns: 1fr; }
   .doc-side,
-  .col-side { position: static; }
+  .col-side {
+    min-width: 0;
+    width: 100%;
+    position: static;
+  }
   .outline-subitem { grid-template-columns: 1fr; gap: 5px; }
 }

package/README.md

@@ -15,7 +15,7 @@ The npm package is intentionally thin. It distributes the approved runtime paylo
 ## Delano CLI
 
 - Package: `@bvdm/delano`
-- Current package version: `0.2.4`
+- Current package version: `0.2.8`
 - Binary: `delano`
 - Commands: `onboarding`, `install`, `viewer`, `init`, `validate`, `status`, `next`
 - Primary goal: bootstrap a repo safely, expose local delivery state clearly, and keep runtime gates verifiable

package/assets/payload/.delano/viewer/public/styles.css

@@ -47,6 +47,17 @@ body {
 button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
 .mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.01em; }
 .small { font-size: 12px; }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 
 /* ---------- App shell ---------- */
 .app {
@@ -234,6 +245,31 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   background: var(--ink); color: var(--bg); border-color: var(--ink);
 }
 .btn-primary:hover { background: oklch(0.13 0.008 80); color: var(--bg); }
+.copy-btn {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  color: var(--ink-40);
+  text-decoration: none;
+  transition: background 90ms, border-color 90ms, color 90ms;
+}
+.copy-btn:hover,
+.copy-btn:focus-visible {
+  background: var(--line-soft);
+  border-color: var(--line);
+  color: var(--ink);
+  outline: none;
+}
+.copy-btn.is-copied {
+  background: var(--ok-soft);
+  border-color: color-mix(in oklch, var(--ok) 30%, var(--line));
+  color: var(--ok);
+}
+.copy-btn svg { pointer-events: none; }
 
 /* ---------- Page ---------- */
 .content { padding: 36px 48px 64px; max-width: 1320px; width: 100%; align-self: center; }
@@ -453,7 +489,7 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
 .summary-tight > .field:first-child { padding-left: 0; }
 .doc-reader-page {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
   gap: 44px;
   align-items: start;
 }
@@ -470,7 +506,7 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   margin-bottom: 6px;
 }
 .content-reader-head-c .doc-reader-main .page-title {
-  max-width: 17ch;
+  max-width: 100%;
 }
 .doc-meta-panel {
   position: sticky;
@@ -481,7 +517,7 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   overflow: hidden;
 }
 .doc-side {
-  min-width: 0;
+  min-width: 400px;
   position: sticky;
   top: 86px;
   display: flex;
@@ -505,6 +541,10 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
 .doc-meta-list dd {
   overflow-wrap: anywhere;
 }
+.copy-value {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 
 .field-label {
   font-size: 11px;
@@ -515,6 +555,7 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   margin-bottom: 6px;
 }
 .field-value { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.field-id { color: var(--ink-50); }
 
 /* health */
 .health { display: flex; align-items: center; gap: 10px; }
@@ -600,6 +641,40 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
 }
 
 /* ---------- Workspace dashboard ---------- */
+.project-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+}
+.project-filter-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 26px;
+  padding: 4px 8px;
+  border-radius: 3px;
+  color: var(--ink-50);
+  font-size: 12.5px;
+  line-height: 1;
+  transition: background 90ms, color 90ms;
+}
+.project-filter-option:hover {
+  background: var(--line-soft);
+  color: var(--ink);
+}
+.project-filter-option.is-active {
+  background: var(--ink);
+  color: var(--bg);
+}
+.project-filter-option .mono {
+  font-size: 11px;
+  color: currentColor;
+  opacity: 0.72;
+}
 .project-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
@@ -867,6 +942,12 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   flex: none;
   color: var(--ink-50);
 }
+.task-id-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ink-50);
+}
 
 .decisions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
 .decisions li {
@@ -938,26 +1019,42 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
 
 .dl {
   margin: 0; padding: 8px 0;
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
 }
 .dl dt {
-  padding: 8px 14px;
+  width: 100%;
+  padding: 8px 14px 0;
   font-size: 12px;
   color: var(--ink-50);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.dl dt > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .dl dd {
   margin: 0;
-  padding: 8px 14px;
+  padding: 4px 14px 8px;
   font-size: 13px;
   color: var(--ink);
   display: flex; align-items: center;
   gap: 6px;
   flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
 }
 
 .side-list { margin: 0; padding: 0; list-style: none; }
@@ -1209,6 +1306,10 @@ button { font-family: inherit; font-size: inherit; color: inherit; background: n
   .doc-reader-page,
   .two-col { grid-template-columns: 1fr; }
   .doc-side,
-  .col-side { position: static; }
+  .col-side {
+    min-width: 0;
+    width: 100%;
+    position: static;
+  }
   .outline-subitem { grid-template-columns: 1fr; gap: 5px; }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bvdm/delano",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "CLI for the Delano delivery runtime.",
   "license": "MIT",
   "repository": {

package/src/cli/lib/project-state.js

@@ -472,12 +472,56 @@ function applyTaskRollups({ project, task, action, previousStatus, timestamp, ch
     promoteWorkstreamToActive(project, workstream, timestamp, changes);
   }
 
+  if (action === "close") {
+    openDependencyReadyTasks(project, task, timestamp, changes);
+  }
+
   if (["close", "defer"].includes(action)) {
     closeWorkstreamIfDone(project, workstream, timestamp, changes);
     closeProjectIfDone(project, timestamp, changes);
   }
 }
 
+function openDependencyReadyTasks(project, completedTask, timestamp, changes) {
+  const completedTaskId = String(completedTask.frontmatter.id || "").trim();
+  if (!completedTaskId) {
+    return;
+  }
+
+  for (const candidate of project.tasks) {
+    if (candidate === completedTask || !isDependencyOnlyBlockedTask(project, candidate, completedTaskId)) {
+      continue;
+    }
+
+    setFrontmatter(candidate, "status", "ready");
+    setFrontmatter(candidate, "updated", timestamp);
+    removeFrontmatter(candidate, "blocked_owner");
+    removeFrontmatter(candidate, "blocked_check_back");
+    appendEvidence(candidate, timestamp, `Opened automatically because dependencies are done after ${completedTaskId} closed.`);
+    changes.push(`${relativeProjectPath(project, candidate.path)} status -> ready`);
+  }
+}
+
+function isDependencyOnlyBlockedTask(project, task, completedTaskId) {
+  if ((task.frontmatter.status || "") !== "blocked") {
+    return false;
+  }
+
+  const dependencies = parseInlineList(task.frontmatter.depends_on || "[]");
+  if (!dependencies.includes(completedTaskId)) {
+    return false;
+  }
+  if (!dependencies.every((dependencyId) => findTask(project, dependencyId)?.frontmatter.status === "done")) {
+    return false;
+  }
+
+  const owner = String(task.frontmatter.blocked_owner || "").trim().toLowerCase();
+  if (!owner) {
+    return true;
+  }
+  return ["dependency", "dependencies", "delano", "delano-cli", "system", "auto", "automation"].includes(owner);
+}
+
 function assertTaskWorkstreamExists(project, task, action) {
   const workstreamId = String(task.frontmatter.workstream || "").trim();
   if (!workstreamId) {