Chat bubbles, icons for chats, more vivid and distinct colour tags

- Bubbles: own messages right-aligned in their own colour, agent answers left.
- Chat icons (22, validated on the server), shown in list, top bar, project page.
- Colour tags: eight fixed hues (new: pink) with theme-matched lightness and the
  highest chroma sRGB allows; stronger background tint.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { ColorSwatches } from "./ColorSwatches";
+import { ColorSwatches, IconPicker } from "./ColorSwatches";
 import { Icon } from "./Icon";
 import { StatusLeds } from "./StatusLeds";
 import { cycleThemeMode, getThemeMode, onThemeChange } from "../theme";
@@ -26,7 +26,7 @@ function groupKey(ms: number): Key {
 const GROUP_BY = "codecraft.sidebarGroupBy";
 const COLLAPSED = "codecraft.sidebarCollapsed";
 
-const organise = (id: string, body: Partial<Pick<Session, "pinned" | "archived">> & { folder?: string; color?: string }) => patch(`/sessions/${id}`, body).catch((e) => toast(e.message));
+const organise = (id: string, body: Partial<Pick<Session, "pinned" | "archived">> & { folder?: string; color?: string; icon?: string }) => patch(`/sessions/${id}`, body).catch((e) => toast(e.message));
 
 /** One session in the list, with a menu to pin, file or archive it. */
 function SessionRow({ s, active, attention, busy, folders }: { s: Session; active: boolean; attention: boolean; busy: boolean; folders: string[] }) {
@@ -57,7 +57,10 @@ function SessionRow({ s, active, attention, busy, folders }: { s: Session; activ
       <button className={`session-item ${active ? "active" : ""}`} data-color={s.color} onClick={() => navigate(`/s/${s.id}`)}>
         <div className="title">
           {attention ? <i className="attn-dot" title={t("sidebar.needsInput")} /> : busy && <i className="busy-ring" title={t("activity.working")} />}
-          <span className={s.color ? "color-badge" : undefined}>{s.title || t("session.untitled")}</span>
+          <span className={s.color ? "color-badge" : undefined}>
+            {s.icon && <Icon name={s.icon} className="tiny chat-icon" />}
+            {s.title || t("session.untitled")}
+          </span>
         </div>
         {s.summary && <div className="summary" title={s.summary}>{s.summary}</div>}
         <div className="sub">
@@ -96,6 +99,7 @@ function SessionRow({ s, active, attention, busy, folders }: { s: Session; activ
             </button>
           )}
           <ColorSwatches value={s.color} onChange={(color) => (setMenu(false), organise(s.id, { color }))} />
+          <IconPicker value={s.icon} color={s.color} onChange={(icon) => (setMenu(false), organise(s.id, { icon }))} />
           <button role="menuitem" onClick={() => (setMenu(false), organise(s.id, { archived: !s.archived }))}>
             <Icon name="archive" /> {t(s.archived ? "sidebar.unarchive" : "sidebar.archiveOne")}
           </button>