From 092efe8c3a583ffcb675e9bf17b4716c0811f87b Mon Sep 17 00:00:00 2001
From: meetsu <96637888+klNuno@users.noreply.github.com>
Date: Wed, 14 Oct 2026 10:10:55 +0000
Subject: [PATCH] fix(island): a goal meter in the pill's line and cleaner
 spacing

---
 src/components/island/IslandBar.svelte        | 34 +++++++++----------
 src/components/island/deck/DeckTile.svelte    |  4 ++-
 .../island/music/MusicBubble.svelte           | 13 +++----
 .../island/sessions/SubAgentList.svelte       |  6 ++++
 src/lib/island/pose.ts                        | 11 ++++++
 5 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/components/island/IslandBar.svelte b/src/components/island/IslandBar.svelte
index 6c222a6..a448987 100644
--- a/src/components/island/IslandBar.svelte
+++ b/src/components/island/IslandBar.svelte
@@ -291,7 +291,7 @@
 
 <div class="pill" class:asking in:bloom={{ reduced }} out:blurAway={{ reduced }}>
   <span class="measure" aria-hidden="true" bind:offsetWidth={statusWidth}>{line.text}</span>
-  {#if live}<span class="measure live-measure" aria-hidden="true" data-kind={live.kind} bind:offsetWidth={liveWidth}>{#if live.kind !== 'live'}<i class="kind"></i>{/if}<b>{live.name}</b> <span class="doing">{live.doing}</span></span>{/if}
+  {#if live}<span class="measure live-measure" aria-hidden="true" data-kind={live.kind} bind:offsetWidth={liveWidth}>{#if live.kind !== 'live'}<i class="kind"></i>{/if}<b>{live.name}</b> {#if live.progress !== null}<span class="goal"></span>{/if}<span class="doing">{live.doing}</span></span>{/if}
   <button
     class="bar"
     data-testid="island-bar"
@@ -325,16 +325,13 @@
     {:else if live}
       <!-- The timer's clock ticks in place: only its name rolls the line. -->
       <span class="live roll" in:bloom={{ reduced }} data-kind={live.kind} data-tone={live.tone} data-paused={live.paused || undefined} data-testid="island-live">
-        {#key live.kind === 'timer' ? `timer\n${live.name}` : `${live.name}\n${live.doing}`}<span class="line" in:rollIn={{ reduced, back }} out:rollOut={{ reduced, back }}>{#if live.kind === 'quota'}<Gauge class="kind" size={12} strokeWidth={2} aria-hidden="true" />{:else if live.kind === 'music'}<Music class="kind" size={12} strokeWidth={2} aria-hidden="true" />{:else if live.kind === 'timer'}<Timer class="kind" size={12} strokeWidth={2} aria-hidden="true" />{/if}<b>{live.name}</b> <span class="doing">{live.doing}</span></span>{/key}
+        {#key live.kind === 'timer' ? `timer\n${live.name}` : `${live.name}\n${live.doing}`}<span class="line" in:rollIn={{ reduced, back }} out:rollOut={{ reduced, back }}>{#if live.kind === 'quota'}<Gauge class="kind" size={12} strokeWidth={2} aria-hidden="true" />{:else if live.kind === 'music'}<Music class="kind" size={12} strokeWidth={2} aria-hidden="true" />{:else if live.kind === 'timer'}<Timer class="kind" size={12} strokeWidth={2} aria-hidden="true" />{/if}<b>{live.name}</b> {#if live.progress !== null}<span class="goal" aria-hidden="true"><i style:width="{(live.progress * 100).toFixed(1)}%"></i></span>{/if}<span class="doing">{live.doing}</span></span>{/key}
       </span>
     {/if}
     <span class="dots" aria-hidden="true">
       {#if trace}<span class="dot rule" data-testid="island-rule-trace" title={traceLine?.text} in:bloom={{ reduced }}><ShieldCheck size={11} strokeWidth={2.4} /></span>{/if}
       {#each dots as dot (dot.key)}<span class="dot" class:on={dot.key === hoveredKey} data-dot={dot.key}><i data-tone={dot.tone}></i></span>{/each}
     </span>
-    {#if !peeking && live?.progress}
-      <span class="progress" aria-hidden="true"><i style:transform="scaleX({live.progress.toFixed(3)})"></i></span>
-    {/if}
   </button>
   {#if ask && said}
     {@const request = ask.request}
@@ -468,23 +465,26 @@
   .live[data-paused] .doing {
     opacity: 0.55;
   }
-  .progress {
-    position: absolute;
-    right: 16px;
-    bottom: 3px;
-    left: 16px;
-    height: 2px;
+  /* The goal: how far the task list is, a short rounded meter before its count ("2/5"), in the line. */
+  .goal {
+    display: inline-block;
+    width: 28px;
+    height: 5px;
+    margin: 0 7px 0 3px;
     overflow: hidden;
-    border-radius: 1px;
-    background: rgb(255 255 255 / 0.1);
+    border-radius: 999px;
+    background: var(--island-line-strong);
+    vertical-align: 1px;
   }
-  .progress i {
+  .goal i {
     display: block;
-    width: 100%;
     height: 100%;
+    border-radius: inherit;
     background: var(--island-working);
-    transform-origin: left;
-    transition: transform 400ms ease;
+    transition: width 400ms ease;
+  }
+  .live[data-tone='waiting'] .goal i {
+    background: var(--island-attention);
   }
   .dots {
     display: flex;
diff --git a/src/components/island/deck/DeckTile.svelte b/src/components/island/deck/DeckTile.svelte
index 67160e4..c44d1bb 100644
--- a/src/components/island/deck/DeckTile.svelte
+++ b/src/components/island/deck/DeckTile.svelte
@@ -69,10 +69,12 @@
     scrollbar-width: thin;
     scrollbar-color: var(--island-line-strong) transparent;
   }
-  /* The island's cards, drawn inside a tile: the tile is their box. */
+  /* The island's cards, drawn inside a tile: the tile is their box, and the surface what fades over them. */
   .content :global(.island-card) {
+    --island-card: var(--deck-tile);
     padding: 0;
     border: none;
     background: none;
+    box-shadow: none;
   }
 </style>
diff --git a/src/components/island/music/MusicBubble.svelte b/src/components/island/music/MusicBubble.svelte
index 05b88eb..6a406ac 100644
--- a/src/components/island/music/MusicBubble.svelte
+++ b/src/components/island/music/MusicBubble.svelte
@@ -1,7 +1,7 @@
 <!--
   The music bubble: a small black drop beside the island's pill, the music's
   own (`lib/companion/music.svelte.ts`). Folded, the cover and a meter that
-  moves with the sound, the track's progress along its bottom edge. Under the
+  moves with the sound, the track's progress under the meter. Under the
   pointer or the keyboard it unfolds into the player: the cover (which opens
   Spotify), the title and the artist, the meter, previous, play or pause, and
   next, and the timeline, where a click or a drag moves the track
@@ -372,15 +372,16 @@
   .paused .thumb {
     filter: saturate(0.4) brightness(0.8);
   }
+  /* The track's progress, under the meter beside the cover, clear of the bubble's edge. */
   .line {
     position: absolute;
-    right: 12px;
-    bottom: 3px;
-    left: 12px;
+    right: 10px;
+    bottom: 4px;
+    left: 36px;
     height: 2px;
     overflow: hidden;
-    border-radius: 1px;
-    background: rgb(255 255 255 / 0.1);
+    border-radius: 999px;
+    background: var(--island-line-strong);
     pointer-events: none;
   }
   .line i {
diff --git a/src/components/island/sessions/SubAgentList.svelte b/src/components/island/sessions/SubAgentList.svelte
index e14d484..8cdbf82 100644
--- a/src/components/island/sessions/SubAgentList.svelte
+++ b/src/components/island/sessions/SubAgentList.svelte
@@ -67,6 +67,12 @@
     font-size: 11px;
     line-height: 20px;
   }
+  /* The count heads the list: apart from the row's line above, close to the list it counts. */
+  .progress {
+    margin: 4px 0 2px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+  }
   .lines {
     display: flex;
     flex-direction: column;
diff --git a/src/lib/island/pose.ts b/src/lib/island/pose.ts
index ea21c20..184b0ec 100644
--- a/src/lib/island/pose.ts
+++ b/src/lib/island/pose.ts
@@ -45,6 +45,9 @@
  *   asks to push two seconds in); read by the companion, the fake side in
  *   `fake-client/machines-demo.ts`.
  * - `todo=1`: a to-do list in the today tab, one item ticked;
+ * - `tasks=1`: the tests thread keeps a task list, two of five done, so the
+ *   collapsed pill's live line shows its goal bar (wait for the ended
+ *   threads' line to pass);
  * - `mission=ask|list`: a mission waiting for the user's word, or three set
  *   (one paused, one whose project is gone) for Settings;
  * - `bar=custom`: the bar arranged by hand: two tabs left out, one renamed,
@@ -151,6 +154,13 @@ function poseTodo(companion: Companion): void {
   companion.todos.apply([{ kind: 'done', index: 2 }]);
 }
 
+/** The tests thread's task list, two of five done, the third at work. */
+async function poseTasks(companion: Companion): Promise<void> {
+  const texts = ['Pull the merge', 'Install the packages', 'Run the unit tests', 'Run the end-to-end tests', 'Sum up the failures'];
+  const status = (index: number) => (index < 2 ? 'completed' : index === 2 ? 'in_progress' : 'pending') as 'completed' | 'in_progress' | 'pending';
+  await companion.client?.call('threads.tasks.set', { threadId: DEMO_THREAD, tasks: texts.map((text, index) => ({ id: `task-pose-${index}`, text, status: status(index) })) }).catch(() => {});
+}
+
 /** A mission waiting for the user's word (`ask`), or three set, one paused and one whose project is gone (`list`, for Settings). */
 function poseMissions(companion: Companion, kind: 'ask' | 'list'): void {
   const found = [...companion.projects].find(([, name]) => companion.projectNames?.includes(name));
@@ -242,6 +252,7 @@ export async function strikePose(companion: Companion, frame: IslandFrame, param
   }
   if (params.get('sessions') === 'none') posed.idle = true;
   if (params.get('todo') === '1') poseTodo(companion);
+  if (params.get('tasks') === '1') await poseTasks(companion);
   const mission = params.get('mission');
   if (mission === 'ask' || mission === 'list') poseMissions(companion, mission);
   const rest = params.get('rest') as PillRest | null;