feat(app-mode): unified chrome — shared sidebar + panel-matched cells

- Share SideToolbar with Graph mode (App Mode previously had a
  custom subset)
- Panel-matched chrome across mode toggle, builder, share,
  feedback, and action cells; real Run pill in welcome
- Decorative dot grid on the canvas background
- Simplify info cell; round output thumbnails

src/components/appMode/layout/LayoutView.vue

@@ -46,7 +46,6 @@ import { useAppModeStore } from '@/stores/appModeStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isCloud } from '@/platform/distribution/types'
 import {
   openShareDialog,
@@ -65,26 +64,12 @@ const appModeStore = useAppModeStore()
 const { enterBuilder } = appModeStore
 const { hasNodes } = storeToRefs(appModeStore)
 const commandStore = useCommandStore()
-const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
 const { toastErrorHandler } = useErrorHandling()
 const { flags } = useFeatureFlags()
 
-const isAssetsActive = computed(
-  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'assets'
-)
-const isAppsActive = computed(
-  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'apps'
-)
-
 const showShare = computed(() => isCloud && flags.workflowSharingEnabled)
 
-function openAssets() {
-  void commandStore.execute('Workspace.ToggleSidebarTab.assets')
-}
-function showApps() {
-  void commandStore.execute('Workspace.ToggleSidebarTab.apps')
-}
 function openShare() {
   openShareDialog().catch(toastErrorHandler)
 }
@@ -384,18 +369,6 @@ function actionDownload() {
   if (url) downloadFile(url)
 }
 
-/** Middle-truncate a filename like a hash: `first…last`. Preserves the
- *  extension when present. 4/4 chars each side matches what the user
- *  asked for ("1234…5678"). */
-function truncateMiddle(name: string, head = 4, tail = 4): string {
-  if (!name) return ''
-  const dot = name.lastIndexOf('.')
-  const ext = dot > 0 && dot > name.length - 6 ? name.slice(dot) : ''
-  const base = ext ? name.slice(0, dot) : name
-  if (base.length <= head + tail + 1) return name
-  return `${base.slice(0, head)}…${base.slice(-tail)}${ext}`
-}
-
 const infoName = computed(() => {
   const sel = selectedHistory.value
   if (!sel) return ''
@@ -425,7 +398,12 @@ watch(
 const infoDims = computed(() =>
   dimensions.value ? `${dimensions.value.w}x${dimensions.value.h}` : ''
 )
-const infoLabel = computed(() => truncateMiddle(infoName.value))
+// Show only the file extension in the cell (e.g. "png"); full filename
+// stays in the tooltip/aria-label so nothing is lost.
+const infoLabel = computed(() => {
+  const dotIdx = infoName.value.lastIndexOf('.')
+  return dotIdx >= 0 ? infoName.value.slice(dotIdx + 1).toLowerCase() : ''
+})
 const infoTitle = computed(() =>
   [infoDims.value, infoName.value].filter(Boolean).join(' ')
 )
@@ -461,45 +439,52 @@ const historyThumbMap = computed(
 const cells = computed<LayoutCellPlacement[]>(() => {
   const out: LayoutCellPlacement[] = []
 
-  let row = 1
-  if (enableAppBuilder.value) {
-    out.push({ id: 'builder', col: 1, row: row++, kind: 'system-builder' })
-  }
-  if (showShare.value) {
-    out.push({ id: 'share', col: 1, row: row++, kind: 'system-share' })
-  }
-  out.push({ id: 'assets', col: 1, row: row++, kind: 'system-assets' })
-  out.push({ id: 'apps', col: 1, row: row++, kind: 'system-apps' })
-
+  // Row 1, left-to-right: App/Graph mode toggle, then optional builder +
+  // optional share. Toggle is anchored at col 1 so it doesn't shift when
+  // builder / share visibility changes; builder + share slot in to its
+  // right.
   out.push({
     id: 'mode-toggle',
-    col: 2,
+    col: 1,
     row: 1,
     colSpan: 2,
     kind: 'system-mode-toggle'
   })
+  let col = 3
+  if (enableAppBuilder.value) {
+    out.push({ id: 'builder', col: col++, row: 1, kind: 'system-builder' })
+  }
+  if (showShare.value) {
+    out.push({ id: 'share', col: col++, row: 1, kind: 'system-share' })
+  }
 
-  // Action cells on row 1, right of the mode toggle. Only mount when
+  // Action cells on row 1, right of builder/share. Only mount when
   // a history item is selected (mirrors LinearPreview's top bar).
   if (hasSelection.value) {
-    out.push({ id: 'action-rerun', col: 4, row: 1, kind: 'action-rerun' })
+    const actionStartCol = col
+    out.push({
+      id: 'action-rerun',
+      col: actionStartCol,
+      row: 1,
+      kind: 'action-rerun'
+    })
     out.push({
       id: 'action-reuse-params',
-      col: 5,
+      col: actionStartCol + 1,
       row: 1,
       kind: 'action-reuse-params'
     })
     out.push({
       id: 'action-download',
-      col: 6,
+      col: actionStartCol + 2,
       row: 1,
       kind: 'action-download'
     })
     out.push({
       id: 'action-info',
-      col: 7,
+      col: actionStartCol + 3,
       row: 1,
-      colSpan: 5,
+      colSpan: 3,
       kind: 'action-info'
     })
   }
@@ -512,9 +497,8 @@ const cells = computed<LayoutCellPlacement[]>(() => {
     kind: 'system-feedback'
   })
 
-  // History thumbs: one per row, stacking down column 1 immediately
-  // below the icon stack (no gap).
-  const thumbStartRow = row
+  // History thumbs stack down column 1 starting below the chrome row.
+  const thumbStartRow = 2
   for (let i = 0; i < historyThumbs.value.length; i++) {
     out.push({
       id: historyThumbs.value[i].id,
@@ -554,20 +538,6 @@ const cells = computed<LayoutCellPlacement[]>(() => {
           :on-activate="openShare"
           @pointerenter="prefetchShareDialog"
         />
-        <IconCell
-          v-else-if="cell.kind === 'system-assets'"
-          icon="icon-[comfy--image-ai-edit]"
-          :label="t('sideToolbar.mediaAssets.title')"
-          :active="isAssetsActive"
-          :on-activate="openAssets"
-        />
-        <IconCell
-          v-else-if="cell.kind === 'system-apps'"
-          icon="icon-[lucide--panels-top-left]"
-          :label="t('linearMode.appModeToolbar.apps')"
-          :active="isAppsActive"
-          :on-activate="showApps"
-        />
         <ModeToggleCell v-else-if="cell.kind === 'system-mode-toggle'" />
         <IconCell
           v-else-if="cell.kind === 'action-rerun'"
@@ -639,6 +609,16 @@ const cells = computed<LayoutCellPlacement[]>(() => {
   position: absolute;
   inset: 0;
   background-color: var(--layout-color-canvas);
+  /* Form-builder dot grid — decorative. Not aligned with LayoutGrid
+     cell positions (the grid's gaps expand to absorb viewport slack,
+     so cell corners drift relative to any fixed-pitch pattern). */
+  background-image: radial-gradient(
+    circle,
+    var(--layout-color-grid-dot) 1px,
+    transparent 1.5px
+  );
+  background-size: var(--layout-dot-grid-size) var(--layout-dot-grid-size);
+  background-position: 0 0;
   /* Clip LinearPreview's inner absolute-positioned layers (image,
      skeletons, welcome) so they can never paint above the layout-view
      box — which sits below the top workflow-tabs bar. */
@@ -673,6 +653,24 @@ const cells = computed<LayoutCellPlacement[]>(() => {
   pointer-events: auto;
 }
 
+/* Panel-matched chrome: every system + action cell borrows
+   FloatingPanel's surface styling (1px hairline border + 10px
+   radius) so the whole App Mode chrome reads as one family. */
+.layout-view :deep(.layout-cell[data-cell-kind='system-mode-toggle']),
+.layout-view :deep(.layout-cell[data-cell-kind='system-builder']),
+.layout-view :deep(.layout-cell[data-cell-kind='system-share']),
+.layout-view :deep(.layout-cell[data-cell-kind='system-feedback']),
+.layout-view :deep(.layout-cell[data-cell-kind='action-rerun']),
+.layout-view :deep(.layout-cell[data-cell-kind='action-reuse-params']),
+.layout-view :deep(.layout-cell[data-cell-kind='action-download']),
+.layout-view :deep(.layout-cell[data-cell-kind='action-info']),
+.layout-view :deep(.layout-cell[data-cell-kind='output-thumb']) {
+  box-sizing: border-box;
+  border: 1px solid rgb(255 255 255 / 0.08);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
 .info-cell {
   display: flex;
   width: 100%;

src/components/appMode/layout/cells/FeedbackCell.vue

@@ -45,7 +45,7 @@ const { t } = useI18n()
   display: flex;
   flex-direction: column;
   font-size: var(--layout-font-md);
-  line-height: 1.3;
+  line-height: 1.1;
   color: var(--layout-color-text-muted);
   white-space: nowrap;
   overflow: hidden;
@@ -65,4 +65,12 @@ const { t } = useI18n()
   background-color: var(--layout-color-cell-hover) !important;
   color: var(--layout-color-text) !important;
 }
+
+/* Match the 20px icon size of the Builder / Share IconCells so all
+   chrome icons read at the same scale. */
+.feedback-cell :deep(button i),
+.feedback-cell :deep(a i) {
+  width: 20px;
+  height: 20px;
+}
 </style>

src/components/appMode/layout/cells/ModeToggleCell.vue

@@ -37,4 +37,12 @@ import WorkflowActionsDropdown from '@/components/common/WorkflowActionsDropdown
   width: 100%;
   padding: 0 !important;
 }
+
+/* Match the 20px icon size of the Builder / Share / Feedback chrome.
+   Targets the leading App/Graph icon (m-1 is the icon-button wrapper)
+   without touching the dropdown chevron. */
+.mode-toggle-cell :deep(button.m-1 > i) {
+  width: 20px;
+  height: 20px;
+}
 </style>

src/components/appMode/layout/design-tokens.css

@@ -26,6 +26,7 @@
   --layout-gutter-min: 8px;        /* minimum gap between cells */
   --layout-outer-padding: 16px;    /* margin from viewport edge */
   --layout-cell-radius: 4px;       /* cell background corner radius */
+  --layout-dot-grid-size: 24px;    /* pitch of the canvas dot grid (decorative) */
 
   /* --- Colors ---------------------------------------------------------
      Neutral palette follows Comfy's existing tokens. Accent is used
@@ -40,6 +41,13 @@
   --layout-color-accent-hover: #2c974b;
   --layout-color-accent-active: #298e46;
   --layout-color-accent-foreground: #ffffff;
+  /* Form-builder-style dot pattern on the canvas. Muted text color at
+     low alpha so it reads as texture, not content. */
+  --layout-color-grid-dot: color-mix(
+    in srgb,
+    var(--layout-color-text-muted) 35%,
+    transparent
+  );
 
   /* --- Motion --------------------------------------------------------- */
   --layout-transition-duration: 150ms;

src/renderer/extensions/linearMode/LinearWelcome.test.ts

@@ -37,6 +37,12 @@ vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   })
 }))
 
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: vi.fn()
+  })
+}))
+
 const i18n = createI18n({ legacy: false, locale: 'en', missingWarn: false })
 
 function renderComponent(

src/renderer/extensions/linearMode/LinearWelcome.vue

@@ -5,6 +5,7 @@ import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemp
 import { useAppModeStore } from '@/stores/appModeStore'
 import Button from '@/components/ui/button/Button.vue'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import AppModeWordmark from './AppModeWordmark.vue'
@@ -18,6 +19,20 @@ const isAppDefault = computed(
   () => workflowStore.activeWorkflow?.initialMode === 'app'
 )
 const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
+
+// Same command the corner RunCell dispatches. Shift-click queues to
+// the front of the line; plain click appends.
+const commandStore = useCommandStore()
+async function runFromPill(e: MouseEvent) {
+  const commandId = e.shiftKey ? 'Comfy.QueuePromptFront' : 'Comfy.QueuePrompt'
+  try {
+    await commandStore.execute(commandId, {
+      metadata: { subscribe_to_run: false, trigger_source: 'linear' }
+    })
+  } catch (error) {
+    console.error('[LinearWelcome] Queue prompt failed:', error)
+  }
+}
 </script>
 
 <template>
@@ -47,15 +62,18 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
         <p class="mt-0 text-base-foreground">
           <i18n-t keypath="linearMode.welcome.getStarted" tag="span">
             <template #runButton>
-              <span
-                class="mx-1 inline-flex -translate-y-0.5 transform cursor-default items-center rounded-sm px-3 py-1 text-base font-medium"
+              <button
+                type="button"
+                class="mx-1 inline-flex translate-y-px transform cursor-pointer items-center gap-2 rounded-md border-0 px-4 py-1.5 text-xl font-medium outline-none focus:outline-none"
                 :style="{
                   backgroundColor: 'var(--layout-color-accent)',
                   color: 'var(--layout-color-accent-foreground)'
                 }"
+                @click="runFromPill"
               >
+                <i class="icon-[lucide--play] size-5" />
                 {{ t('menu.run') }}
-              </span>
+              </button>
             </template>
           </i18n-t>
         </p>

src/views/LinearView.vue

@@ -11,6 +11,7 @@ import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 import LayoutView from '@/components/appMode/layout/LayoutView.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import ErrorOverlay from '@/components/error/ErrorOverlay.vue'
+import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
@@ -119,9 +120,34 @@ function dragDrop(e: DragEvent) {
     </div>
     <div
       v-if="showLayoutView"
-      class="relative h-[calc(100%-var(--workflow-tabs-height))] w-full"
+      class="flex h-[calc(100%-var(--workflow-tabs-height))] w-full"
     >
-      <LayoutView />
+      <SideToolbar />
+      <Splitter
+        v-if="activeTab"
+        class="flex-1 border-none bg-transparent"
+        state-key="Comfy.LinearView.SidebarPanelSplitter"
+        state-storage="local"
+        @resizestart="$event.originalEvent.preventDefault()"
+      >
+        <SplitterPanel
+          :size="SIDE_PANEL_SIZE"
+          :min-size="SIDEBAR_MIN_SIZE"
+          class="min-w-78 overflow-hidden"
+        >
+          <div
+            class="size-full overflow-x-hidden border-r border-border-subtle"
+          >
+            <ExtensionSlot :extension="activeTab" />
+          </div>
+        </SplitterPanel>
+        <SplitterPanel :size="100 - SIDE_PANEL_SIZE" class="relative">
+          <LayoutView />
+        </SplitterPanel>
+      </Splitter>
+      <div v-else class="relative flex-1">
+        <LayoutView />
+      </div>
     </div>
     <Splitter
       v-else