block · loganj · Mar 29, 2026 · Mar 29, 2026
@@ -261,6 +261,9 @@ see-also:
 - <a id="E-PENPAL-HOME-SIDEBAR"></a>**E-PENPAL-HOME-SIDEBAR**: In home mode (no active project), `Layout.tsx` renders a sidebar tree with: ⌂ header with "+" add button and sort toggle, expandable workspace items (with child projects), standalone project items as top-level peers, and global "In Review" / "Recent" `NavLink`s in a global nav section. Visual dividers (`.home-section-divider`) separate the workspaces section, standalone projects section, and global navigation section; sections with no items are omitted along with their dividers. Workspace items show agent dots when any child project has `agentConnected`. Projects show: name (with branch as tooltip), agent dot, and expandable worktree children (when multiple worktrees exist). Non-main worktrees display a worktree icon; the main worktree does not. State: `expandedWorkspaces` and `expandedWorktreeProjects` `Set<string>`. Clicking a project navigates to `/project/{qn}`. `useProjectSort` hook controls ordering; projects with zero files sort last and are visually dimmed (`.deemphasized` class).
   ← [P-PENPAL-HOME](PRODUCT.md#P-PENPAL-HOME), [P-PENPAL-HOME-TREE](PRODUCT.md#P-PENPAL-HOME-TREE), [P-PENPAL-HOME-PROJECT-ITEM](PRODUCT.md#P-PENPAL-HOME-PROJECT-ITEM), [P-PENPAL-HOME-NAVIGATE](PRODUCT.md#P-PENPAL-HOME-NAVIGATE)
 
+- <a id="E-PENPAL-FE-HOME-LABEL"></a>**E-PENPAL-FE-HOME-LABEL**: When `isProjectMode` is false (home screen), the sidebar home header renders the text "Home" in a `<span class="home-label">` next to the ⌂ icon. The label inherits the header's font weight and uses `margin-right: auto` to push action buttons to the right side.
+  ← [P-PENPAL-HOME-LABEL](PRODUCT.md#P-PENPAL-HOME-LABEL)
+
 - <a id="E-PENPAL-SORT"></a>**E-PENPAL-SORT**: `useProjectSort` hook uses `useSyncExternalStore` backed by localStorage key `penpal-project-sort` (default `'alpha'`). Subscribes to `storage` events for cross-tab sync. Home sidebar sorts by `localeCompare` for alpha or uses server order (sorted by `cache.ProjectsSortedByModTime()`) for recent. Projects with `fileCount === 0` always sort last and get `.deemphasized` styling. The sort toggle in the home sidebar header switches between the two modes.
   ← [P-PENPAL-SORT](PRODUCT.md#P-PENPAL-SORT)
 

@@ -120,6 +120,8 @@ The home view is the top-level navigation state. It shows all workspaces and sta
 
 - <a id="P-PENPAL-HOME"></a>**P-PENPAL-HOME**: The home view sidebar shows a flat list of workspaces, standalone projects, and global navigation links (In Review, Recent). A ⌂ icon header identifies the view. A "+" button allows adding new workspaces or standalone projects.
 
+- <a id="P-PENPAL-HOME-LABEL"></a>**P-PENPAL-HOME-LABEL**: When on the home screen, the word "Home" appears next to the ⌂ icon at the top of the sidebar.
+
 - <a id="P-PENPAL-HOME-TREE"></a>**P-PENPAL-HOME-TREE**: Workspaces are expandable tree items. Expanding a workspace reveals its child projects. Standalone projects appear as top-level peers of workspaces, not nested under any workspace. Visual dividers separate the workspaces section, standalone projects section, and global navigation section. Sections with no items are not shown (and their dividers are omitted). Global In Review and Recent links appear in the global navigation section. The In Review link shows a right-aligned count (matching the project view's source header count style) of all files currently in review across all projects; the link is dimmed when the count is zero.
 
 - <a id="P-PENPAL-HOME-PROJECT-ITEM"></a>**P-PENPAL-HOME-PROJECT-ITEM**: Each project in the home tree shows: project name and agent dot (when an agent is active). No file counts or review counts are shown on individual project items. Git branch is available as a tooltip. Multi-worktree projects are expandable, showing each worktree as a child item. Non-main worktrees display a worktree icon; the main worktree does not. Git branch is shown as a tooltip on each worktree. The tree does not use vertical guide lines or dirty status indicators.

@@ -99,6 +99,7 @@ see-also:
 | View Tracking (E-PENPAL-ACTIVITY) | — | — | — | view-tracking.spec.ts |
 | File Handler (P-PENPAL-FILE-HANDLER) | — | — | api_manage_test.go | — |
 | Source Disambiguation (P-PENPAL-SRC-DISAMBIG) | — | Layout.test.tsx | — | — |
+| Home Label (P-PENPAL-HOME-LABEL) | — | Layout.test.tsx | — | — |
 
 ## Known Coverage Gaps
 

@@ -112,6 +112,20 @@ describe('Layout', () => {
     expect(screen.getByText('In Review')).toBeInTheDocument();
   });
 
+  // E-PENPAL-FE-HOME-LABEL: "Home" label appears on home screen sidebar
+  it('shows "Home" label next to house icon on home screen', async () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Layout />
+      </MemoryRouter>,
+    );
+
+    const sidebar = screen.getByTestId('sidebar');
+    const homeLabel = sidebar.querySelector('.home-label');
+    expect(homeLabel).toBeInTheDocument();
+    expect(homeLabel).toHaveTextContent('Home');
+  });
+
   it('renders theme toggle', () => {
     render(
       <MemoryRouter>

@@ -1086,8 +1086,10 @@ export default function Layout() {
         ) : (
           <>
             {/* Home view sidebar */}
+            {/* E-PENPAL-FE-HOME-LABEL: show "Home" label next to house icon on home screen */}
             <div className="sidebar-home-header">
               <span className="home-icon">⌂</span>
+              <span className="home-label">Home</span>
               <button
                 title={`Sort: ${sortOrder === 'alpha' ? 'A→Z' : 'Recent'}`}
                 onClick={toggleSort}

@@ -448,6 +448,13 @@ a:hover { text-decoration: underline; }
   font-weight: normal;
   letter-spacing: normal;
 }
+/* E-PENPAL-FE-HOME-LABEL */
+.sidebar-home-header .home-label {
+  margin-right: auto;
+  font-size: 1.15em;
+  text-transform: none;
+  letter-spacing: normal;
+}
 .sidebar-home-header button {
   background: none;
   border: none;