feat(island): a pill that reads at a glance, an icon bar, a full-width chat, System and Today redrawn

src/bots.css

@@ -57,6 +57,37 @@
   --deck-accent-soft: rgb(139 124 246 / 0.18);
   --deck-accent-ink: #d9d3ff;
   --deck-numeral-font: 'Segoe UI Variable Display', var(--island-font);
+  /* The type scale, five steps: small, body, a title (a date written out),
+     display (the numbers a tab is about: light, tight, tabular) and hero
+     (the today tab's clock). A unit beside its number is set at
+     `--deck-unit` of it, never under the small step. */
+  --deck-small: 12px;
+  --deck-body: 13.5px;
+  --deck-title: 20px;
+  --deck-display: 40px;
+  --deck-hero: 68px;
+  --deck-display-weight: 320;
+  --deck-display-tracking: -0.025em;
+  --deck-unit: max(var(--deck-small), 0.45em);
+}
+
+/*
+ * A list that scrolls inside a deck tile: no bar; with `island-fade`, its
+ * edges fade into the tile rather than the island's black.
+ */
+.deck-scroll {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+.deck-scroll::-webkit-scrollbar {
+  display: none;
+}
+.deck-scroll.island-fade::before {
+  background: linear-gradient(var(--deck-tile), transparent);
+}
+.deck-scroll.island-fade::after {
+  background: linear-gradient(transparent, var(--deck-tile));
 }
 
 /*

src/components/island/TimerBubble.svelte

@@ -165,9 +165,10 @@
     stroke: var(--tone);
     stroke-linecap: round;
   }
+  /* The pill's type: the drop reads as its sibling. */
   .time {
-    font-size: 13px;
-    font-weight: 600;
+    font-size: 14px;
+    font-weight: 650;
     font-variant-numeric: tabular-nums;
   }
   .paused .time,

src/components/island/assistant/AssistantChat.svelte

@@ -7,9 +7,11 @@
   Enter sends, also while the agent works (a follow-up), Shift+Enter breaks
   the line, Escape leaves the field. While the field has the keyboard, the
   island stays. With no agent yet, one button leads to where one is made.
+  The page that holds the chat may add its own buttons beside the field
+  (`tools`), as the deck's chat tab does with its screen captures.
 -->
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { tick, type Snippet } from 'svelte';
   import { ArrowUp, SquareArrowOutUpRight, Square } from '@lucide/svelte';
   import { installExternalLinks } from '@boite/ui/lib/links';
   import { openSettings, showAgent } from '../../../lib/companion/shell';
@@ -21,7 +23,7 @@
   import AssistantMessage from './AssistantMessage.svelte';
   import ModelMenu from './ModelMenu.svelte';
 
-  let { menuOpen = $bindable(false), agentsOpen = $bindable(false) }: { menuOpen?: boolean; agentsOpen?: boolean } = $props();
+  let { menuOpen = $bindable(false), agentsOpen = $bindable(false), tools }: { menuOpen?: boolean; agentsOpen?: boolean; tools?: Snippet } = $props();
 
   const view = useView();
   const companion = $derived(view.companion);
@@ -174,6 +176,7 @@
           {@attach grow}
           data-testid="assistant-input"
         ></textarea>
+        {@render tools?.()}
         {#if assistant.running}
           <button class="round stop" aria-label={copy.stop} title={copy.stop} disabled={assistant.stopping} onclick={() => void assistant.stop()} data-testid="assistant-stop">
             <Square size={12} fill="currentColor" />

src/components/island/deck/Deck.svelte

@@ -16,6 +16,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cubicOut } from 'svelte/easing';
+  import { fade } from 'svelte/transition';
   import { FilePlus } from '@lucide/svelte';
   import type { Companion, Member } from '../../../lib/companion/companion.svelte';
   import { barTabs } from '../../../lib/island/bar';
@@ -100,7 +101,7 @@
       {/each}
     {/if}
     {#if companion.attached.over}
-      <div class="dropping" aria-hidden="true">
+      <div class="dropping" aria-hidden="true" transition:fade={{ duration: reduced ? 0 : 140 }} data-testid="deck-dropping">
         <FilePlus size={26} strokeWidth={1.6} />
         <p>{copy.drop.title}</p>
         <p class="hint">{copy.deck.drop}</p>