fix(web): centre-truncate image digests in the UI

- Enhanced `shortImage()` to centre-truncate bare `sha256:…` digests, keeping the algorithm prefix and first/last 6 hex characters so digests remain distinguishable on narrow layouts
- Added `shortenDigest()` and `shortenSha256()` helpers to handle both tagged refs (e.g. `textile-stitch:latest`) unchanged and digest-only refs (e.g. `sha256:ce1d74…2fef60`)
- Added `title` attributes to image references in BotDetail and Fleet to show the full digest on hover
- Updated BotDetail and Fleet row image displays with monospace font to match digest formatting

Author: bnolens

.textile-monorepo-source

@@ -1 +1 @@
-4ed54f528104b8c429126bb591e440890cf073ca
+e1a1f43c78c7c42fa16002408fedc3f69096b442

.textile-stitch-release-version

@@ -1 +1 @@
-0.1.111
+0.1.112

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "stitch-bot"
-version = "0.1.111"
+version = "0.1.112"
 edition = "2021"
 description = "Stitch — Textile filler-network operator bot; market-makes the filler order book with signed UniswapX limit orders."
 license = "AGPL-3.0-or-later"

Cargo.toml

@@ -66,9 +66,33 @@ export function shortAddress(address: string): string {
     : address
 }
 
-/** An image reference with its registry path dropped, keeping the tag. */
+/**
+ * An image reference short enough for a fleet row or detail cell.
+ *
+ * Drops the registry path, then centre-truncates a content digest so a bare
+ * `sha256:…` (or `name@sha256:…`) does not shove the rest of the layout off
+ * screen. Tagged refs like `textile-stitch:latest` stay as-is.
+ */
 export function shortImage(image: string | null): string {
   if (!image) return '—'
   const lastSlash = image.lastIndexOf('/')
-  return lastSlash === -1 ? image : image.slice(lastSlash + 1)
+  const name = lastSlash === -1 ? image : image.slice(lastSlash + 1)
+  return shortenDigest(name)
+}
+
+/** `sha256:ce1d74…2fef60` — keeps the prefix and enough hex to tell digests apart. */
+function shortenDigest(ref: string): string {
+  const at = ref.lastIndexOf('@')
+  if (at !== -1) {
+    const name = ref.slice(0, at)
+    const digest = ref.slice(at + 1)
+    return `${name}@${shortenSha256(digest)}`
+  }
+  return shortenSha256(ref)
+}
+
+function shortenSha256(value: string): string {
+  const hex = value.startsWith('sha256:') ? value.slice('sha256:'.length) : null
+  if (hex === null || hex.length <= 12) return value
+  return `sha256:${hex.slice(0, 6)}…${hex.slice(-6)}`
 }

web/src/format.ts

@@ -245,7 +245,11 @@ export default function BotDetail() {
         <dl className="mt-4 grid gap-3 text-sm sm:grid-cols-2 lg:grid-cols-4">
           <Detail label="Origin">{bot.origin}</Detail>
           <Detail label="Layout">{bot.layout}</Detail>
-          <Detail label="Image">{shortImage(bot.image)}</Detail>
+          <Detail label="Image">
+            <span className="font-mono" title={bot.image ?? undefined}>
+              {shortImage(bot.image)}
+            </span>
+          </Detail>
           <Detail label="Created">{formatTimestamp(bot.createdUnix)}</Detail>
           <Detail label="Chain">{bot.config ? bot.config.chainId : '—'}</Detail>
           <Detail label="Pools">{bot.config ? bot.config.pools : '—'}</Detail>

web/src/pages/BotDetail.tsx

@@ -137,8 +137,9 @@ export default function Fleet() {
       )}
 
       <p className="text-xs text-faint">
-        New bots run <code>{shortImage(data.botImage)}</code>. Configs live in{' '}
-        <code>{data.botsDir}</code>.
+        New bots run{' '}
+        <code title={data.botImage}>{shortImage(data.botImage)}</code>. Configs
+        live in <code>{data.botsDir}</code>.
       </p>
     </div>
   )
@@ -236,7 +237,9 @@ function BotRow({
           </Tag>
         )}
         {bot.config && <Tag>{bot.config.signer}</Tag>}
-        <span className="ml-auto">{shortImage(bot.image)}</span>
+        <span className="ml-auto font-mono" title={bot.image ?? undefined}>
+          {shortImage(bot.image)}
+        </span>
       </div>
 
       {(blocking.length > 0 || advisory.length > 0) && (