@@ -19,6 +19,7 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { SearchBox } from '@/components/SearchBox';
 import { GitHubIcon } from '@/components/icons/GitHubIcon';
+import { SlackIcon } from '@/components/icons/SlackIcon';
 import { useAuth } from '@/hooks/useAuth';
 
 const GITHUB_URL = 'https://github.com/CodeForPhilly';
@@ -192,12 +193,26 @@ const navLinkClass = ({ isActive }: { isActive: boolean }) =>
     isActive ? 'text-primary' : 'text-muted-foreground'
   }`;
 
+function SlackLink() {
+  return (
+    // A plain anchor: /chat is a server redirect the router can't resolve
+    // (specs/screens/chat.md).
+    <Button asChild variant="ghost" size="icon-sm">
+      <a
+        href="/chat"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Join Code for Philly on Slack (opens in new tab)"
+      >
+        <SlackIcon />
+      </a>
+    </Button>
+  );
+}
+
 function GitHubLink() {
   return (
-    // Desktop-only: between md and lg the header has no room for it (the
-    // utility cluster would push "Help Wanted" onto two lines); the mobile
-    // sheet carries its own GitHub row.
-    <Button asChild variant="ghost" size="icon-sm" className="hidden lg:inline-flex">
+    <Button asChild variant="ghost" size="icon-sm">
       <a
         href={GITHUB_URL}
         target="_blank"
@@ -245,7 +260,7 @@ export function AppHeader() {
             flex/gap spacing moves to the <ul>; the <li>s contribute none. */}
         <nav
           aria-label="Primary navigation"
-          className="hidden md:block ml-4 flex-1"
+          className="hidden lg:block ml-4 flex-1"
         >
           <ul className="flex items-center gap-2">
             <li>
@@ -274,12 +289,13 @@ export function AppHeader() {
           </ul>
         </nav>
 
-        {/* Desktop utility cluster: GitHub, search, auth, then the Volunteer
+        {/* Desktop utility cluster: Slack, GitHub, search, auth, then the Volunteer
             CTA pinned rightmost (specs/behaviors/app-shell.md). */}
         <nav
           aria-label="Utility"
-          className="hidden md:flex items-center gap-2 ml-auto"
+          className="hidden lg:flex items-center gap-2 ml-auto"
         >
+          <SlackLink />
           <GitHubLink />
           <SearchBox />
           <AuthControls />
@@ -293,7 +309,7 @@ export function AppHeader() {
         </nav>
 
         {/* Mobile: auth + hamburger */}
-        <div className="flex md:hidden items-center gap-2 ml-auto">
+        <div className="flex lg:hidden items-center gap-2 ml-auto">
           <AuthControls />
           <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
             <SheetTrigger asChild>
@@ -392,6 +408,18 @@ export function AppHeader() {
                 </ul>
                 <Separator />
                 <ul className="flex flex-col gap-2">
+                  <li>
+                    <a
+                      href="/chat"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block text-sm font-medium text-muted-foreground hover:text-primary"
+                      onClick={() => setMobileOpen(false)}
+                    >
+                      Slack
+                      <span className="sr-only"> (opens in new tab)</span>
+                    </a>
+                  </li>
                   <li>
                     <a
                       href={GITHUB_URL}
 
@@ -0,0 +1,15 @@
+/** Slack mark (monochrome), sized to sit inline with text and icon buttons. */
+export function SlackIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+    </svg>
+  );
+}
@@ -1,9 +1,10 @@
 ---
-status: in-progress
+status: done
 depends: [chat-redirect]
 specs:
   - specs/screens/chat.md
 issues: [230]
+pr: 233
 ---
 
 # Plan: In-app links to /chat navigate to the server
@@ -36,10 +37,10 @@ a lint rule rejects router links whose literal target starts with `/chat`,
 
 ## Validation
 
-- [ ] `npm run type-check && npm run lint && npm test` clean.
-- [ ] The rule flags the five links before the fix (checked by running
+- [x] `npm run type-check && npm run lint && npm test` clean.
+- [x] The rule flags the five links before the fix (checked by running
   lint against the unfixed tree).
-- [ ] In the built app, clicking footer "Slack" leaves the SPA for the
+- [x] In the built app, clicking footer "Slack" leaves the SPA for the
   Slack SSO start URL instead of rendering the 404 page.
 
 ## Risks / unknowns
@@ -49,4 +50,14 @@ a lint rule rejects router links whose literal target starts with `/chat`,
 
 ## Notes
 
+- Five links, not the three the issue named: the project page's "Chat
+  Channel" button and the project card's "Chat" had the same bug.
+- Verified on the devbox build of develop at 0911423: clicking the footer
+  "Slack" left the SPA through Slack's SSO start to the production IdP's
+  sign-in (Slack's IdP is codeforphilly.org) instead of the 404 page.
+- The Vite dev server doesn't proxy `/chat`, so this can't be checked
+  under `npm run dev`; it needs the built app.
+
 ## Follow-ups
+
+- **None.**
@@ -0,0 +1,67 @@
+---
+status: done
+depends: [chat-links-full-navigation]
+specs:
+  - specs/behaviors/app-shell.md
+issues: [231]
+pr: 235
+---
+
+# Plan: Slack in the header
+
+## Scope
+
+The only site-wide way into Slack is the footer's "Slack" link, which
+newcomers at a hack night don't find. Put Slack in the header.
+
+**In:** a Slack icon link in the desktop utility cluster, before GitHub;
+a "Slack" row in the mobile sheet before GitHub. The desktop header now
+starts at lg instead of md: at 768px the header already overflowed
+(content links wrapping, Volunteer cut off), and there was no room for
+another icon. Both are full-page navigations to `/chat`
+in a new tab, like the GitHub link.
+
+**Out:** a text "Chat" item in the content cluster (considered; an icon
+next to GitHub reads as "where the community lives" without crowding the
+content links); changing `/chat` itself.
+
+## Implements
+
+- [behaviors/app-shell.md](../specs/behaviors/app-shell.md#center--right-at--lg) —
+  utility cluster and mobile sheet.
+
+## Approach
+
+1. `SlackIcon` beside `GitHubIcon` (monochrome mark, `currentColor`).
+2. `SlackLink` in `AppHeader` mirroring `GitHubLink`; a sheet row
+   mirroring the GitHub row.
+3. Header breakpoint md → lg; GitHub loses its lg-only class, since the
+   whole desktop header is lg-only now.
+
+## Validation
+
+- [x] `npm run type-check && npm run lint && npm test` clean.
+- [x] At 1024px and 1280px the desktop header keeps every content link on
+  one line with Slack and GitHub showing; at 768px the mobile header shows.
+- [x] At 390px the sheet lists Slack before GitHub.
+- [x] Clicking the header icon opens the Slack SSO start in a new tab.
+
+## Risks / unknowns
+
+- Tablets in portrait lose the inline nav for the hamburger. Accepted:
+  the alternative was a header that runs off the screen.
+
+## Notes
+
+- The 768px overflow predates this change: develop already wrapped "Help
+  Wanted" and pushed Volunteer off the edge there, most likely since
+  Events joined the content cluster. Moving the breakpoint fixed that too.
+- The header icon is the same `/chat` anchor as the footer link verified
+  in [chat-links-full-navigation](chat-links-full-navigation.md), plus
+  `target="_blank"`; checked by markup rather than a second click-through.
+- Chose an icon beside GitHub over a "Chat" text item in the content
+  cluster.
+
+## Follow-ups
+
+- **None.**
@@ -33,10 +33,10 @@ Sticky at the top of the viewport. Background opaque, slight shadow on scroll.
 - Logo (`/img/logo.png`) — 32px tall, links to `/`
 - Site name "Code for Philly" — visible at ≥ md, hidden below to save space
 
-### Center / right at ≥ md
+### Center / right at ≥ lg
 
 Two clusters. The **content cluster** sits next to the logo; the **utility
-cluster** is pinned to the right edge and carries the outbound link, search,
+cluster** is pinned to the right edge and carries the outbound links, search,
 auth, and the call to action.
 
 Content cluster, items in this order:
@@ -53,6 +53,7 @@ Utility cluster, items in this order (left to right):
 
 | Item | Target | Style |
 | ---- | ------ | ----- |
+| Slack | `/chat` | icon-only link, accessible name "Join Code for Philly on Slack", opens in a new tab; a full-page navigation to the server redirect ([chat.md](../screens/chat.md#linking-to-it-from-the-app)) |
 | GitHub | `https://github.com/CodeForPhilly` | icon-only external link, accessible name "Code for Philly on GitHub", opens in a new tab |
 | Search 🔍 | inline expand | icon button |
 | Sign in / account menu | see [Auth controls](#auth-controls) | button / avatar dropdown |
@@ -62,6 +63,15 @@ Utility cluster, items in this order (left to right):
 control rather than among the content links so the call to action reads as the
 header's terminal step, not as one more section.
 
+**Slack is always one step from the header.** It is where the community
+actually works, and a newcomer looking for it should not have to scroll to
+the footer. The footer's Connect column keeps its Slack link too.
+
+**The desktop header starts at lg (1024px).** Below that the content
+cluster and the utility cluster do not fit on one line (the content links
+wrap and Volunteer runs off the edge), so tablets in portrait get the
+mobile header and its sheet.
+
 ### About dropdown
 
 - Mission → `/pages/mission`
@@ -93,9 +103,9 @@ sheet.
 - **Administrator:** Staff items plus "Admin" section:
   - "Manage members" → `/members?staff=true&accountLevel=all`
 
-### Mobile (< md)
+### Mobile (< lg)
 
-Header collapses to: logo + hamburger menu + auth control. Hamburger opens a sheet (right-side overlay) with all nav items stacked vertically — the content-cluster links, the About items under an "About" label, the GitHub link, and Volunteer last, mirroring the desktop order. Search is inside the sheet, not inline. The auth control stays in the header bar, outside the sheet.
+Header collapses to: logo + hamburger menu + auth control. Hamburger opens a sheet (right-side overlay) with all nav items stacked vertically — the content-cluster links, the About items under an "About" label, the Slack and GitHub links, and Volunteer last, mirroring the desktop order. Search is inside the sheet, not inline. The auth control stays in the header bar, outside the sheet.
 
 Every item in the sheet closes the sheet when activated.
 
@@ -200,7 +210,7 @@ It does not block initial paint waiting on `me`. Auth controls render skeletons
 - All dropdowns are keyboard-navigable
 - The mobile sheet traps focus while open and returns it to the trigger on close
 - The mobile sheet is a dialog with the accessible name "Menu"
-- At ≥ md the header exposes two navigation landmarks: "Primary navigation" (the content cluster) and "Utility" (GitHub, search, auth, Volunteer)
+- At ≥ lg the header exposes two navigation landmarks: "Primary navigation" (the content cluster) and "Utility" (Slack, GitHub, search, auth, Volunteer)
 - Every icon-only control carries an accessible name; controls with visible text use that text as their accessible name rather than duplicating it in a label
 
 ## Print