@hienlh/ppm 0.22.11 → 0.23.1

package/src/web/lib/design/open-design-tab.ts

@@ -0,0 +1,78 @@
+import { usePanelStore } from "@/stores/panel-store";
+import { currentTabMetadata, patchTabMetadata } from "@/lib/patch-tab-metadata";
+import { designTabMetadata } from "./design-tab-metadata";
+
+export interface OpenDesignTabInput {
+  projectName: string;
+  slug: string;
+  title?: string;
+  /** Open the design on this session (history, a notification) instead of its current one. */
+  sessionId?: string;
+  providerId?: string;
+  /** The panel to open in when the design is not open yet. */
+  panelId?: string;
+  /** Just created: skip looking up its latest session, it has none. */
+  fresh?: boolean;
+}
+
+/**
+ * Open (or focus) a design's tab. There is one tab per design; opening it again focuses
+ * the existing tab, and asking for a particular session switches that tab to it.
+ */
+export function openDesignTab(input: OpenDesignTabInput): string {
+  const { projectName, slug, title, sessionId, providerId, panelId, fresh } = input;
+  const id = usePanelStore.getState().openTab({
+    type: "design",
+    title: title || slug,
+    projectId: projectName,
+    closable: true,
+    metadata: designTabMetadata({ projectName, designSlug: slug, sessionId, providerId, fresh }),
+  }, panelId);
+  if (!id || !sessionId) return id;
+
+  // The tab already existed, so the panel store focused it and ignored the metadata above.
+  // Bumping the epoch remounts its chat on the requested session.
+  const current = currentTabMetadata(id);
+  if (current && current.sessionId !== sessionId) {
+    patchTabMetadata(id, {
+      sessionId,
+      ...(providerId ? { providerId, providerPending: undefined } : {}),
+      pendingMessage: undefined,
+      designChatEpoch: nextChatEpoch(current),
+    });
+  }
+  return id;
+}
+
+/** The epoch after the one `metadata` carries; the design tab keys its chat on it. */
+export function nextChatEpoch(metadata: Record<string, unknown> | undefined): number {
+  const epoch = metadata?.designChatEpoch;
+  return (typeof epoch === "number" && Number.isFinite(epoch) ? epoch : 0) + 1;
+}
+
+export interface SessionToOpen {
+  id: string;
+  providerId?: string;
+  title?: string;
+  designSlug?: string | null;
+}
+
+/**
+ * Open a session from a history list in the tab it belongs to: a design session in its
+ * design tab, anything else as a chat tab. The panel store also focuses an already-open
+ * design tab for a session opened as a chat, but only this can open one that is closed.
+ */
+export function openSessionInItsTab(session: SessionToOpen, projectName: string, panelId?: string): string {
+  if (session.designSlug) {
+    return openDesignTab({
+      projectName, slug: session.designSlug, sessionId: session.id, providerId: session.providerId, panelId,
+    });
+  }
+  return usePanelStore.getState().openTab({
+    type: "chat",
+    title: session.title || "Chat",
+    projectId: projectName,
+    metadata: { projectName, sessionId: session.id, ...(session.providerId ? { providerId: session.providerId } : {}) },
+    closable: true,
+  }, panelId);
+}

package/src/web/lib/design/pptx-slide-mapper.ts

@@ -0,0 +1,118 @@
+import type { SlideColor, SlideDoc, SlideItem, SlideTextItem } from "../../../shared/design-slide-doc";
+
+/**
+ * A measured deck ({@link SlideDoc}, CSS px) as the calls the PowerPoint writer makes, in
+ * inches and points. Pure, so the unit maths is tested without pptxgenjs in the process; the
+ * lazy `pptx-export` module only replays the plan.
+ *
+ * `px → in` is `/96` and `px → pt` is `* 0.75`, so a 1280x720 deck is exactly
+ * `LAYOUT_WIDE` (13.333 x 7.5 in). Text boxes are placed on the element's content box with
+ * no inner margin, so text starts where the browser drew it. Fonts are referenced by name;
+ * PowerPoint substitutes a face it does not have, which the warnings say.
+ */
+
+export type PptxColor = { color: string; transparency?: number };
+
+export interface PptxRunOptions {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: { style: "sng" };
+  color?: string;
+  transparency?: number;
+  fontSize?: number;
+  fontFace?: string;
+  breakLine?: boolean;
+  bullet?: boolean | { type: "number" };
+}
+
+export interface PptxBox {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  rotate?: number;
+}
+
+export type PptxOp =
+  | { kind: "text"; runs: Array<{ text: string; options: PptxRunOptions }>; options: PptxBox & {
+      align: "left" | "center" | "right" | "justify"; valign: "top" | "middle" | "bottom";
+      margin: number; lineSpacing?: number; fit: "none"; wrap: true; isTextBox: true;
+    } }
+  | { kind: "shape"; shape: "rect" | "roundRect"; options: PptxBox & {
+      fill?: PptxColor; line?: PptxColor & { width: number }; rectRadius?: number;
+    } }
+  | { kind: "image"; options: PptxBox & { data: string } };
+
+export interface PptxPlan {
+  layout: "LAYOUT_WIDE" | { name: string; width: number; height: number };
+  slides: Array<{ background?: PptxColor; ops: PptxOp[] }>;
+  warnings: string[];
+}
+
+const round = (n: number, places: number): number => Math.round(n * 10 ** places) / 10 ** places;
+export const pxToIn = (px: number): number => round(px / 96, 4);
+export const pxToPt = (px: number): number => round(px * 0.75, 2);
+
+/** Hex plus pptxgenjs's `transparency` (0-100), omitted when opaque. */
+export function pptxColor(c: SlideColor): PptxColor {
+  const transparency = Math.round((1 - c.alpha) * 100);
+  return transparency > 0 ? { color: c.hex, transparency } : { color: c.hex };
+}
+
+function box(item: SlideItem): PptxBox {
+  const b: PptxBox = { x: pxToIn(item.x), y: pxToIn(item.y), w: pxToIn(item.w), h: pxToIn(item.h) };
+  if (item.rotation) b.rotate = round(item.rotation, 2);
+  return b;
+}
+
+function textOp(item: SlideTextItem): PptxOp {
+  let paragraphStart = true;
+  const runs = item.runs.map((run) => {
+    const options: PptxRunOptions = {};
+    if (run.bold) options.bold = true;
+    if (run.italic) options.italic = true;
+    if (run.underline) options.underline = { style: "sng" };
+    if (run.color) Object.assign(options, pptxColor(run.color));
+    if (run.sizePx) options.fontSize = Math.max(1, Math.min(4000, pxToPt(run.sizePx)));
+    if (run.font) options.fontFace = run.font;
+    if (run.breakLine) options.breakLine = true;
+    // A bullet belongs to a paragraph, which in the run list starts after each break.
+    if (item.bullet && paragraphStart) options.bullet = item.bullet === "number" ? { type: "number" } : true;
+    paragraphStart = !!run.breakLine;
+    return { text: run.text, options };
+  });
+  const options: Extract<PptxOp, { kind: "text" }>["options"] = {
+    ...box(item), align: item.align, valign: item.valign, margin: 0, fit: "none", wrap: true, isTextBox: true,
+  };
+  if (item.lineHeightPx) options.lineSpacing = pxToPt(item.lineHeightPx);
+  return { kind: "text", runs, options };
+}
+
+function itemOp(item: SlideItem): PptxOp {
+  if (item.kind === "text") return textOp(item);
+  if (item.kind === "image") return { kind: "image", options: { ...box(item), data: item.data } };
+  const options: Extract<PptxOp, { kind: "shape" }>["options"] = { ...box(item) };
+  if (item.fill) options.fill = pptxColor(item.fill);
+  if (item.border) options.line = { ...pptxColor(item.border.color), width: pxToPt(item.border.widthPx) };
+  // pptxgenjs 4 takes the corner radius in inches and writes it as OOXML's fraction of the
+  // shorter side, which PowerPoint caps at one half — hence the clamp.
+  if (item.radiusPx) options.rectRadius = pxToIn(Math.min(item.radiusPx, item.w / 2, item.h / 2));
+  return { kind: "shape", shape: item.radiusPx ? "roundRect" : "rect", options };
+}
+
+export function mapSlideDocToPptx(doc: SlideDoc): PptxPlan {
+  const layout: PptxPlan["layout"] = doc.width === 1280 && doc.height === 720
+    ? "LAYOUT_WIDE"
+    : { name: "PPM_DESIGN", width: pxToIn(doc.width), height: pxToIn(doc.height) };
+  const fonts = new Set<string>();
+  const slides = doc.slides.map((slide) => {
+    for (const item of slide.items) if (item.kind === "text") for (const run of item.runs) if (run.font) fonts.add(run.font);
+    return { ...(slide.background ? { background: pptxColor(slide.background) } : {}), ops: slide.items.map(itemOp) };
+  });
+  const warnings = [...doc.warnings];
+  if (fonts.size) {
+    const list = [...fonts].slice(0, 8).join(", ");
+    warnings.push(`Fonts are referenced by name (${list}${fonts.size > 8 ? ", …" : ""}); PowerPoint substitutes any it does not have.`);
+  }
+  return { layout, slides, warnings };
+}

package/src/web/lib/feature-badges.ts

@@ -14,6 +14,8 @@ export const FEATURE_BADGES = {
   "os-explorer": "new",
   /** Remote Desktop — stream + control the host desktop in a floating window. */
   "remote-desktop": "beta",
+  /** Design mode (Designs sidebar tab): design chat beside a live canvas, shipped in 0.23.0. */
+  designs: "new",
 } as const satisfies Record<string, FeatureBadgeKind>;
 
 export type FeatureBadgeId = keyof typeof FEATURE_BADGES;

package/src/web/lib/fluent-icon.tsx

@@ -28,12 +28,46 @@ export interface ProductIconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
 
 export type ProductIcon = ReturnType<typeof fluentIcon>;
 
+/**
+ * Utilities that describe the box an icon occupies rather than the glyph drawn in
+ * it: where it sits, its margins, how it behaves as a flex item — and the spin.
+ */
+const BOX_UTILITY =
+  /^(?:animate-spin$|-?m[trblxyse]?-|absolute$|relative$|fixed$|sticky$|-?inset-|-?top-|-?right-|-?bottom-|-?left-|-?translate-|z-|shrink|grow|self-|order-|pointer-events-)/;
+
+/**
+ * A spinning icon's classes, split between a wrapping span and the svg — or null
+ * when the icon does not spin.
+ *
+ * Chrome never hands an animation on an SVG element to the compositor, not even
+ * on an outer `<svg>`, so `animate-spin` on one recalculates style and repaints on
+ * the main thread every frame. Measured on a live tab, one spinner cost ~22% of a
+ * core; the same glyph inside a spinning span cost nothing measurable. A running
+ * tool card shows one for as long as the tool runs, which is most of a chat turn.
+ *
+ * The rotation moves to the span along with whatever positions the box, so a
+ * margin sits outside the rotating box instead of pulling its centre off the
+ * glyph, and an `absolute` spinner keeps its place. Size and colour stay on the
+ * svg, which is what lets a parent's `[&_svg:not([class*='size-'])]` rule keep
+ * sizing an icon that carries no size class of its own.
+ */
+export function splitSpinClasses(className: string): { box: string; glyph: string | undefined } | null {
+  const tokens = className.split(/\s+/).filter(Boolean);
+  const base = (t: string) => t.slice(t.lastIndexOf(":") + 1);
+  if (!tokens.some((t) => base(t) === "animate-spin")) return null;
+  const box = ["inline-flex"];
+  const glyph: string[] = [];
+  for (const t of tokens) (BOX_UTILITY.test(base(t)) ? box : glyph).push(t);
+  return { box: box.join(" "), glyph: glyph.length ? glyph.join(" ") : undefined };
+}
+
 export function fluentIcon(name: string, paths: readonly string[]) {
   const Icon = forwardRef<SVGSVGElement, ProductIconProps>(function Icon(
-    { size = 24, strokeWidth: _sw, absoluteStrokeWidth: _asw, ...rest },
+    { size = 24, strokeWidth: _sw, absoluteStrokeWidth: _asw, className, ...rest },
     ref,
   ) {
-    return (
+    const spin = typeof className === "string" ? splitSpinClasses(className) : null;
+    const svg = (
       <svg
         ref={ref}
         xmlns="http://www.w3.org/2000/svg"
@@ -50,12 +84,14 @@ export function fluentIcon(name: string, paths: readonly string[]) {
         // offering a class name for stylesheets to start depending on.
         data-icon={name}
         {...rest}
+        className={spin ? spin.glyph : className}
       >
         {paths.map((d) => (
           <path key={d} d={d} />
         ))}
       </svg>
     );
+    return spin ? <span className={spin.box}>{svg}</span> : svg;
   });
   Icon.displayName = name;
   return Icon;

package/src/web/lib/icons.generated.tsx

@@ -25,6 +25,7 @@ const D: Record<string, readonly string[]> = {
   "arrow-left": ["M9.159 16.867a.5.5 0 1 0 .674-.739l-6.168-5.63h13.831a.5.5 0 0 0 0-1H3.668l6.165-5.629a.5.5 0 0 0-.674-.738L2.243 9.445a.75.75 0 0 0-.24.631a.75.75 0 0 0 .24.477z"],
   "arrow-maximize": ["M15.5 4a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V5.707L5.707 15H10.5a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 1 0v4.793L14.293 5H9.5a.5.5 0 0 1 0-1z"],
   "arrow-minimize": ["M8.5 11a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-3.793l-5.146 5.147a.5.5 0 0 1-.708-.707L7.293 12H3.5a.5.5 0 0 1 0-1zm8.647-8.854a.5.5 0 1 1 .707.708L12.707 8H16.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 1 0v3.793z"],
+  "arrow-move": ["M10.354 2.146a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 1 0 .708.708L9.5 3.707V7.5a.5.5 0 0 0 1 0V3.707l1.646 1.647a.5.5 0 0 0 .708-.708zm-8.208 7.5a.5.5 0 0 0 0 .708l2.5 2.5a.5.5 0 0 0 .708-.708L3.707 10.5H7.5a.5.5 0 0 0 0-1H3.707l1.647-1.646a.5.5 0 1 0-.708-.708zM10 18a.5.5 0 0 1-.354-.146l-2.5-2.5a.5.5 0 0 1 .708-.708L9.5 16.293V12.5a.5.5 0 0 1 1 0v3.793l1.646-1.647a.5.5 0 0 1 .708.708l-2.5 2.5A.5.5 0 0 1 10 18m7.854-7.646a.5.5 0 0 0 0-.708l-2.5-2.5a.5.5 0 0 0-.708.708L16.293 9.5H12.5a.5.5 0 0 0 0 1h3.793l-1.647 1.646a.5.5 0 0 0 .708.708z"],
   "arrow-redo": ["M15.003 2.5a.5.5 0 0 1 1 0v4.9a.6.6 0 0 1-.6.6h-4.9a.5.5 0 0 1 0-1h3.594l-3.473-3.019a4 4 0 1 0-5.248 6.038l8.172 7.104a.5.5 0 1 1-.656.754L4.72 10.774a5 5 0 1 1 6.56-7.547l3.723 3.236z"],
   "arrow-right": ["M10.837 3.13a.5.5 0 0 0-.674.74L16.33 9.5H2.5a.5.5 0 0 0 0 1h13.828l-6.165 5.628a.5.5 0 0 0 .674.739l6.916-6.314a.747.747 0 0 0 0-1.108z"],
   "arrow-sort": ["M2.354 7.354L4.998 4.71V16.5a.5.5 0 0 0 1 0V4.705l2.649 2.65a.5.5 0 0 0 .707-.708l-3.49-3.49l-.01-.01A.5.5 0 0 0 5.5 3h-.002a.5.5 0 0 0-.383.179L1.646 6.647a.5.5 0 1 0 .708.707m15.293 5.292l-2.644 2.644V3.5a.5.5 0 0 0-1 0v11.795l-2.65-2.65a.5.5 0 0 0-.707.708l3.49 3.49l.01.01a.5.5 0 0 0 .355.147h.002a.5.5 0 0 0 .383-.179l3.468-3.468a.5.5 0 1 0-.707-.707"],
@@ -41,6 +42,7 @@ const D: Record<string, readonly string[]> = {
   "calendar-cancel": ["M14.5 3A2.5 2.5 0 0 1 17 5.5v4.1a5.5 5.5 0 0 0-1-.393V7H4v7.5A1.5 1.5 0 0 0 5.5 16h3.707q.149.524.393 1H5.5A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9A1.5 1.5 0 0 0 4 5.5V6h12v-.5A1.5 1.5 0 0 0 14.5 4M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4.5.707l1.146 1.147a.5.5 0 0 0 .708-.708L15.207 14.5l1.147-1.146a.5.5 0 0 0-.708-.708L14.5 13.793l-1.146-1.147a.5.5 0 0 0-.708.708l1.147 1.146l-1.147 1.146a.5.5 0 0 0 .708.708z"],
   "calendar-clock": ["M17 5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h4.1a5.5 5.5 0 0 1-.393-1H5.5A1.5 1.5 0 0 1 4 14.5V7h12v2.207q.524.149 1 .393zM5.5 4h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4m9 15a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m-.5-6.5a.5.5 0 0 1 1 0V14h1a.5.5 0 0 1 0 1h-1.5a.5.5 0 0 1-.5-.5z"],
   "chat": ["M10 2a8 8 0 1 1-3.613 15.14l-.121-.065l-3.645.91a.5.5 0 0 1-.62-.441v-.082l.014-.083l.91-3.644l-.063-.12a8 8 0 0 1-.83-2.887l-.025-.382L2 10a8 8 0 0 1 8-8m0 1a7 7 0 0 0-6.106 10.425a.5.5 0 0 1 .063.272l-.014.094l-.756 3.021l3.024-.754a.5.5 0 0 1 .188-.01l.091.021l.087.039A7 7 0 1 0 10 3m.5 8a.5.5 0 0 1 .09.992L10.5 12h-3a.5.5 0 0 1-.09-.992L7.5 11zm2-3a.5.5 0 0 1 .09.992L12.5 9h-5a.5.5 0 0 1-.09-.992L7.5 8z"],
+  "chat-add": ["M6.5 9.5a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3a.5.5 0 0 0-1 0v3zM18 10a8 8 0 1 0-16 0l.007.346l.026.382a8 8 0 0 0 .829 2.887l.063.12l-.91 3.644l-.014.083v.082a.5.5 0 0 0 .62.441l3.645-.91l.12.064A8 8 0 0 0 18 10M3 10a7 7 0 1 1 3.577 6.108l-.087-.039l-.091-.021a.5.5 0 0 0-.188.01l-3.024.754l.756-3.02l.014-.095a.5.5 0 0 0-.063-.272A6.97 6.97 0 0 1 3 10"],
   "chat-empty": ["M10 2a8 8 0 1 1-3.613 15.14l-.121-.065l-3.645.91a.5.5 0 0 1-.62-.441v-.082l.014-.083l.91-3.644l-.063-.12a8 8 0 0 1-.83-2.887l-.025-.382L2 10a8 8 0 0 1 8-8m0 1a7 7 0 0 0-6.106 10.425a.5.5 0 0 1 .063.272l-.014.094l-.756 3.021l3.024-.754a.5.5 0 0 1 .188-.01l.091.021l.087.039A7 7 0 1 0 10 3"],
   "checkmark": ["M3.374 10.168a.5.5 0 0 0-.748.664l4 4.5a.5.5 0 0 0 .728.022l10.5-10.5a.5.5 0 0 0-.707-.708L7.02 14.271z"],
   "checkmark-circle": ["M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m3.358 4.646a.5.5 0 0 1 .058.638l-.058.07l-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058l-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0"],
@@ -64,6 +66,7 @@ const D: Record<string, readonly string[]> = {
   "color": ["M10 2a8 8 0 0 1 3.388 15.249a3.77 3.77 0 0 1-3.291-.059c-.974-.503-1.696-1.467-1.648-2.731c.017-.445.082-.867.143-1.243c.063-.387.118-.712.136-1.015c.018-.297-.004-.533-.078-.732c-.07-.191-.2-.381-.45-.569c-.313-.235-.58-.275-.845-.237c-.3.043-.614.188-1.014.387c-.735.365-1.776.942-2.974.332c-1.102-.562-1.424-1.868-1.22-2.917A8 8 0 0 1 10 2m0 1a7 7 0 0 0-6.871 5.655c-.153.788.126 1.547.691 1.835c.684.348 1.251.074 2.076-.336c.38-.188.834-.412 1.318-.481c.52-.075 1.054.028 1.586.427c.39.292.645.634.788 1.021c.14.379.162.768.14 1.14c-.022.366-.09.753-.149 1.116a9 9 0 0 0-.13 1.12c-.032.812.418 1.448 1.108 1.805a2.77 2.77 0 0 0 2.407.042A7.002 7.002 0 0 0 10 3m2.5 10a1 1 0 1 1 0 2a1 1 0 0 1 0-2m2-2.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2a1 1 0 0 1 0-2m-2-2.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2m-3-.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2"],
   "copy": ["M7 7H5.5A1.5 1.5 0 0 0 4 8.5v6A1.5 1.5 0 0 0 5.5 16h4a1.5 1.5 0 0 0 1.413-1h1.037a2.5 2.5 0 0 1-2.45 2h-4A2.5 2.5 0 0 1 3 14.5v-6A2.5 2.5 0 0 1 5.5 6H7zm7.5-4A2.5 2.5 0 0 1 17 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-4A2.5 2.5 0 0 1 8 11.5v-6A2.5 2.5 0 0 1 10.5 3zm-4 1A1.5 1.5 0 0 0 9 5.5v6a1.5 1.5 0 0 0 1.5 1.5h4a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 14.5 4z"],
   "cursor": ["M5 3.059a1 1 0 0 1 1.636-.772l11.006 9.062c.724.596.302 1.772-.636 1.772h-5.592a1.5 1.5 0 0 0-1.134.518l-3.524 4.073c-.606.7-1.756.271-1.756-.655zm12.006 9.062L6 3.059v13.998l3.524-4.072a2.5 2.5 0 0 1 1.89-.864z"],
+  "cursor-click": ["M7.5 2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5M3.61 3.61a.5.5 0 0 1 .708 0l1.414 1.415a.5.5 0 1 1-.707.707L3.611 4.318a.5.5 0 0 1 0-.707m7.78 0a.5.5 0 0 1 0 .708L9.974 5.732a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0M2 7.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m6.64-.2A1 1 0 0 0 7 8.067v9.101c0 .924 1.145 1.354 1.753.659l2.026-2.316A1.5 1.5 0 0 1 11.908 15h3.211c.935 0 1.359-1.17.64-1.768zM8 17.17V8.067L15.119 14h-3.211a2.5 2.5 0 0 0-1.882.854z"],
   "cut": ["M5.92 2.228a.5.5 0 0 0-.84.544L9.405 9.43L7.48 12.39a3 3 0 1 0 .779.636L10 10.348l1.74 2.68a3 3 0 1 0 .779-.636zM14 17a2 2 0 1 1 0-4a2 2 0 0 1 0 4M4 15a2 2 0 1 1 4 0a2 2 0 0 1-4 0m7.192-6.489l-.596-.918l3.485-5.365a.5.5 0 0 1 .838.544z"],
   "database": ["M4 5c0-1.007.875-1.755 1.904-2.223C6.978 2.289 8.427 2 10 2s3.022.289 4.096.777C15.125 3.245 16 3.993 16 5v10c0 1.007-.875 1.755-1.904 2.223C13.022 17.71 11.573 18 10 18s-3.022-.289-4.096-.777C4.875 16.755 4 16.007 4 15zm1 0c0 .374.356.875 1.318 1.313C7.234 6.729 8.536 7 10 7s2.766-.27 3.682-.687C14.644 5.875 15 5.373 15 5c0-.374-.356-.875-1.318-1.313C12.766 3.271 11.464 3 10 3s-2.766.27-3.682.687C5.356 4.125 5 4.627 5 5m10 1.698a5 5 0 0 1-.904.525C13.022 7.711 11.573 8 10 8s-3.022-.289-4.096-.777A5 5 0 0 1 5 6.698V15c0 .374.356.875 1.318 1.313c.916.416 2.218.687 3.682.687s2.766-.27 3.682-.687C14.644 15.875 15 15.373 15 15z"],
   "database-lightning": ["M4 5c0-1.007.875-1.755 1.9-2.223A10.2 10.2 0 0 1 10 2a10.2 10.2 0 0 1 4.1.777C15.125 3.245 16 3.993 16 5v4h-1V6.7q-.421.31-.9.525A10.2 10.2 0 0 1 10 8a10.2 10.2 0 0 1-4.1-.777A5 5 0 0 1 5 6.7V15c0 .374.356.875 1.318 1.313A9.2 9.2 0 0 0 10 17q.748.015 1.486-.09q.24.088.516.09h.469l-.197.787c-.746.156-1.508.228-2.274.213a10.2 10.2 0 0 1-4.1-.777C4.875 16.755 4 16.007 4 15zm1 0c0 .374.356.875 1.318 1.313A9.2 9.2 0 0 0 10 7a9.2 9.2 0 0 0 3.682-.687C14.644 5.875 15 5.373 15 5c0-.374-.356-.875-1.318-1.313A9.2 9.2 0 0 0 10 3a9.2 9.2 0 0 0-3.682.687C5.356 4.125 5 4.626 5 5m8.112 11a.5.5 0 0 1 .485.621l-.434 1.738c-.121.483.462.827.826.487l4.872-4.548A.75.75 0 0 0 18.35 13h-.404a.5.5 0 0 1-.474-.658l.561-1.684A.5.5 0 0 0 17.56 10h-3.473a.5.5 0 0 0-.462.308l-2.083 5a.5.5 0 0 0 .461.692z"],
@@ -94,6 +97,7 @@ const D: Record<string, readonly string[]> = {
   "folder-link": ["M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h4.837a3.5 3.5 0 0 1-.302-1H4.5A1.5 1.5 0 0 1 3 14.5V8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v4.535c.353.05.69.154 1 .302V7.5A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3zm9.5 7.5a2.5 2.5 0 0 0 0 5h.5a.5.5 0 0 0 0-1h-.5a1.5 1.5 0 0 1 0-3h.5a.5.5 0 0 0 0-1zm3.5 0a.5.5 0 0 0 0 1h.5a1.5 1.5 0 0 1 0 3H16a.5.5 0 0 0 0 1h.5a2.5 2.5 0 0 0 0-5zm-4 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"],
   "folder-open": ["M3 5.5v6.604l1.5-2.6a3 3 0 0 1 2.599-1.5H15V7.5A1.5 1.5 0 0 0 13.5 6h-4a.5.5 0 0 1-.353-.146L7.44 4.146A.5.5 0 0 0 7.086 4H4.5A1.5 1.5 0 0 0 3 5.5m1.284 10.485q.106.015.22.015H13.9a2 2 0 0 0 1.732-1l2.163-3.745a1.5 1.5 0 0 0-1.3-2.25H7.1a2 2 0 0 0-1.732 1L3.205 13.75a1.5 1.5 0 0 0 1.079 2.235M2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.586a1.5 1.5 0 0 1 1.06.44L9.708 5H13.5A2.5 2.5 0 0 1 16 7.5v.505h.496c1.925 0 3.128 2.083 2.166 3.75L16.499 15.5a3 3 0 0 1-2.598 1.5h-9.4q-.095 0-.186-.007a2.46 2.46 0 0 1-1.438-.592A2.5 2.5 0 0 1 2 14.461"],
   "folder-search": ["M2 5.5A2.5 2.5 0 0 1 4.5 3h2.482c.464 0 .91.184 1.238.513L9.707 5H15.5A2.5 2.5 0 0 1 18 7.5V12h-.027A4.5 4.5 0 0 0 17 9.671V7.5A1.5 1.5 0 0 0 15.5 6H9.707l-1.56 1.56A1.5 1.5 0 0 1 7.085 8H3v6.5A1.5 1.5 0 0 0 4.5 16h6.171a4.5 4.5 0 0 0 2.329.973V17H4.5A2.5 2.5 0 0 1 2 14.5zM4.5 4A1.5 1.5 0 0 0 3 5.5V7h4.086a.5.5 0 0 0 .353-.146L8.793 5.5l-1.28-1.28a.75.75 0 0 0-.53-.22zm9 12c.786 0 1.512-.26 2.096-.697l2.55 2.55a.5.5 0 1 0 .708-.707l-2.55-2.55A3.5 3.5 0 1 0 13.5 16m0-1a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5"],
+  "folder-zip": ["M6.982 3c.464 0 .91.185 1.238.513L9.707 5H15.5A2.5 2.5 0 0 1 18 7.5v7a2.5 2.5 0 0 1-2.5 2.5H15v.538a.46.46 0 0 1-.462.462h-3.076l-.094-.01a.46.46 0 0 1-.368-.452V17H4.5A2.5 2.5 0 0 1 2 14.5v-9A2.5 2.5 0 0 1 4.5 3zM13 13a1 1 0 0 0-1 1v3h2v-3a1 1 0 0 0-1-1M8.146 7.56a1.5 1.5 0 0 1-1.06.44H3v6.5A1.5 1.5 0 0 0 4.5 16H11v-2a2 2 0 1 1 4 0v2h.5a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 15.5 6H9.707zM13 12h-1.5a.5.5 0 0 1 0-1H13zm1.5-2a.5.5 0 0 1 0 1H13v-1zM13 10h-1.5a.5.5 0 0 1 0-1H13zm1.5-2a.5.5 0 0 1 0 1H13V8zM13 8h-1.5a.5.5 0 0 1 0-1H13zM4.5 4A1.5 1.5 0 0 0 3 5.5V7h4.086a.5.5 0 0 0 .353-.146L8.793 5.5l-1.28-1.28a.75.75 0 0 0-.53-.22z"],
   "full-screen-maximize": ["M3 5a2 2 0 0 1 2-2h2a.5.5 0 0 1 0 1H5a1 1 0 0 0-1 1v2a.5.5 0 0 1-1 0zm9.5-1.5A.5.5 0 0 1 13 3h2a2 2 0 0 1 2 2v2a.5.5 0 0 1-1 0V5a1 1 0 0 0-1-1h-2a.5.5 0 0 1-.5-.5m-9 9a.5.5 0 0 1 .5.5v2a1 1 0 0 0 1 1h2a.5.5 0 0 1 0 1H5a2 2 0 0 1-2-2v-2a.5.5 0 0 1 .5-.5m13 0a.5.5 0 0 1 .5.5v2a2 2 0 0 1-2 2h-2a.5.5 0 0 1 0-1h2a1 1 0 0 0 1-1v-2a.5.5 0 0 1 .5-.5"],
   "full-screen-minimize": ["M14 5a1 1 0 0 0 1 1h2a.5.5 0 0 1 0 1h-2a2 2 0 0 1-2-2V3a.5.5 0 0 1 1 0zM6 15a1 1 0 0 0-1-1H3a.5.5 0 0 1 0-1h2a2 2 0 0 1 2 2v2a.5.5 0 0 1-1 0zm8 0a1 1 0 0 1 1-1h2a.5.5 0 0 0 0-1h-2a2 2 0 0 0-2 2v2a.5.5 0 0 0 1 0zM5 6a1 1 0 0 0 1-1V3a.5.5 0 0 1 1 0v2a2 2 0 0 1-2 2H3a.5.5 0 0 1 0-1z"],
   "gauge": ["M12.466 5.057a.5.5 0 0 1-.647.284a5.001 5.001 0 0 0-5.355 8.195a.5.5 0 1 1-.707.707a6 6 0 0 1 6.425-9.834a.5.5 0 0 1 .284.648m2.478 2.477a.5.5 0 0 1 .647.285a6 6 0 0 1-1.348 6.424a.5.5 0 1 1-.707-.707a5 5 0 0 0 1.123-5.354a.5.5 0 0 1 .284-.648m-.859-1.715a.5.5 0 0 0-.635-.011l-.177.14a335 335 0 0 0-1.91 1.531c-.532.431-1.078.877-1.513 1.242c-.218.182-.41.346-.56.478a4 4 0 0 0-.344.328a1.5 1.5 0 1 0 2.282 1.948c.072-.084.17-.232.27-.39c.107-.17.239-.385.385-.628c.292-.488.646-1.096.989-1.69a301 301 0 0 0 1.213-2.126l.111-.196a.5.5 0 0 0-.11-.626M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1a7 7 0 1 1 0-14a7 7 0 0 1 0 14"],
@@ -124,6 +128,7 @@ const D: Record<string, readonly string[]> = {
   "music-note-2": ["M14.702 2.226A1 1 0 0 1 16 3.18V13.5a2.5 2.5 0 1 1-1-2V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m6.5-.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0"],
   "navigation": ["M2 4.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m.5 4.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1z"],
   "open": ["M6 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2.5a.5.5 0 0 1 1 0V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2.5a.5.5 0 0 1 0 1zm5-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V4.707l-4.146 4.147a.5.5 0 0 1-.708-.708L15.293 4H11.5a.5.5 0 0 1-.5-.5"],
+  "options": ["M14.95 5a2.5 2.5 0 0 0-4.9 0H2.5a.5.5 0 0 0 0 1h7.55a2.5 2.5 0 0 0 4.9 0h2.55a.5.5 0 0 0 0-1zM12.5 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m-2.55 7a2.5 2.5 0 0 0-4.9 0H2.5a.5.5 0 0 0 0 1h2.55a2.5 2.5 0 0 0 4.9 0h7.55a.5.5 0 0 0 0-1zM7.5 16a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3"],
   "panel-bottom": ["M5 3a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM3 6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v5H3zm0 6h14v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"],
   "panel-left": ["M15 4a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM8.5 15H15a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H8.5zM5 5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2.5V5z"],
   "panel-left-expand": ["m13.179 10.5l-.998.874a.5.5 0 0 0 .658.752l2-1.75a.5.5 0 0 0 0-.752l-2-1.75a.5.5 0 1 0-.659.752l1 .874H9.5a.5.5 0 0 0 0 1zM2 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2zm2 1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3v10zm4 0V5h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1z"],
@@ -140,6 +145,7 @@ const D: Record<string, readonly string[]> = {
   "play": ["M17.22 8.687a1.498 1.498 0 0 1 0 2.626l-9.997 5.499A1.5 1.5 0 0 1 5 15.499V4.501a1.5 1.5 0 0 1 2.223-1.313zm-.482 1.75a.5.5 0 0 0 0-.875L6.741 4.063A.5.5 0 0 0 6 4.501v10.998a.5.5 0 0 0 .741.438z"],
   "plug-connected": ["M17.854 2.854a.5.5 0 0 0-.708-.708l-2.668 2.669a4.036 4.036 0 0 0-5.332.331l-.3.3a1.49 1.49 0 0 0 0 2.108l3.6 3.6a1.49 1.49 0 0 0 2.107 0l.3-.3a4.036 4.036 0 0 0 .332-5.332zm-4.008 7.592a.49.49 0 0 1-.693 0l-3.6-3.6a.49.49 0 0 1 0-.692l.3-.3a3.036 3.036 0 0 1 4.293 4.292zm-6.292-1.6a1.49 1.49 0 0 0-2.107 0l-.3.3a4.036 4.036 0 0 0-.332 5.332l-2.669 2.668a.5.5 0 0 0 .708.708l2.668-2.669a4.036 4.036 0 0 0 5.332-.332l.3-.3a1.49 1.49 0 0 0 0-2.107zm-1.4.708a.49.49 0 0 1 .693 0l3.6 3.6a.49.49 0 0 1 0 .692l-.3.3a3.035 3.035 0 1 1-4.293-4.292z"],
   "power": ["M10.5 2.5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0zM13.743 4a.5.5 0 1 0-.499.867a6.5 6.5 0 1 1-6.494.004a.5.5 0 1 0-.5-.866A7.5 7.5 0 1 0 13.743 4"],
+  "print": ["M5 4.5A1.5 1.5 0 0 1 6.5 3h7A1.5 1.5 0 0 1 15 4.5V5h.5A2.5 2.5 0 0 1 18 7.5v5a1.5 1.5 0 0 1-1.5 1.5H15v1.5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 5 15.5V14H3.5A1.5 1.5 0 0 1 2 12.5v-5A2.5 2.5 0 0 1 4.5 5H5zM6 5h8v-.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5zm-1 8v-1.5A1.5 1.5 0 0 1 6.5 10h7a1.5 1.5 0 0 1 1.5 1.5V13h1.5a.5.5 0 0 0 .5-.5v-5A1.5 1.5 0 0 0 15.5 6h-11A1.5 1.5 0 0 0 3 7.5v5a.5.5 0 0 0 .5.5zm1.5-2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5z"],
   "pulse": ["M7.004 3a.5.5 0 0 1 .479.37l3.043 11.303l2.495-8.317a.5.5 0 0 1 .947-.032L15.347 10H17.5a.5.5 0 0 1 0 1H15a.5.5 0 0 1-.468-.324l-.98-2.612l-2.573 8.58a.5.5 0 0 1-.962-.014L6.986 5.37L5.48 10.637A.5.5 0 0 1 5 11H2.5a.5.5 0 0 1 0-1h2.123l1.896-6.637A.5.5 0 0 1 7.004 3"],
   "puzzle-piece": ["M11 3c-.69 0-1.25.56-1.25 1.25V5H6.5a.5.5 0 0 0-.5.5v3.25h-.75a1.25 1.25 0 1 0 0 2.5H6v3.25a.5.5 0 0 0 .5.5h3.25v.75a1.25 1.25 0 1 0 2.5 0V15h3.25a.5.5 0 0 0 .5-.5v-2.25h-.75a2.25 2.25 0 0 1 0-4.5H16V5.5a.5.5 0 0 0-.5-.5h-3.25v-.75C12.25 3.56 11.69 3 11 3M8.764 4a2.25 2.25 0 0 1 4.472 0H15.5A1.5 1.5 0 0 1 17 5.5v3.25h-1.75a1.25 1.25 0 1 0 0 2.5H17v3.25a1.5 1.5 0 0 1-1.5 1.5h-2.264a2.25 2.25 0 0 1-4.472 0H6.5A1.5 1.5 0 0 1 5 14.5v-2.264a2.25 2.25 0 0 1 0-4.472V5.5A1.5 1.5 0 0 1 6.5 4z"],
   "qr-code": ["M11 15h2v2h-2zm4 0h2v2h-2zm-4-4h2v2h-2zm2 2h2v2h-2zm2-2h2v2h-2zM3 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm0 1h2v2H5zm-2 8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zm0 1h2v2H5zm6-8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm0 1h2v2h-2z"],
@@ -158,6 +164,7 @@ const D: Record<string, readonly string[]> = {
   "shield-dismiss": ["M7.854 7.146a.5.5 0 1 0-.708.708L9.293 10l-2.147 2.146a.5.5 0 0 0 .708.708L10 10.707l2.146 2.147a.5.5 0 0 0 .708-.708L10.707 10l2.147-2.146a.5.5 0 0 0-.708-.708L10 9.293zm2.423-5.062a.5.5 0 0 0-.554 0a15.05 15.05 0 0 1-6.294 2.421A.5.5 0 0 0 3 5v4.5c0 3.891 2.307 6.73 6.82 8.467a.5.5 0 0 0 .36 0C14.693 16.23 17 13.39 17 9.5V5a.5.5 0 0 0-.43-.495a15.05 15.05 0 0 1-6.293-2.421M4 5.428a16 16 0 0 0 5.6-2.082l.4-.249l.4.249A16 16 0 0 0 16 5.428V9.5c0 3.392-1.968 5.863-6 7.463c-4.032-1.6-6-4.071-6-7.463z"],
   "shield-error": ["M10 6a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5A.5.5 0 0 1 10 6m0 8.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421m-.124 1.262A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463c4.032-1.6 6-4.071 6-7.463V5.428a16 16 0 0 1-5.6-2.082l-.4-.249z"],
   "sign-out": ["M8.5 11.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M11 3.5a.5.5 0 0 0-.576-.494l-7 1.07A.5.5 0 0 0 3 4.57v10.86a.5.5 0 0 0 .424.494l7 1.071a.5.5 0 0 0 .576-.494V10h5.172l-.997.874a.5.5 0 0 0 .658.752l1.996-1.75a.5.5 0 0 0 0-.752l-1.996-1.75a.499.499 0 1 0-.658.752l.997.874H11zm-1 .582V15.92L4 15V4.999zM12.5 16H12v-5h1v4.5a.5.5 0 0 1-.5.5M12 8V4h.5a.5.5 0 0 1 .5.5V8z"],
+  "slide-text": ["M5.5 7a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm-.5 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5M4.5 4A2.5 2.5 0 0 0 2 6.5v7A2.5 2.5 0 0 0 4.5 16h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 4zM3 6.5A1.5 1.5 0 0 1 4.5 5h11A1.5 1.5 0 0 1 17 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 13.5z"],
   "sparkle": ["M7.398 12.809a1.04 1.04 0 0 0 1.204-.003c.178-.13.313-.31.387-.518l.447-1.373a2.34 2.34 0 0 1 1.477-1.479l1.391-.45a1.045 1.045 0 0 0-.044-1.98l-1.375-.448a2.34 2.34 0 0 1-1.48-1.477l-.452-1.388a1.044 1.044 0 0 0-1.973.017l-.457 1.4a2.34 2.34 0 0 1-1.44 1.45l-1.39.447a1.045 1.045 0 0 0 .016 1.974l1.374.445a2.33 2.33 0 0 1 1.481 1.488l.452 1.391c.072.204.206.38.382.504m.085-7.415l.527-1.377l.44 1.377a3.33 3.33 0 0 0 2.117 2.114l1.406.53l-1.382.447a3.34 3.34 0 0 0-2.115 2.117l-.523 1.378l-.449-1.379a3.34 3.34 0 0 0-.8-1.31a3.4 3.4 0 0 0-1.312-.812l-1.378-.522l1.386-.45a3.36 3.36 0 0 0 1.29-.813a3.4 3.4 0 0 0 .793-1.3m6.052 11.457a.806.806 0 0 0 1.226-.398l.248-.762a1.1 1.1 0 0 1 .26-.42c.118-.12.262-.208.42-.26l.772-.252a.8.8 0 0 0-.023-1.52l-.764-.25a1.08 1.08 0 0 1-.68-.678l-.252-.773a.8.8 0 0 0-1.518.01l-.247.762a1.07 1.07 0 0 1-.665.679l-.773.252a.8.8 0 0 0 .008 1.518l.763.247c.16.054.304.143.422.261c.119.119.207.263.258.422l.253.774a.8.8 0 0 0 .292.388m-.913-2.793L12.443 14l.184-.064a2.11 2.11 0 0 0 1.3-1.317l.058-.178l.06.181a2.08 2.08 0 0 0 1.316 1.316l.195.063l-.18.06a2.08 2.08 0 0 0-1.317 1.32l-.059.181l-.058-.18a2.08 2.08 0 0 0-1.32-1.323"],
   "speaker-1": ["M11.996 3.006c0-.873-1.04-1.327-1.68-.733L6.444 5.866a.5.5 0 0 1-.34.134H3.496a1.5 1.5 0 0 0-1.5 1.5v5a1.5 1.5 0 0 0 1.5 1.5h2.608a.5.5 0 0 1 .34.133l3.872 3.594c.64.593 1.68.14 1.68-.733zM7.124 6.599l3.872-3.593v13.988L7.124 13.4a1.5 1.5 0 0 0-1.02-.4H3.496a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h2.608a1.5 1.5 0 0 0 1.02-.4m6.956 6.334a.5.5 0 0 1-.183-.683a4.5 4.5 0 0 0 0-4.5a.5.5 0 1 1 .865-.5a5.5 5.5 0 0 1 .001 5.5a.5.5 0 0 1-.683.183"],
   "speaker-2": ["M11.996 3.006c0-.873-1.04-1.327-1.68-.733L6.444 5.866a.5.5 0 0 1-.34.134H3.496a1.5 1.5 0 0 0-1.5 1.5v5a1.5 1.5 0 0 0 1.5 1.5h2.608a.5.5 0 0 1 .34.133l3.872 3.594c.64.593 1.68.14 1.68-.733zM7.124 6.599l3.872-3.593v13.988L7.124 13.4a1.5 1.5 0 0 0-1.02-.4H3.496a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h2.608a1.5 1.5 0 0 0 1.02-.4m8.132-1.972a.5.5 0 0 1 .706.04a8 8 0 0 1 0 10.666a.5.5 0 0 1-.745-.667a7 7 0 0 0 0-9.333a.5.5 0 0 1 .039-.706m-1.176 8.306a.5.5 0 0 1-.183-.683a4.5 4.5 0 0 0 0-4.5a.5.5 0 1 1 .865-.5a5.5 5.5 0 0 1 .001 5.5a.5.5 0 0 1-.683.183"],
@@ -167,6 +174,7 @@ const D: Record<string, readonly string[]> = {
   "square-dismiss": ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h3.6a5.5 5.5 0 0 1-.393-1H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3.207q.524.149 1 .393V6a3 3 0 0 0-3-3zm8.5 16a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m1.854-6.354a.5.5 0 0 1 0 .708L15.207 14.5l1.147 1.146a.5.5 0 0 1-.708.708L14.5 15.207l-1.146 1.147a.5.5 0 0 1-.708-.708l1.147-1.146l-1.147-1.146a.5.5 0 0 1 .708-.708l1.146 1.147l1.146-1.147a.5.5 0 0 1 .708 0"],
   "subtract": ["M3 10a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 3 10"],
   "table": ["M17 5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5zm-13 9V13h3v3H5.5l-.144-.007A1.5 1.5 0 0 1 4 14.5m8-1.5v3H8v-3zm2.5 3H13v-3h3v1.5l-.007.145A1.5 1.5 0 0 1 14.5 16M12 8v4H8V8zm1 0h3v4h-3zm-1-4v3H8V4zm1 0h1.5l.145.007A1.5 1.5 0 0 1 16 5.5V7h-3zM7 4v3H4V5.5l.007-.144A1.5 1.5 0 0 1 5.5 4zm0 4v4H4V8z"],
+  "tablet": ["M8.5 12a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM4 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM3 6a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"],
   "tag": ["M14 7a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-2.87-5a2 2 0 0 0-1.426.584L3.022 9.249a2 2 0 0 0-.002 2.83l4.949 4.948a2 2 0 0 0 2.828 0l6.631-6.63a2 2 0 0 0 .586-1.418l-.008-4.95a2 2 0 0 0-1.986-1.997zm-.72 1.292A1 1 0 0 1 11.123 3l4.89.032a1 1 0 0 1 .993.999l.008 4.95a1 1 0 0 1-.293.708l-6.63 6.631a1 1 0 0 1-1.415 0l-4.949-4.948a1 1 0 0 1 .001-1.415z"],
   "tag-multiple": ["M13.5 6.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2M9.207 2.586A2 2 0 0 1 10.621 2h4.452a2 2 0 0 1 2 2v4.374a2 2 0 0 1-.593 1.422l-5.818 5.76a2 2 0 0 1-2.82-.008l-4.385-4.384a2 2 0 0 1 0-2.828zM10.621 3a1 1 0 0 0-.707.293l-5.75 5.75a1 1 0 0 0 0 1.414l4.384 4.384a1 1 0 0 0 1.41.004l5.819-5.76a1 1 0 0 0 .296-.71V4a1 1 0 0 0-1-1zm-7.624 8.8a2 2 0 0 0 .46 2.114l2.977 2.977a4 4 0 0 0 5.642.014l4.404-4.36a2 2 0 0 0 .593-1.42v-.573l-4.997 4.953a4 4 0 0 1-.147.14l-.556.55a3 3 0 0 1-4.232-.01l-.499-.5a4 4 0 0 1-.208-.194l-2.977-2.977a2 2 0 0 1-.46-.714"],
   "target": ["M10 11.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M5 10a5 5 0 1 1 10 0a5 5 0 0 1-10 0m5-4a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-8 4a8 8 0 1 1 16 0a8 8 0 0 1-16 0m8-7a7 7 0 1 0 0 14a7 7 0 0 0 0-14"],
@@ -192,7 +200,7 @@ const D: Record<string, readonly string[]> = {
 export const ICON_VIEW_BOX = "0 0 20 20";
 
 /** Which names this module draws with Fluent, for the coverage test. */
-export const FLUENT_NAMES: readonly string[] = ["Activity","AlertCircle","AlertTriangle","AppWindow","ArrowDown","ArrowDownAZ","ArrowDownToLine","ArrowDownUp","ArrowLeft","ArrowRight","ArrowUp","ArrowUpCircle","ArrowUpDown","ArrowUpFromLine","Bell","BellOff","BellRing","Bot","BotMessageSquare","Brain","Bug","CalendarClock","CalendarX2","Check","CheckCircle","CheckCircle2","CheckIcon","ChevronDown","ChevronDownIcon","ChevronLeft","ChevronRight","ChevronRightIcon","ChevronUp","ChevronUpIcon","ChevronsDown","ChevronsDownUp","ChevronsRight","ChevronsUpDown","Circle","CircleCheckIcon","CircleHelp","CircleIcon","CircleX","Clipboard","ClipboardCheck","ClipboardList","ClipboardPaste","Clock","Cloud","CloudOff","Code","Coffee","Columns","Columns2","Columns3","Copy","Cpu","Crosshair","Database","DatabaseZap","Download","ExternalLink","Eye","EyeOff","File","FileCode","FilePen","FilePlus","FilePlus2","FileSearch","FileText","FileType","FileWarning","Filter","FlaskConical","FlipHorizontal","FlipHorizontal2","FlipVertical","FlipVertical2","Folder","FolderOpen","FolderPlus","FolderSearch","FolderSymlink","FolderTree","Gauge","GitBranch","Globe","Grid2x2","GripHorizontal","GripVertical","Hand","HardDrive","Heart","HelpCircle","History","Home","Image","ImageOff","ImagePlus","Info","InfoIcon","Key","KeyRound","Keyboard","Layers","LayoutGrid","Lightbulb","Link","Link2","Link2Off","List","ListChecks","ListFilter","ListOrdered","ListTodo","Loader2","Loader2Icon","Lock","LogIn","LogOut","Maximize","Maximize2","Menu","MessageCircle","MessageSquare","Mic","MicOff","Minimize","Minimize2","Minus","Monitor","MonitorSmartphone","MonitorX","Moon","MoreHorizontal","MoreVertical","MousePointer2","Music","OctagonXIcon","Palette","PanelBottom","PanelLeft","PanelLeftOpen","PanelRight","Paperclip","Pause","Pencil","PencilLine","PictureInPicture2","Pin","PinOff","Play","Plug","Plus","Power","Puzzle","QrCode","Redo2","RefreshCw","RotateCcw","RotateCw","Save","Scissors","ScrollText","Search","Send","Settings","Settings2","Share2","ShieldAlert","ShieldCheck","ShieldOff","Smartphone","Sparkles","Square","SquareDashedMousePointer","SquareTerminal","Sun","Table","Tag","Tags","Terminal","TerminalSquare","TextSelect","Trash2","TriangleAlert","TriangleAlertIcon","Undo2","Unlink","Upload","Usb","UserPlus","UserRound","Users","Volume1","Volume2","VolumeX","Wifi","WifiOff","WrapText","X","XCircle","XIcon","XSquare","Zap","ZapOff","ZoomIn","ZoomOut"];
+export const FLUENT_NAMES: readonly string[] = ["Activity","AlertCircle","AlertTriangle","AppWindow","ArrowDown","ArrowDownAZ","ArrowDownToLine","ArrowDownUp","ArrowLeft","ArrowRight","ArrowUp","ArrowUpCircle","ArrowUpDown","ArrowUpFromLine","Bell","BellOff","BellRing","Bot","BotMessageSquare","Brain","Bug","CalendarClock","CalendarX2","Check","CheckCircle","CheckCircle2","CheckIcon","ChevronDown","ChevronDownIcon","ChevronLeft","ChevronRight","ChevronRightIcon","ChevronUp","ChevronUpIcon","ChevronsDown","ChevronsDownUp","ChevronsRight","ChevronsUpDown","Circle","CircleCheckIcon","CircleHelp","CircleIcon","CircleX","Clipboard","ClipboardCheck","ClipboardList","ClipboardPaste","Clock","Cloud","CloudOff","Code","Coffee","Columns","Columns2","Columns3","Copy","Cpu","Crosshair","Database","DatabaseZap","Download","ExternalLink","Eye","EyeOff","File","FileArchive","FileCode","FilePen","FilePlus","FilePlus2","FileSearch","FileText","FileType","FileWarning","Filter","FlaskConical","FlipHorizontal","FlipHorizontal2","FlipVertical","FlipVertical2","Folder","FolderOpen","FolderPlus","FolderSearch","FolderSymlink","FolderTree","Gauge","GitBranch","Globe","Grid2x2","GripHorizontal","GripVertical","Hand","HardDrive","Heart","HelpCircle","History","Home","Image","ImageOff","ImagePlus","Info","InfoIcon","Key","KeyRound","Keyboard","Layers","LayoutGrid","Lightbulb","Link","Link2","Link2Off","List","ListChecks","ListFilter","ListOrdered","ListTodo","Loader2","Loader2Icon","Lock","LogIn","LogOut","Maximize","Maximize2","Menu","MessageCircle","MessageSquare","MessageSquarePlus","Mic","MicOff","Minimize","Minimize2","Minus","Monitor","MonitorSmartphone","MonitorX","Moon","MoreHorizontal","MoreVertical","MousePointer2","MousePointerClick","Move","Music","OctagonXIcon","Palette","PanelBottom","PanelLeft","PanelLeftOpen","PanelRight","Paperclip","Pause","Pencil","PencilLine","PictureInPicture2","Pin","PinOff","Play","Plug","Plus","Power","Presentation","Printer","Puzzle","QrCode","Redo2","RefreshCw","RotateCcw","RotateCw","Save","Scissors","ScrollText","Search","Send","Settings","Settings2","Share2","ShieldAlert","ShieldCheck","ShieldOff","SlidersHorizontal","Smartphone","Sparkles","Square","SquareDashedMousePointer","SquareTerminal","Sun","Table","Tablet","Tag","Tags","Terminal","TerminalSquare","TextSelect","Trash2","TriangleAlert","TriangleAlertIcon","Undo2","Unlink","Upload","Usb","UserPlus","UserRound","Users","Volume1","Volume2","VolumeX","Wifi","WifiOff","WrapText","X","XCircle","XIcon","XSquare","Zap","ZapOff","ZoomIn","ZoomOut"];
 
 /** Which names deliberately stay on lucide, and are asserted to be a short list. */
 export const LUCIDE_NAMES: readonly string[] = ["CaseSensitive","FileDiff","FileJson","FolderGit2","GitCommitHorizontal","Github","Hexagon","Network","PowerOff","Regex","ReplaceAll","Scan","ServerOff","Slash","WholeWord"];
@@ -282,6 +290,7 @@ export const ExternalLink = fluentIcon("ExternalLink", D["open"]!);
 export const Eye = fluentIcon("Eye", D["eye"]!);
 export const EyeOff = fluentIcon("EyeOff", D["eye-off"]!);
 export const File = fluentIcon("File", D["document"]!);
+export const FileArchive = fluentIcon("FileArchive", D["folder-zip"]!);
 export const FileCode = fluentIcon("FileCode", D["code"]!);
 export const FilePen = fluentIcon("FilePen", D["document-edit"]!);
 export const FilePlus = fluentIcon("FilePlus", D["document-add"]!);
@@ -343,6 +352,7 @@ export const Maximize2 = fluentIcon("Maximize2", D["arrow-maximize"]!);
 export const Menu = fluentIcon("Menu", D["navigation"]!);
 export const MessageCircle = fluentIcon("MessageCircle", D["chat-empty"]!);
 export const MessageSquare = fluentIcon("MessageSquare", D["chat"]!);
+export const MessageSquarePlus = fluentIcon("MessageSquarePlus", D["chat-add"]!);
 export const Mic = fluentIcon("Mic", D["mic"]!);
 export const MicOff = fluentIcon("MicOff", D["mic-off"]!);
 export const Minimize = fluentIcon("Minimize", D["full-screen-minimize"]!);
@@ -355,6 +365,8 @@ export const Moon = fluentIcon("Moon", D["weather-moon"]!);
 export const MoreHorizontal = fluentIcon("MoreHorizontal", D["more-horizontal"]!);
 export const MoreVertical = fluentIcon("MoreVertical", D["more-vertical"]!);
 export const MousePointer2 = fluentIcon("MousePointer2", D["cursor"]!);
+export const MousePointerClick = fluentIcon("MousePointerClick", D["cursor-click"]!);
+export const Move = fluentIcon("Move", D["arrow-move"]!);
 export const Music = fluentIcon("Music", D["music-note-2"]!);
 export const OctagonXIcon = fluentIcon("OctagonXIcon", D["dismiss-circle"]!);
 export const Palette = fluentIcon("Palette", D["color"]!);
@@ -373,6 +385,8 @@ export const Play = fluentIcon("Play", D["play"]!);
 export const Plug = fluentIcon("Plug", D["plug-connected"]!);
 export const Plus = fluentIcon("Plus", D["add"]!);
 export const Power = fluentIcon("Power", D["power"]!);
+export const Presentation = fluentIcon("Presentation", D["slide-text"]!);
+export const Printer = fluentIcon("Printer", D["print"]!);
 export const Puzzle = fluentIcon("Puzzle", D["puzzle-piece"]!);
 export const QrCode = fluentIcon("QrCode", D["qr-code"]!);
 export const Redo2 = fluentIcon("Redo2", D["arrow-redo"]!);
@@ -390,6 +404,7 @@ export const Share2 = fluentIcon("Share2", D["share"]!);
 export const ShieldAlert = fluentIcon("ShieldAlert", D["shield-error"]!);
 export const ShieldCheck = fluentIcon("ShieldCheck", D["shield-checkmark"]!);
 export const ShieldOff = fluentIcon("ShieldOff", D["shield-dismiss"]!);
+export const SlidersHorizontal = fluentIcon("SlidersHorizontal", D["options"]!);
 export const Smartphone = fluentIcon("Smartphone", D["phone"]!);
 export const Sparkles = fluentIcon("Sparkles", D["sparkle"]!);
 export const Square = fluentIcon("Square", D["square"]!);
@@ -397,6 +412,7 @@ export const SquareDashedMousePointer = fluentIcon("SquareDashedMousePointer", D
 export const SquareTerminal = fluentIcon("SquareTerminal", D["window-console"]!);
 export const Sun = fluentIcon("Sun", D["weather-sunny"]!);
 export const Table = fluentIcon("Table", D["table"]!);
+export const Tablet = fluentIcon("Tablet", D["tablet"]!);
 export const Tag = fluentIcon("Tag", D["tag"]!);
 export const Tags = fluentIcon("Tags", D["tag-multiple"]!);
 export const Terminal = fluentIcon("Terminal", D["window-console"]!);

package/src/web/lib/patch-tab-metadata.ts

@@ -0,0 +1,30 @@
+import { usePanelStore } from "@/stores/panel-store";
+
+/**
+ * Write some keys of a tab's metadata, keeping every other key as the store has it *now*.
+ *
+ * Tab components receive their metadata as a prop, and a prop captured by an effect or a
+ * callback is a snapshot of whatever was current when it last rendered. Spreading that
+ * snapshot back into the store (`{ ...metadata, sessionId }`) silently reverts anything
+ * written since — by another component hosting the same tab, by the panel store's own
+ * activation stamp, or by a second effect in the same commit. Reading at write time is what
+ * makes two writers to one tab safe.
+ */
+export function patchTabMetadata(tabId: string, patch: Record<string, unknown>): void {
+  const store = usePanelStore.getState();
+  const current = store.getPanelForTab(tabId)?.tabs.find((t) => t.id === tabId)?.metadata;
+  store.updateTab(tabId, { metadata: mergeTabMetadata(current, patch) });
+}
+
+/** The pure half: `patch` wins, everything else in `current` is kept. */
+export function mergeTabMetadata(
+  current: Record<string, unknown> | undefined,
+  patch: Record<string, unknown>,
+): Record<string, unknown> {
+  return { ...current, ...patch };
+}
+
+/** The tab's metadata as the store holds it now, or undefined when the tab is gone. */
+export function currentTabMetadata(tabId: string): Record<string, unknown> | undefined {
+  return usePanelStore.getState().getPanelForTab(tabId)?.tabs.find((t) => t.id === tabId)?.metadata;
+}

package/src/web/lib/send-to-chat.ts

@@ -18,6 +18,16 @@ export interface SendToChatDetail {
   projectName?: string | null;
   /** Only the chat tab with this id may consume the event. */
   targetTabId?: string;
+  /**
+   * Send the text as a message right away when the addressed composer is idle and empty;
+   * otherwise it becomes a chip as usual. Only honoured together with `targetTabId`.
+   */
+  autoSend?: boolean;
+}
+
+/** Detail of the ack a composer answers with; `sent` says the text went out as a message. */
+export interface SendToChatAck {
+  sent?: boolean;
 }
 
 /** Wall-clock activation stamp written by the panel store on every tab activation. */
@@ -81,12 +91,16 @@ export function resolveSelectedChatTabId(projectName?: string | null): string |
  *
  * Falls back through: live tab answers the event → tab exists but is not mounted
  * yet, so hand the text over as `pendingMessage` → no chat open at all, open one.
+ *
+ * `newTab` skips the first two: the text always starts a fresh, plain chat as an editable
+ * draft. For a brief that must not land in whatever conversation (or design session) the
+ * user happened to select last.
  */
-export function sendToChat(opts: { text: string; label?: string; projectName?: string | null }): void {
+export function sendToChat(opts: { text: string; label?: string; projectName?: string | null; newTab?: boolean }): void {
   const { text, label, projectName } = opts;
   if (!text.trim()) return;
 
-  const targetTabId = resolveSelectedChatTabId(projectName);
+  const targetTabId = opts.newTab ? null : resolveSelectedChatTabId(projectName);
   const store = usePanelStore.getState();
 
   if (targetTabId) {

package/src/web/lib/sidebar-tabs/tab-registry.ts

@@ -9,6 +9,7 @@ import {
   BotMessageSquare,
   Globe,
   Users,
+  Palette,
 } from "@/lib/icons";
 import type { SidebarActiveTab } from "@/stores/settings-store";
 import type { FeatureBadgeId } from "@/lib/feature-badges";
@@ -35,6 +36,7 @@ export interface SidebarTabDef {
 export const BUILTIN_SIDEBAR_TABS: SidebarTabDef[] = [
   { id: "history", label: "Chat History", shortLabel: "History", icon: BotMessageSquare },
   { id: "teams", label: "Teams", icon: Users, badge: "teams" },
+  { id: "designs", label: "Designs", icon: Palette, badge: "designs" },
   { id: "explorer", label: "Explorer", icon: FolderOpen },
   { id: "search", label: "Search", icon: Search },
   { id: "git", label: "Git", icon: GitBranch },

package/src/web/lib/tab-session-id.ts

@@ -0,0 +1,16 @@
+/**
+ * The chat session a tab is showing, for every tab type that hosts one.
+ *
+ * A design tab embeds a chat session exactly as a chat tab does, so anything that asks
+ * "which tab is this session in?" — focusing an already-open session, unread badges, the
+ * streaming dots, notification clearing — has to ask this instead of testing
+ * `type === "chat"`. A check written against `chat` alone makes a design session look
+ * unopened, and re-opening it then starts a plain chat tab outside design mode.
+ */
+const SESSION_TAB_TYPES: ReadonlySet<string> = new Set(["chat", "design"]);
+
+export function tabSessionId(tab: { type: string; metadata?: Record<string, unknown> } | null | undefined): string | undefined {
+  if (!tab || !SESSION_TAB_TYPES.has(tab.type)) return undefined;
+  const id = tab.metadata?.sessionId;
+  return typeof id === "string" && id ? id : undefined;
+}

package/src/web/lib/tab-type-icons.ts

@@ -7,7 +7,7 @@
  */
 import {
   Terminal, MessageSquare, FileCode, Database, FileDiff, Settings, Puzzle, Sparkles, Users, CircleX,
-  GitCommitHorizontal,
+  GitCommitHorizontal, Palette,
   type LucideIcon,
 } from "@/lib/icons";
 import type { ElementType } from "react";
@@ -35,6 +35,7 @@ export const TAB_TYPE_ICONS: Record<TabType, LucideIcon> = {
   "ai-resource": Sparkles,
   group: Users,
   problems: CircleX,
+  design: Palette,
 };
 
 /** Resolve the icon for a tab type, falling back to a generic glyph. */

package/src/web/stores/panel-store.ts

@@ -28,6 +28,7 @@ import {
 } from "./window-panel-actions";
 import { saveWindowPanels } from "./window-panel-persistence";
 import { useWindowStore } from "@/components/floating-window/window-store";
+import { tabSessionId } from "@/lib/tab-session-id";
 import {
   makeToggleDock,
   makeSetDockVisible,
@@ -509,10 +510,14 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
       // (chat-tab only rewrites metadata, not the tab id), so deriveTabId's
       // chat:{provider}/{sessionId} never matches the live tab. Match on the real
       // sessionId instead so re-opening from history focuses the tab, not a dupe.
+      //
+      // A design tab hosts a chat session too, and it is the session's real home: opening a
+      // design session from history or a notification must focus its design tab, never
+      // start a plain chat that has left design mode.
       if (tabDef.type === "chat" && tabDef.metadata?.sessionId) {
         const sid = tabDef.metadata.sessionId;
         for (const p of Object.values(get().panels)) {
-          const existing = p.tabs.find((t) => t.type === "chat" && t.metadata?.sessionId === sid);
+          const existing = p.tabs.find((t) => tabSessionId(t) === sid);
           if (existing) {
             rememberChatProvider(existing);
             set((s) => ({
@@ -528,6 +533,29 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         }
       }
 
+      // One tab per design, across ALL panels. Matched by slug *and* project, because the
+      // panels map also holds the keep-alive layouts of other projects, whose designs can
+      // share a slug with this one.
+      if (tabDef.type === "design") {
+        const slug = tabDef.metadata?.designSlug;
+        const project = tabDef.projectId ?? tabDef.metadata?.projectName;
+        for (const p of Object.values(get().panels)) {
+          const existing = p.tabs.find((t) => t.type === "design" && t.metadata?.designSlug === slug
+            && (t.projectId ?? t.metadata?.projectName) === project);
+          if (existing) {
+            set((s) => ({
+              focusedPanelId: focusAfterActivate(p.id),
+              panels: {
+                ...s.panels,
+                [p.id]: { ...p, tabs: stampActive(p.tabs, existing.id), activeTabId: existing.id, tabHistory: pushHistory(p.tabHistory, existing.id) },
+              },
+            }));
+            persist();
+            return existing.id;
+          }
+        }
+      }
+
       // Singleton check — focus existing across ALL panels
       if (SINGLETON_TYPES.has(tabDef.type)) {
         for (const p of Object.values(get().panels)) {

package/src/web/stores/panel-utils.ts

@@ -41,8 +41,12 @@ export const DOCK_ALLOWED_TAB_TYPES = new Set<TabType>(["terminal", "system-moni
  * Single source for both enforcement points: the action that performs the detach, and the
  * context-menu item that offers it. Split across two files, adding a window kind meant
  * remembering both, and one of them was always the one that got forgotten.
+ *
+ * `design` is here for a different reason: its canvas accepts bridge messages only from an
+ * iframe whose parent is the main window, and a pop-out would make the iframe's parent the
+ * picture-in-picture window instead.
  */
-export const NON_POPPABLE_TAB_TYPES = new Set<TabType>(["system-monitor", "settings", "problems"]);
+export const NON_POPPABLE_TAB_TYPES = new Set<TabType>(["system-monitor", "settings", "problems", "design"]);
 
 /**
  * Prefix of the reserved panel IDs that host tabs detached into a floating window.
@@ -232,6 +236,9 @@ export function deriveTabId(type: TabType, metadata?: Record<string, unknown>):
       return "problems";
     case "group":
       return `group:${metadata?.groupId ?? "unknown"}`;
+    // One tab per design: the chat, the canvas and its history all belong to the design.
+    case "design":
+      return `design:${metadata?.designSlug ?? "unknown"}`;
     default:
       return `${type}:${randomId()}`;
   }