Added nav arrows

Author: ginobuzz

CLAUDE.md

@@ -136,6 +136,7 @@ A component appearing here doesn't mean it's actively used in the default repo 
 | `IconButton` | Accessible icon-only button: consistent reset, hover state, required `aria-label`. | `label`, `active?`, `className?`, `children`, plus any native `<button>` props | Use this instead of hand-rolling a `<button>` with an SVG — callers still add their own className for size/color. |
 | `PrivateDisclaimer` | Lock icon + "Only you can see this conversation" strip. | `text?` (override the default copy) | Used inside private message bubbles and above the agents-rail chat thread. |
 | `TypingIndicator` | Canonical "X is typing" UI — avatar + 3 bouncing dots. **Whenever a task says "typing indicator", it means this.** | `contact`, `avatarSize = 32`, `dotSize = 5`, `className?` | Component owns only the avatar + dots visual; positioning is the caller's job. Main canvas: floats above `Compose` with the avatar's bottom ~10% tucked behind the compose box top edge (see `.chat-compose-area` / `.chat-compose-typing` in `ChatView.css`). Agents rail: in-flow above the rail compose. Add new surface-specific CSS rather than forking the component. |
+| `DemoArrow` | Red pulsing arrow that cues the viewer to the next click target during a prototype walkthrough. **Whenever a task says "red arrow" / "demo arrow" / "hint arrow" to guide the viewer, it means this.** | `direction: 'left' \| 'right' \| 'up' \| 'down'`, `size = 24`, `className?` | Owns only the visual + pulse animation (uses the `translate` CSS property so caller `transform` doesn't collide). Caller handles absolute positioning near the target and should set `pointer-events: none` on the wrapper so clicks still land on the target. **Ephemeral**: track show/hide state wherever the target's click handler lives and unmount once the target is clicked. See `DESIGN_GUIDE.md` → "Demo Hint Arrows". |
 | `Icon` library | Shared SVG icons exported from `components/common/Icon.jsx`: `Close`, `Plus`, `ChevronDown`, `ChevronLeft`, `Send`, `Clock`, `Search`, `Dots`, `EmojiAdd`, `Edit`, `Lock`. | Each takes `size`; stroked icons (`Clock`, `EmojiAdd`, `Edit`) also take `stroke`. | When adding a new icon, start at [fluenticons.co](https://fluenticons.co/) (Fluent UI — matches Teams). Add it here instead of inlining SVG in a feature component. |
 
 ## Key Conventions

DESIGN_GUIDE.md

@@ -187,9 +187,17 @@ Channels appear in the chat list grouped under their parent team:
 
 ## Demo Hint Arrows
 
-Red pulsing arrows (`#E8173A`) cue the viewer where to click next during the demo. They animate with a ~1.5s opacity + translate nudge pointing *toward* the target:
+Red pulsing arrows (`#E8173A`) cue the viewer to the next click target during a prototype walkthrough. Use the reusable **`DemoArrow`** component in `components/common/` — do not inline a new SVG arrow.
 
-- Main compose send button (initial `/Jira` draft)
-- Main compose (after Jira flow completes, prefilled recap reply)
+**Visual spec:**
+- Color: `#E8173A`
+- Animation: ~1.5s opacity (`1` → `0.4`) + `translate` nudge (3px) toward the target
+- Directions: `'left' | 'right' | 'up' | 'down'`
+- Size: 24px default, caller-tunable
 
-These are gated by `JIRA_FLOW_ENABLED` in `ChatView.jsx` — the CSS is retained so re-enabling the flow doesn't require restoring styles.
+**Usage rules:**
+- **Positioning is the caller's job.** Typically `position: absolute` anchored near the target, inside a wrapper with `pointer-events: none` so clicks pass through to the target underneath. Wrap `DemoArrow` in a positioning `<span>` / `<div>` rather than relying on the arrow's own layout.
+- **Arrows are ephemeral.** Track a `show/hide` state wherever the target's click handler lives and unmount the arrow once the target is clicked so it doesn't linger after the action is taken. Clearing persistently (rather than toggling) matches demo/tutorial conventions.
+- One arrow per target at a time — don't stack hints.
+
+The disabled scripted Jira flow in `ChatView.jsx` retains pre-`DemoArrow` inline arrow styles (`.main-compose-hint-arrow`, `.demo-hint-arrow-send` in `Compose.css`; `.agent-chat-hint-arrow` in `AgentsRail.css`) as a reference pattern only. Any new walkthrough should use `DemoArrow` instead.

public/avatars/morgan-collective.svg

@@ -6,7 +6,8 @@ import './ChatList.css'
 
 // Small rounded-square team icon used in the Teams & channels section. Mirrors
 // the channel avatar treatment but is standalone (no status dot, no agent
-// logo) so we don't need to add a synthetic contact for each team.
+// logo) so we don't need to add a synthetic contact for each team. Renders
+// `team.avatar` if set, otherwise falls back to initials over `team.color`.
 function TeamIcon({ team, size = 20 }) {
   const radius = Math.max(3, Math.round(size * 0.18))
   return (
@@ -15,12 +16,20 @@ function TeamIcon({ team, size = 20 }) {
       style={{
         width: size,
         height: size,
-        background: team.color,
+        background: team.avatar ? 'transparent' : team.color,
         borderRadius: radius,
         fontSize: size * 0.4,
       }}
     >
-      {team.initials}
+      {team.avatar ? (
+        <img
+          src={team.avatar}
+          alt=""
+          style={{ width: size, height: size, borderRadius: radius, display: 'block' }}
+        />
+      ) : (
+        team.initials
+      )}
     </div>
   )
 }

public/avatars/northwind-traders.svg

@@ -0,0 +1,34 @@
+.demo-arrow {
+  color: #E8173A;
+  display: inline-flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+/* Pulse nudges the arrow toward its target. Uses the `translate`
+   property (not `transform`) so callers can apply their own transforms
+   for positioning without clobbering the animation. */
+.demo-arrow-left  { animation: demo-arrow-pulse-left  1.5s ease-in-out infinite; }
+.demo-arrow-right { animation: demo-arrow-pulse-right 1.5s ease-in-out infinite; }
+.demo-arrow-up    { animation: demo-arrow-pulse-up    1.5s ease-in-out infinite; }
+.demo-arrow-down  { animation: demo-arrow-pulse-down  1.5s ease-in-out infinite; }
+
+@keyframes demo-arrow-pulse-left {
+  0%, 100% { translate: 0 0;    opacity: 1; }
+  50%      { translate: -3px 0; opacity: 0.4; }
+}
+
+@keyframes demo-arrow-pulse-right {
+  0%, 100% { translate: 0 0;   opacity: 1; }
+  50%      { translate: 3px 0; opacity: 0.4; }
+}
+
+@keyframes demo-arrow-pulse-up {
+  0%, 100% { translate: 0 0;    opacity: 1; }
+  50%      { translate: 0 -3px; opacity: 0.4; }
+}
+
+@keyframes demo-arrow-pulse-down {
+  0%, 100% { translate: 0 0;   opacity: 1; }
+  50%      { translate: 0 3px; opacity: 0.4; }
+}

src/components/ChatList.jsx

@@ -0,0 +1,34 @@
+import './DemoArrow.css'
+
+// Red pulsing arrow used to guide a viewer's eye to the next click
+// target during a prototype walkthrough. The component only owns the
+// visual + pulse animation; positioning (absolute, near the target) is
+// the caller's job. Meant to be ephemeral — mount it when the hint
+// should appear and unmount (or re-render without it) once the target
+// is clicked. See DESIGN_GUIDE.md → "Demo Hint Arrows".
+export default function DemoArrow({ direction = 'left', size = 24, className = '' }) {
+  const rotations = { right: 0, down: 90, left: 180, up: 270 }
+  const rotate = rotations[direction] ?? 0
+  return (
+    <span
+      className={`demo-arrow demo-arrow-${direction} ${className}`.trim()}
+      aria-hidden="true"
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <g transform={`rotate(${rotate} 12 12)`}>
+          <path d="M4 12h16" />
+          <path d="M14 6l6 6-6 6" />
+        </g>
+      </svg>
+    </span>
+  )
+}

src/components/common/DemoArrow.css

@@ -5,4 +5,5 @@ export { default as LinkCard } from './LinkCard'
 export { default as IconButton } from './IconButton'
 export { default as PrivateDisclaimer } from './PrivateDisclaimer'
 export { default as TypingIndicator } from './TypingIndicator'
+export { default as DemoArrow } from './DemoArrow'
 export * from './Icon'

src/components/common/DemoArrow.jsx

@@ -61,6 +61,7 @@ export const teams = [
     name: 'Northwind Traders',
     initials: 'NT',
     color: '#0078D4',
+    avatar: `${base}avatars/northwind-traders.svg`,
     channels: [
       { id: 25, bold: true },
       { id: 26, bold: true },
@@ -72,6 +73,7 @@ export const teams = [
     name: 'Morgan Collective',
     initials: 'MC',
     color: '#6264A7',
+    avatar: `${base}avatars/morgan-collective.svg`,
     channels: [
       { id: 28, bold: true },
       { id: 29 },
@@ -114,3 +116,16 @@ export const chatList = [
   { contactId: 19 },
   { contactId: 20 },
 ]
+
+// Channels inherit their parent team's avatar — a channel in the chat list
+// should visually read as "part of Team X", not get its own generic tile.
+// Backfills any channel contact that doesn't already specify its own avatar.
+for (const team of teams) {
+  if (!team.avatar) continue
+  for (const entry of team.channels) {
+    const channel = contacts.find((c) => c.id === entry.id)
+    if (channel && channel.isChannel && !channel.avatar) {
+      channel.avatar = team.avatar
+    }
+  }
+}