From 56c31dcd1d76621c644c0fcb065163a6442487b6 Mon Sep 17 00:00:00 2001
From: richard-epsilla <richard@epsilla.com>
Date: Thu, 13 Aug 2026 01:42:31 -0700
Subject: [PATCH] fix(slides): the skeleton sat beside an empty rail, and My
 slides had a dead column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The skeleton rendered INSIDE the canvas, so the real rail stayed mounted next
to it holding nothing — a wide white gutter, then a second rail of placeholder
thumbs. With no deck there is nothing for the real rail to hold, so the
skeleton now stands in for the whole body.

Dropped the Access column from My slides. It rendered an em dash on every row
because this build has no sharing and no collaborators: a column asking a
question the product does not answer.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013DCjqvx3L4VKAPnFaPe7YJ
---
 kits/slides/app/src/components/ChatPanel.jsx |  4 +--
 kits/slides/app/src/pages/DeckPage.jsx       | 34 +++++++++++---------
 kits/slides/app/src/pages/Landing.jsx        | 11 ++-----
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/kits/slides/app/src/components/ChatPanel.jsx b/kits/slides/app/src/components/ChatPanel.jsx
index b3e8a86..8facac8 100644
--- a/kits/slides/app/src/components/ChatPanel.jsx
+++ b/kits/slides/app/src/components/ChatPanel.jsx
@@ -52,8 +52,8 @@ function turnsToMessages(turns) {
   return m;
 }
 
-export function ChatColumn({ deckId, seed, title, copilotBuilding, collapsed, onToggle, onDeckMaybeChanged,
-                             onSessionStarted, width }) {
+export function ChatColumn({ deckId, seed, template, title, copilotBuilding, collapsed, onToggle,
+                             onDeckMaybeChanged, onSessionStarted, width }) {
   const [messages, setMessages] = useState([]);
   const [draft, setDraft] = useState('');
   const [attaching, setAttaching] = useState(false);
diff --git a/kits/slides/app/src/pages/DeckPage.jsx b/kits/slides/app/src/pages/DeckPage.jsx
index f16d545..8ca1b8b 100644
--- a/kits/slides/app/src/pages/DeckPage.jsx
+++ b/kits/slides/app/src/pages/DeckPage.jsx
@@ -274,6 +274,13 @@ export function DeckPage({ id: routeId, seed, template }) {
                     exporting={exporting} peers={collab.peers} live={collab.live}
                     saveState={saveState} copilotBusy={copilotBusy} />
         <div className="sl-body">
+          {/* No deck yet: the skeleton IS the body. Rendering it inside the canvas left
+              the real rail sitting empty beside it — two rails and a white gutter. */}
+          {!deck && (!noDeck || noDeck.working) ? (
+            <SkeletonDeck note={noDeck?.working
+              ? (tplName ? `Designing your deck in ${tplName}…` : 'Designing your deck…')
+              : 'Loading deck…'} />
+          ) : (<>
           <aside className="sl-rail scroll" ref={railRef}>
             {slides.map((s, i) => (
               <button key={s.id} className={'sl-rail-item' + (i === sel ? ' active' : '')}
@@ -296,25 +303,21 @@ export function DeckPage({ id: routeId, seed, template }) {
                 onDragState={(elId, frame) => collab.setDrag(elId, frame, slide.id)}
                 peers={collab.peers}
               />
+            ) : deck ? (
+              <div className="empty-note" style={{ paddingTop: 80 }}>This deck has no slides.</div>
             ) : (
-              deck ? (
-                <div className="empty-note" style={{ paddingTop: 80 }}>This deck has no slides.</div>
-              ) : noDeck && !noDeck.working ? (
-                <div className="empty-note" style={{ paddingTop: 80 }}>
-                  <div>{noDeck.text}</div>
-                  {noDeck.detail && <pre className="deck-empty-detail">{noDeck.detail}</pre>}
-                  <div style={{ marginTop: 14 }}>
-                    Ask the copilot again on the right — the conversation is still here.
-                  </div>
+              // The only case left here: a turn finished without writing a deck. Its own last
+              // words are the only honest explanation we have.
+              <div className="empty-note" style={{ paddingTop: 80 }}>
+                <div>{noDeck?.text}</div>
+                {noDeck?.detail && <pre className="deck-empty-detail">{noDeck.detail}</pre>}
+                <div style={{ marginTop: 14 }}>
+                  Ask the copilot again on the right — the conversation is still here.
                 </div>
-              ) : (
-                // Still coming: show the shape of a deck rather than a sentence in an empty pane.
-                <SkeletonDeck note={noDeck?.working
-                  ? (tplName ? `Designing your deck in ${tplName}…` : 'Designing your deck…')
-                  : 'Loading deck…'} />
-              )
+              </div>
             )}
           </div>
+          </>)}
         </div>
       </div>
 
@@ -322,6 +325,7 @@ export function DeckPage({ id: routeId, seed, template }) {
       <ChatColumn
         deckId={id}
         seed={seed}
+        template={template}
         title={deck?.meta?.title || 'Copilot'}
         copilotBuilding={copilotBusy}
         collapsed={false}
diff --git a/kits/slides/app/src/pages/Landing.jsx b/kits/slides/app/src/pages/Landing.jsx
index 0237723..15479b2 100644
--- a/kits/slides/app/src/pages/Landing.jsx
+++ b/kits/slides/app/src/pages/Landing.jsx
@@ -120,12 +120,6 @@ function ViewToggle({ value, onChange }) {
 const AV_COLORS = ['#4F46E5', '#7C3AED', '#DB2777', '#D97706', '#059669', '#2563EB'];
 function colorFor(id) { let h = 0; for (const c of String(id)) h = (h * 31 + c.charCodeAt(0)) >>> 0; return AV_COLORS[h % AV_COLORS.length]; }
 function initialOf(n) { return String(n || '?').trim().charAt(0).toUpperCase() || '?'; }
-function AccessStack({ me }) {
-  if (!me?.id) return <span className="gt-last">—</span>;
-  const name = me.display_name || me.name || me.email || 'You';
-  return <span className="acc-stack"><span className="acc-av" style={{ background: colorFor(me.id) }} title={`${name} (you)`}>{initialOf(name)}</span></span>;
-}
-
 const VIEW_KEY = 'slides.decks.view';
 
 export function LandingPage() {
@@ -298,7 +292,7 @@ export function LandingPage() {
               )}
             </div>
             {decks === null ? (
-              <div className="gtable-wrap"><table className="gtable"><thead><tr><th>Name</th><th className="col-last">Last viewed</th><th className="col-access">Access</th><th className="gt-actions" /></tr></thead><tbody><SkeletonTableRows count={4} /></tbody></table></div>
+              <div className="gtable-wrap"><table className="gtable"><thead><tr><th>Name</th><th className="col-last">Last viewed</th><th className="gt-actions" /></tr></thead><tbody><SkeletonTableRows count={4} /></tbody></table></div>
             ) : decks.length === 0 ? (
               <div className="card empty-note">No slides yet. Create a deck from the prompt above or pick a template.</div>
             ) : deckMatches.length === 0 ? (
@@ -318,13 +312,12 @@ export function LandingPage() {
               </div>
             ) : (
               <div className="gtable-wrap"><table className="gtable">
-                <thead><tr><th>Name</th><th className="col-last">Last viewed</th><th className="col-access">Access</th><th className="gt-actions" /></tr></thead>
+                <thead><tr><th>Name</th><th className="col-last">Last viewed</th><th className="gt-actions" /></tr></thead>
                 <tbody>
                   {deckMatches.map((d) => (
                     <tr key={d.id} tabIndex={0} onClick={() => { if (editingId !== d.id) openDeck(d.id); }} onKeyDown={(e) => { if (e.key === 'Enter' && editingId !== d.id) openDeck(d.id); }}>
                       <td><span className="gt-name"><span className="gt-thumb"><DeckThumb id={d.id} /></span>{editingId === d.id ? renameField(d) : <span className="gcard-name" title={d.name}>{d.name}</span>}</span></td>
                       <td className="gt-last col-last">{relativeTime(viewed[d.id]) || '—'}</td>
-                      <td className="col-access"><AccessStack me={me} /></td>
                       <td className="gt-actions">{rowActions(d)}</td>
                     </tr>
                   ))}