paseo-aydo 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Ondrej Rehacek
+Copyright (c) 2026 quickwind
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,143 @@
-# Temporary Holding Version
+<p align="center">
+  <img src="docs/bots.svg" width="512" alt="Six pixel-art assistants">
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# Aydo, offline edition
+
+Aydo: personal assistants for [Paseo](https://paseo.sh) and Irix: give each assistant instructions, a model, memory, skills and tools, then chat with it in its own workspace or let it run routines.
+
+Aydo is based on [oliexe/paseo-bots](https://github.com/oliexe/paseo-bots) 0.2.0 (MIT, by Ondrej Rehacek) for machines that must not send data to cloud services. **The plugin makes no network connections of its own.** Everything that needed one is gone, and a test keeps it that way.
+
+## What is different
+
+| Upstream feature | Offline edition |
+| --- | --- |
+| Connected apps through Composio (Gmail, Slack, Notion, 1,000+ more) | Removed, with its relay proxy, API key, sign-in cards and the roles built on it (Inbox, Watch, Ops) |
+| Avatar pictures drawn by OpenAI | Removed; pixel-art faces, and pictures you upload |
+| Pictures from an image address | Removed; a picture is kept only as an uploaded `data:` image |
+| Importing skills from GitHub or a link | Imports from **a folder on this computer** instead |
+| Testing MCP servers at a remote address (HTTP, SSE) | The plugin only tests programs and `http://localhost` addresses. A remote server (for example one inside your company) is imported and can be turned on without a test; the assistant's agent is the one that connects to it |
+| GitHub link on the start screen | Removed |
+
+Everything else is unchanged: assistants, memory, routines and webhooks, teams, the skill and MCP library, `/learn`, Paseo's own tools for assistants, and sharing assistants and teams as files.
+
+## What this does not control
+
+- **The assistants' own agents.** An assistant runs on a provider (Claude Code, for instance) that talks to its own service. That is the provider's traffic, not the plugin's.
+- **MCP servers.** The agent connects to the servers you give an assistant, remote ones included; the plugin never does. A server may itself reach the internet. Add only servers you trust.
+- **Links in a chat.** A link in an assistant's reply opens in your browser only when you press it.
+- **The plugin runs unsandboxed**, like every Paseo plugin. Read the code before installing it.
+
+## Screenshots
+
+| | |
+| --- | --- |
+| **Assistants** | **Assistant settings** |
+| ![Aydo](docs/splash.png) | ![Assistant settings](docs/bot.png) |
+| **Skills** | **MCP servers** |
+| ![Skills](docs/skills.png) | ![MCP servers](docs/mcp.png) |
+| **Teams** | |
+| ![Teams](docs/teams.png) | |
+
+## Install
+
+Get the plugin folder onto the machine (the offline package unzips into one), then install it from that folder.
+
+``bash
+irix plugin install /path/to/aydo          # Irix
+paseo plugin install /path/to/aydo         # Paseo
+``
+
+Turn on **Settings → Plugins → Enable plugins** first. Requires Paseo 0.13 or later. Aydo shows in English and Chinese (zh-CN), following the Paseo/Irix language setting. Irix installs plugins from a local folder only, which is what this edition is for.
+
+## Usage
+
+### Assistants
+
+1. Open **Aydo** in Paseo's sidebar and press **New assistant**. Start blank, from a role, from one of your presets, or paste an assistant or team file under **Import**.
+2. Chat with it. Every chat is a thread in the assistant's workspace; **Open in Paseo** in a chat's menu shows it in Paseo's own view. On Irix builds that offer the embedded chat (`ui.AgentView`), an open chat is Irix's own chat view inside the Assistants page, so the model, mode and thinking pickers, slash commands and other plugins' cards work there too; the first message of a new chat is still typed in the plugin's own box, because it builds the assistant's system prompt. On Paseo without it, the plugin's own chat window is used.
+3. Open its settings with the panel button at the top right of a chat, or **Open assistant settings** in the assistant's menu. **Identity** holds the name, avatar and voice, **Soul** its standing instructions, **Model** the provider and model, and **Permissions** the approval mode.
+
+Assistants can do the setting up too. Ask one in a chat, for example "Create a research team of three assistants with Scout as Chief of Staff", and it shows every change on one card; **Apply changes** makes them. An assistant can create, edit and delete assistants, teams, routines, library skills and MCP servers, and change what new assistants start with. Each assistant's earlier settings stay under **History** in its settings.
+
+**Devin.** Devin has no system prompt, so the plugin writes each assistant's identity (name, standing instructions, memory, skills, team) to `.devin/rules/bot-identity.md` in the assistant's own folder, as an always-on rule that Devin reads when a chat starts. It is rewritten when the settings or the memory change and before each chat, so both a chat started in Assistants and a plain new chat in the assistant's workspace know who the assistant is. The file is generated: edit the assistant's settings, not the file. Over 32 KB it is split into several files, and the assistant's Overview says so. An assistant with its own working folder gets nothing written there; its Devin chats carry the identity in the first message instead. Its tools are files too; see **Assistant tools without MCP** below.
+
+**Assistant tools without MCP.** The plugin's tools (reading the setup, proposing changes, routines and skills, asking another assistant, searching past chats) normally come to an assistant as an MCP server. Where MCP is not allowed (Devin here), they come as files in the assistant's own folder instead. Settings > Plugins > Aydo > **Default: tools come as** sets the default for every assistant, MCP or files; an assistant can choose its own under **Agent > Tools come as**. An assistant on Devin or Antigravity starts with its own choice, files.
+
+- `setup/` describes the assistants and the setup, and the format of the proposal files; it is kept current by the plugin.
+- `proposals/`: the assistant writes one JSON file (`changes`, `routine` or `skill`) as the last step of a turn; when the turn ends the plugin checks it and posts the same confirmation card as the tool would. A file that is not accepted is reported back to the assistant, with the reason in `proposals/done/`.
+- `outbox/`: the assistant writes an `ask` file to ask another assistant. With "Ask first" the user approves a card; the other assistant answers in a chat of its own and the answer arrives in the asking chat as a message. A chat started by another assistant cannot ask further. A question unanswered for 30 minutes is closed. A follow-up to the same assistant from the same chat goes into the chat that assistant already has with it (an hour of quiet starts a new one); if that chat is still on the last question, the follow-up waits its turn. `ask_bot` does the same.
+- `history/`: a transcript of each recent chat, for the assistant to search with its own file tools.
+
+A file belongs to the chat whose turn wrote it (the turn's tool calls name the file), so two chats of one assistant do not take each other's files. An assistant with its own working folder writes into its home folder, which Devin may ask to approve. A plain new chat in an assistant's folder counts as that assistant's chat.
+
+**Set up with the assistant.** An assistant made with **Blank assistant** opens with a short interview: it asks about what you want from it, how you work and what it must never do, then suggests three names (the last question), proposes its name, title, description and instructions on one card and writes a starting `MEMORY.md` once you confirm. After you press **Apply changes** the card says which model the assistant uses and how memory tidy is set, and where to change them. Every proposal card says what happened after you press a button, and shows why on the card when it did not work. It does not change its provider, model or approval mode; you set those under **Model** and **Permissions**. You can start the interview again from **Overview > Set up with the assistant**. Under Settings > Plugins > Aydo, **Set up with the assistant** holds the prompt (leave it empty for the built-in one; name a skill in it to have the assistant use it, if the skill is on for that assistant) and a switch to stop blank assistants from starting it by themselves. Assistants made from a role or preset never start it by themselves.
+
+### Memory
+
+An assistant updates its `MEMORY.md` when it learns something worth keeping, for example when you say "Remember that I prefer short answers". New chats start with it.
+
+In the assistant's settings, **Memory** shows `MEMORY.md` and its topic files, which you can edit, a **Daily log** of its chats, and **Changes**, where **Undo** puts a file back the way it was.
+
+**Maintenance.** Under **Memory > Maintenance** two switches keep memory useful as it grows (on for new assistants, off for existing ones):
+
+- **Save notes when a chat fills up.** When a chat passes the chosen share of its context window, the app asks it, once, to write what is worth keeping to `memory/inbox.md`. You see that message and a one-line reply in the chat. A provider that does not report context use is never asked.
+- **Tidy memory automatically.** On an interval (it also runs after a laptop wakes), the app starts a "Memory tidy" chat that moves what is durable from the inbox and the daily log into `MEMORY.md`, merges duplicates, drops what is out of date and empties the inbox. It skips when there is nothing new, waits while you are chatting with the assistant, runs at most six times a day, and backs off for a day if memory stays over budget. **Tidy now** runs it at once. The model is Paseo's Metadata generation setting by default, or the assistant's own. New Devin assistants start with tidy off, because every run spends your Devin quota.
+
+Every change shows under **Changes** with undo.
+
+### Routines
+
+1. In the assistant's settings, open **Routines** and press **New routine**.
+2. Give it a name and a prompt. The prompt is the first message of each run.
+3. Pick when it repeats: a preset such as **Weekdays 9:00** or your own cron expression, **Once**, or **When its webhook is called**.
+4. To collect results in one place, pick a chat under **Post results to**. Each run still gets its own chat.
+
+Assistants can propose routines too: ask in a chat, then press **Create routine** on the card. A webhook routine's URL is under **Copy webhook URL** in its menu; `POST` to it from this computer.
+
+### Teams
+
+1. Press **Team map** at the bottom of the assistant list, then **New team**.
+2. Name the team, switch on its members, pick a **Lead** as its Chief of Staff, and add shared instructions for every member. The team gets a pixel-art logo; **Reroll** draws another, or use your own picture.
+3. Send your requests to the Chief of Staff. It hands parts of the work to its teammates.
+
+With teams, the Aydo screen gets a tab for each team, and **Other assistants** for assistants without one (a menu on phones); **+** next to the tabs adds a team, and right-clicking a tab edits it. A team can let its members ask each other without you approving every question (off by default; an assistant set to never contact others still may not), and its Chief of Staff can ask several teammates at once. A team file carries your assistants and their teams: find it in **Settings → Plugins**, under **Assistants** in the paseo-bots menu.
+
+Whether an assistant may ask others for help is set in its settings under **Permissions → Contact other assistants**: **Ask first**, **Allowed** or **Off**.
+
+### Skills & Tools
+
+Press **Skills & Tools** at the bottom of the assistant list.
+
+- **Skills**: press **+** to import skills from a folder on this computer (the full path; every `SKILL.md` under it comes in, up to 30) or write a new one. Open an imported skill and press **Review** to turn it on. **Update** on a skill reads its folder again.
+- **MCP servers**: press **+**, then **New server**, or **Import config** to pick up the servers set up in Claude Code, Claude Desktop or Cursor. Press **Test and turn on** on the server's page; a remote server has no test and is turned on with its switch.
+
+Then give them to an assistant in its settings: skills under **Skills**, MCP servers under **Access**.
+
+### Learning
+
+After a task, send `/learn` in the chat, or `/learn <what to focus on>`. The assistant writes up what worked as a skill and shows it as a card; press **Save skill** to add it to Skills & Tools and turn it on for that assistant.
+
+### Paseo tools
+
+Assistants get Paseo's own tools, so you can ask one in a chat to start other agents, open workspaces and terminals, set up schedules or use the browser. An assistant's **Access** settings show whether they're on, and **Turn on** there switches them on for every agent on the host.
+
+## Building the offline package
+
+``bash
+npm ci --ignore-scripts
+npm run typecheck && npm test
+node scripts/pack-offline.mjs --out ../aydo-offline
+``
+
+The package is a zip of the plugin's source files only (the daemon compiles them when the plugin starts). It has no runtime dependencies, so installing it needs no npm and no internet.
+
+`tests/offline.test.ts` scans the whole source for network code (`fetch`, sockets, WebSocket, a remote address in code, an image loaded from an address) and fails if it finds any outside the one MCP probe, which refuses everything but this computer (remote MCP servers are the agent's to connect to). Run it after every change.
+
+## Staying close to upstream
+
+`upstream` is the original repository. Merge it into the `offline` branch from time to time; the removed features will conflict, and the test above will tell you if a merge brings network code back.
+
+## License
+
+MIT, as upstream. See `LICENSE`. The design follows OpenMausBot (Apache-2.0); see `NOTICE`.

package/client/AttachmentPill.tsx

@@ -0,0 +1,145 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+import { Icon, Modal, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { useState, type ReactNode } from "react";
+import { ActivityIndicator, Image, Platform, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { getFileTypeLabel, type ComposerAttachment } from "../shared/attachments";
+import { MONO_FONT, MONO_PROPS, nativeTokens } from "./native";
+import { code, codeLine, ui } from "./typography";
+import { tooltip } from "./ui/Tooltip";
+import { useT } from "./i18n/use-t";
+
+type Colors = PluginTheme["colors"];
+
+// Paseo's attachment pill (components/attachment-pill.tsx): every body is 48 high inside a
+// radius-6 frame with a borderAccent border; images are 48x48 thumbnails, the rest a
+// labelled body (18 icon slot with FileText 14, name over the file type) up to 260 wide.
+// The remove button sits on the top-left corner and, on desktop, only shows on hover.
+const CONTENT_HEIGHT = 48;
+
+interface AttachmentPillProps {
+  colors: Colors;
+  attachment: ComposerAttachment;
+  onRemove?(): void;
+  disabled?: boolean;
+  /** Paseo always shows the remove button on phones and compact layouts. Defaults to native platforms. */
+  alwaysShowRemove?: boolean;
+}
+
+export function AttachmentPill({ colors, attachment, onRemove, disabled, alwaysShowRemove }: AttachmentPillProps) {
+  const { t } = useT();
+  const [open, setOpen] = useState(false);
+  const [bodyHovered, setBodyHovered] = useState(false);
+  const [closeHovered, setCloseHovered] = useState(false);
+  const showRemove = (alwaysShowRemove ?? Platform.OS !== "web") || bodyHovered || closeHovered;
+  const canOpen = attachment.kind !== "file";
+  const openLabel = attachment.kind === "image" ? t("attachment.openImage") : t("attachment.openFile", { name: attachment.name });
+  const removeLabel = attachment.kind === "image" ? t("attachment.removeImage") : t("attachment.removeFile");
+
+  return (
+    <View style={{ position: "relative" }}>
+      <Pressable
+        accessibilityRole={canOpen ? "button" : undefined}
+        accessibilityLabel={canOpen ? openLabel : attachment.name}
+        disabled={!canOpen}
+        onPress={() => setOpen(true)}
+        onHoverIn={() => setBodyHovered(true)}
+        onHoverOut={() => setBodyHovered(false)}
+        style={frameStyle(colors)}
+      >
+        {attachment.kind === "image" ? (
+          <Image source={{ uri: imageUri(attachment) }} style={{ width: CONTENT_HEIGHT, height: CONTENT_HEIGHT }} />
+        ) : (
+          <AttachmentLabel colors={colors} icon={<Icon name="FileText" size={14} color={colors.foregroundMuted} />} title={attachment.name} subtitle={subtitleFor(attachment)} />
+        )}
+      </Pressable>
+      {onRemove ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={removeLabel}
+          {...tooltip(t("attachment.remove"))}
+          onPress={onRemove}
+          disabled={disabled || !showRemove}
+          onHoverIn={() => setCloseHovered(true)}
+          onHoverOut={() => setCloseHovered(false)}
+          hitSlop={8}
+          style={{
+            position: "absolute",
+            top: -8,
+            left: -8,
+            width: 24,
+            height: 24,
+            borderRadius: 12,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: colors.surface2,
+            borderWidth: 1,
+            borderColor: colors.border,
+            zIndex: 1,
+            opacity: showRemove ? 1 : 0,
+          }}
+        >
+          <Icon name="X" size={12} color={colors.foregroundMuted} />
+        </Pressable>
+      ) : null}
+      {open ? <AttachmentPreview colors={colors} attachment={attachment} onClose={() => setOpen(false)} /> : null}
+    </View>
+  );
+}
+
+/** A file still being read or uploaded: Paseo's pending pill with a spinner in the icon slot and no remove button. */
+export function PendingAttachmentPill({ colors, name }: { colors: Colors; name: string }) {
+  const { t } = useT();
+  return (
+    <View accessibilityLabel={t("attachment.attaching", { name })} style={frameStyle(colors)}>
+      <AttachmentLabel colors={colors} icon={<ActivityIndicator size="small" color={colors.foregroundMuted} />} title={name} subtitle={getFileTypeLabel(name) ?? ""} />
+    </View>
+  );
+}
+
+function frameStyle(colors: Colors) {
+  return { borderRadius: 6, borderWidth: 1, borderColor: nativeTokens(colors).borderAccent, overflow: "hidden" as const };
+}
+
+function imageUri(attachment: Extract<ComposerAttachment, { kind: "image" }>): string {
+  return `data:${attachment.mimeType};base64,${attachment.data}`;
+}
+
+function subtitleFor(attachment: ComposerAttachment): string {
+  return getFileTypeLabel(attachment.name) ?? (attachment.kind === "text" ? "TXT" : "");
+}
+
+function AttachmentLabel({ colors, icon, title, subtitle }: { colors: Colors; icon: ReactNode; title: string; subtitle: string }) {
+  return (
+    <View style={{ height: CONTENT_HEIGHT, maxWidth: 260, flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, backgroundColor: colors.surface1 }}>
+      <View style={{ width: 18, alignItems: "center", justifyContent: "center" }}>{icon}</View>
+      <View style={{ minWidth: 0, flexShrink: 1 }}>
+        <Text numberOfLines={1} style={{ fontSize: ui(14), color: colors.foreground }}>
+          {title}
+        </Text>
+        <Text numberOfLines={1} style={{ fontSize: ui(12), color: colors.foregroundMuted }}>
+          {subtitle}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+/** Paseo's attachment lightbox for images; pasted and attached text opens as a read-only preview. */
+function AttachmentPreview({ colors, attachment, onClose }: { colors: Colors; attachment: ComposerAttachment; onClose(): void }) {
+  const { height } = useWindowDimensions();
+  return (
+    <Modal title={attachment.name} open onOpenChange={(value) => !value && onClose()}>
+      <Modal.Content scrollable={attachment.kind !== "text"}>
+        {attachment.kind === "image" ? (
+          <Image accessibilityLabel={attachment.name} source={{ uri: imageUri(attachment) }} resizeMode="contain" style={{ width: "100%", height: Math.round(height * 0.6) }} />
+        ) : attachment.kind === "text" ? (
+          <ScrollView style={{ maxHeight: Math.round(height * 0.6) }}>
+            <Text selectable {...MONO_PROPS} style={{ fontFamily: MONO_FONT, fontSize: code(), lineHeight: codeLine(), color: colors.foreground }}>
+              {attachment.text}
+            </Text>
+          </ScrollView>
+        ) : null}
+      </Modal.Content>
+    </Modal>
+  );
+}

package/client/Avatar.tsx

@@ -0,0 +1,94 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { Image, View } from "react-native";
+import { pixelAvatar, SPRITE_SIZE } from "../shared/avatar";
+import type { BotAvatar, BotGroup } from "../shared/bot";
+import { teamLogoOf } from "../shared/groups";
+import type { PixelRun } from "../shared/pixel";
+import { LOGO_SIZE, teamLogo } from "../shared/team-logo";
+
+interface AvatarProps {
+  avatar: Pick<BotAvatar, "seed"> & Partial<BotAvatar>;
+  size: number;
+  /** Overrides the surrounding AvatarTheme; sheets need it, as Paseo draws them outside the plugin's tree on phones. */
+  dark?: boolean;
+}
+
+const AvatarThemeContext = createContext(false);
+
+/** Tells every Avatar below it whether the theme is dark, so pastel backgrounds are toned down. */
+/** Pictures are shown only from a data: URL, so the browser never fetches an address. */
+function isDataImage(url: string | null | undefined): boolean {
+  return !!url && url.startsWith("data:image/");
+}
+
+export function AvatarTheme({ dark, children }: { dark: boolean; children: ReactNode }) {
+  return <AvatarThemeContext.Provider value={dark}>{children}</AvatarThemeContext.Provider>;
+}
+
+function radiusFor(shape: BotAvatar["shape"] | undefined, size: number): number {
+  return shape === "square" ? size * 0.12 : shape === "rounded" ? size * 0.28 : size / 2;
+}
+
+export function Avatar({ avatar, size, dark: darkProp }: AvatarProps) {
+  const themeDark = useContext(AvatarThemeContext);
+  const dark = darkProp ?? themeDark;
+  const palette = avatar.palette ?? null;
+  const sprite = useMemo(() => pixelAvatar(avatar.seed, palette, { dark }), [avatar.seed, palette, dark]);
+  const radius = radiusFor(avatar.shape, size);
+  if (isDataImage(avatar.imageUrl)) {
+    return <Image accessibilityIgnoresInvertColors source={{ uri: avatar.imageUrl! }} style={{ width: size, height: size, borderRadius: radius }} />;
+  }
+  return <PixelSprite sprite={sprite} size={size} radius={radius} />;
+}
+
+/** A team's logo: its picture, or the generated pixel-art motif on a rounded tile. */
+export function TeamLogo({ group, size, dark: darkProp }: { group: Pick<BotGroup, "id" | "logo">; size: number; dark?: boolean }) {
+  const themeDark = useContext(AvatarThemeContext);
+  const dark = darkProp ?? themeDark;
+  const logo = teamLogoOf(group);
+  const image = useMemo(() => teamLogo(logo.seed, logo.palette, { dark }), [logo.seed, logo.palette, dark]);
+  const radius = size / 4;
+  if (isDataImage(logo.imageUrl)) {
+    return <Image accessibilityIgnoresInvertColors source={{ uri: logo.imageUrl! }} style={{ width: size, height: size, borderRadius: radius }} />;
+  }
+  // The motif has its margin drawn in, so it fills the tile.
+  return <PixelSprite sprite={image} size={size} radius={radius} grid={LOGO_SIZE} inset={false} />;
+}
+
+/**
+ * Draws a generated sprite: one View per same-coloured run on a rounded background. Avatars
+ * sit inset in their frame except when small; `inset` false fills it (team logos).
+ */
+export function PixelSprite({ sprite, size, radius = size / 2, grid = SPRITE_SIZE, inset = true }: { sprite: { background: string; rows: PixelRun[][] }; size: number; radius?: number; grid?: number; inset?: boolean }) {
+  // Small avatars (sidebar rows) use the full frame so each sprite pixel stays about one point.
+  const inner = !inset || size <= 24 ? size : size * 0.82;
+  const pixel = inner / grid;
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{ width: size, height: size, borderRadius: radius, backgroundColor: sprite.background, alignItems: "center", justifyContent: "center", overflow: "hidden" }}
+    >
+      <View style={{ width: inner, height: inner }}>
+        {sprite.rows.map((runs, y) =>
+          runs.map((run) =>
+            run.color ? (
+              <View
+                key={`${y}-${run.x}`}
+                style={{
+                  position: "absolute",
+                  left: run.x * pixel,
+                  top: y * pixel,
+                  // Overlap by a hair so fractional pixel sizes don't leave seams.
+                  width: run.width * pixel + 0.3,
+                  height: pixel + 0.3,
+                  backgroundColor: run.color,
+                }}
+              />
+            ) : null,
+          ),
+        )}
+      </View>
+    </View>
+  );
+}