@fungi.computer/parakeet 0.4.0 → 0.5.0

package/docs/api/index.md

@@ -147,12 +147,13 @@ type ComposerController = Readonly<{
   recall: () => Promise<QueuedRecallOutcome>;
   checkpointDraft: () => ParakeetDraftCheckpoint;
   failure: "admission" | "failed" | "cancelled" | "interrupted" | undefined;
-  admissionError: "queue_full" | undefined;
+  admissionError: "offline_queue_full" | "queue_full" | undefined;
   retry: () => void;
   dismissFailed: (requestId) => void;
   send: (delivery?) => void;
   submitCommand: (run) => Promise<WhistleExecutionOutcome | undefined>;
   setDraft: (value) => void;
+  setImages: (images) => void;
 }>;
 ```
 
@@ -494,6 +495,7 @@ type ParakeetProps = Readonly<{
   clients?: readonly ClientEntryV1[];
   composerActionVariant?: "primary" | "outline";
   renderToolActions?: (item) => ReactNode;
+  claimsToolMedia?: (item) => boolean;
   renderAssistantAttachment?: (text) => ReactNode;
   formatAssistantText?: (text) => string;
   onLink?: (href) => boolean;
@@ -515,6 +517,7 @@ type ParakeetViewProps = Readonly<{
   visitor?: ParakeetVisitor;
   composerActionVariant?: "primary" | "outline";
   renderToolActions?: (item) => ReactNode;
+  claimsToolMedia?: (item) => boolean;
   renderAssistantAttachment?: (text) => ReactNode;
   formatAssistantText?: (text) => string;
   onLink?: (href) => boolean;
@@ -558,6 +561,7 @@ type ParakeetSessionCommand = {
     | Readonly<{
         status: "accepted";
         commandId: string;
+        sessionId?: string;
       }>
     | Readonly<{
         status: "recorded";
@@ -665,6 +669,7 @@ Return the owner-issued address of a forked Session.
   | Readonly<{
   status: "accepted";
   commandId: string;
+  sessionId?: string;
 }>
   | Readonly<{
   status: "recorded";
@@ -693,9 +698,10 @@ Dispatch a typed command without inventing an admission result.
 ##### Returns
 
 `Promise`\< \| `Readonly`\<\{ `status`: `"accepted"`; `commandId`: `string`;
-\}\> \| `Readonly`\<\{ `status`: `"recorded"`; \}\> \| `Readonly`\<\{ `status`:
-`"too_late"`; `commandId`: `string`; \}\> \| `Readonly`\<\{ `status`:
-`"unknown"`; \}\> \| `Readonly`\<\{ `sessionId`: `string`; \}\> \| `undefined`\>
+`sessionId?`: `string`; \}\> \| `Readonly`\<\{ `status`: `"recorded"`; \}\> \|
+`Readonly`\<\{ `status`: `"too_late"`; `commandId`: `string`; \}\> \|
+`Readonly`\<\{ `status`: `"unknown"`; \}\> \| `Readonly`\<\{ `sessionId`:
+`string`; \}\> \| `undefined`\>
 
 ---
 
@@ -748,6 +754,9 @@ type ParakeetAssistantMessageItem = Readonly<{
   pending: boolean;
   at?: number;
   text: string;
+  providerError?: string;
+  errorDetail?: string;
+  repeatCount?: number;
   thinking?: string;
   usage?: Readonly<{
     cost: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/parakeet",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "Levi <levi@technomancy.dev>",
   "private": false,
   "description": "Standalone React composer for a typed Shiitake Session",
@@ -31,6 +31,11 @@
       "types": "./dist/commands/slash.d.ts",
       "import": "./dist/commands/slash.js"
     },
+    "./completion-menu": {
+      "types": "./dist/components/CompletionMenu.d.ts",
+      "import": "./dist/components/CompletionMenu.js"
+    },
+    "./completion-menu.css": "./src/completion-menu.css",
     "./styles.css": "./dist/styles.css",
     "./tailwind.css": "./src/styles.css"
   },
@@ -39,6 +44,7 @@
     "README.md",
     "LICENSE",
     "src/styles.css",
+    "src/completion-menu.css",
     "docs/api"
   ],
   "peerDependencies": {
@@ -47,17 +53,17 @@
     "react-dom": "^18.2.0 || ^19.2.0"
   },
   "dependencies": {
-    "@fungi.computer/agar": "0.4.0",
-    "@fungi.computer/bird-dog": "0.2.1",
+    "@fungi.computer/agar": "0.5.0",
+    "@fungi.computer/bird-dog": "0.3.0",
     "@fungi.computer/cairn": "0.1.0",
-    "@fungi.computer/caps": "0.3.1",
+    "@fungi.computer/caps": "0.4.0",
     "@fungi.computer/gills": "0.2.0",
-    "@fungi.computer/knapsack": "0.3.1",
-    "@fungi.computer/shiitake": "0.5.0",
+    "@fungi.computer/knapsack": "0.4.0",
+    "@fungi.computer/shiitake": "0.6.0",
     "@fungi.computer/sigils": "0.2.0",
     "@fungi.computer/sprite": "0.2.0",
     "@fungi.computer/sprite-zdog": "0.2.0",
-    "@fungi.computer/whistle": "0.2.0",
+    "@fungi.computer/whistle": "0.3.0",
     "@tanstack/markdown": "0.0.12",
     "@tanstack/react-virtual": "3.14.10",
     "diff": "8.0.4",

package/src/completion-menu.css

@@ -0,0 +1,71 @@
+/* The shared completion menu's look: Grove's slash commands and Prints' slash and @character menus. */
+
+/*
+ * The menu joins the composer surface instead of floating as a second box:
+ * same width and inset, flush on its top edge, and the surface's own top
+ * border is the one line between them. --parakeet-completion-inset is the
+ * distance from the menu's containing block to the surface's outer edge: an
+ * anchor's padding (Grove) or minus a positioned card's border (Prints).
+ * --parakeet-completion-face and --parakeet-completion-edge carry the
+ * surface's own background and border colour, so the two read as one.
+ */
+.caps-popover[data-parakeet-slash][data-side="top"] {
+  inset-inline: var(--parakeet-completion-inset, 0);
+  bottom: calc(100% - var(--parakeet-completion-inset, 0px));
+  border-color: var(
+    --parakeet-completion-edge,
+    color-mix(in oklab, var(--color-base-content) 16%, transparent)
+  );
+  border-bottom-width: 0;
+  background: var(--parakeet-completion-face, var(--color-base-200));
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  box-shadow: none;
+}
+.parakeet-slash-menu .parakeet-slash-label {
+  min-width: 7rem;
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+.parakeet-slash-match {
+  background: none;
+  color: var(--color-primary);
+}
+
+.parakeet-slash-detail {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--stipe-fg-muted);
+}
+
+.parakeet-slash-keys {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--stipe-fg-muted);
+}
+
+.parakeet-slash-hint {
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--stipe-fg-muted);
+}
+
+.parakeet-slash-menu [data-disabled="true"] {
+  opacity: 0.5;
+}
+
+/* A row with a thumbnail centres its text on the thumbnail rather than its top. */
+.parakeet-slash-menu [role="option"]:has(> .parakeet-slash-media) {
+  align-items: center;
+}
+
+.parakeet-slash-media {
+  display: flex;
+  flex: none;
+}

package/src/styles.css

@@ -4,6 +4,7 @@
  * and chat composition: consumers load it instead of an additional Caps sheet.
  */
 @import "@fungi.computer/caps/tailwind.css";
+@import "./completion-menu.css";
 
 /* In the workspace Tailwind scans the component source; published, this
  * entry ships without it, and the compiled components in dist carry the same
@@ -13,12 +14,6 @@
 
 @plugin "@tailwindcss/typography";
 
-@layer components {
-  .chat-composer {
-    border-top: 1px solid var(--color-base-300);
-  }
-}
-
 :root {
   --prose-max-width: 80ch;
   --tool-error-rail: #fff7a0;
@@ -43,66 +38,190 @@
   overflow-wrap: break-word;
 }
 
+/* The composer is one surface, seated like the Prints composer: a Caps Card
+   docked at the bottom. Text is typed straight onto it, and its bottom row is
+   the same Caps StatusTray row Prints uses: attach, model, Settings, Send. */
 .chat-composer {
-  background: var(--color-base-100);
   flex-shrink: 0;
+  padding: 0 var(--spacing-xs) var(--spacing-xs);
 }
 
 .chat-composer .composer-body {
+  /* The completion menu rises from the card's top edge, in the card's own
+     face and edge, so menu and card read as one surface. */
+  --parakeet-completion-inset: 0px;
+  --parakeet-completion-face: var(--color-base-200);
+  --parakeet-completion-edge: var(--stipe-hairline);
+  display: block;
+}
+
+/* An open completion menu sits on the card's top edge, so the card squares off to join it. */
+.chat-composer .composer-body:has(> [data-parakeet-slash]) .composer-card {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.chat-composer .composer-card {
+  padding: var(--spacing-sm);
+}
+
+.chat-composer .composer-card .caps-composer-input {
+  padding: var(--spacing-xs) var(--spacing-sm) 0;
+}
+
+.chat-composer .composer-attachments {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  margin: 0;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  list-style: none;
+}
+
+.chat-composer .composer-attachments li {
+  position: relative;
+}
+
+.chat-composer .composer-attachments img {
+  display: block;
+  width: 3.5rem;
+  height: 3.5rem;
+  object-fit: cover;
+}
+
+/* Remove shows on hover or focus, the way a Prints reference tile does. */
+.chat-composer .composer-attachment-remove {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  background: var(--color-base-100);
+  opacity: 0;
+}
+.chat-composer .composer-attachments li:hover .composer-attachment-remove,
+.chat-composer
+  .composer-attachments
+  li:focus-within
+  .composer-attachment-remove {
+  opacity: 1;
+}
+@media (hover: none) {
+  .chat-composer .composer-attachment-remove {
+    opacity: 1;
+  }
 }
 
 .chat-composer .composer-footer {
-  display: flex;
-  height: 32px;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0 0.75rem;
-  background: var(--color-base-200);
-  color: var(--color-base-content);
-  font-family: var(--font-sans);
-  font-size: 0.65rem;
+  padding: var(--spacing-xs);
 }
 
-.chat-composer .parakeet-slash-label {
-  min-width: 7rem;
+/* Model key and Settings chip read like Prints' model select and chip. */
+.chat-composer .composer-model-key {
+  flex: 0 1 220px;
+  min-width: 0;
+  font-size: var(--text-xs);
+}
+
+.chat-composer .composer-model-readout,
+.chat-composer .composer-status-chip {
+  color: var(--stipe-fg-muted);
+  font-size: var(--text-xs);
+}
+
+.chat-composer .composer-model-readout {
   font-family: var(--font-mono);
-  font-weight: 600;
 }
 
-.chat-composer .parakeet-slash-match {
-  background: none;
-  color: var(--color-primary);
+.chat-composer .composer-settings-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.chat-composer .composer-settings-chip > svg {
+  width: var(--stipe-icon-size-sm);
+  height: var(--stipe-icon-size-sm);
 }
 
-.chat-composer .parakeet-slash-detail {
-  flex: 1;
+.chat-composer .composer-model-key .caps-keycap-button-label {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--stipe-fg-muted);
 }
 
-.chat-composer .parakeet-slash-keys {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  color: var(--stipe-fg-muted);
+/* Narrow composers keep one row (attach, model, Settings, Send) like Prints:
+   the model key gives up width first, and Send stays one key at the end. */
+.chat-composer .composer-card {
+  container-type: inline-size;
+}
+@container (max-width: 34rem) {
+  .chat-composer .composer-model-key {
+    flex: 1 1 4rem;
+  }
+  .chat-composer [data-status-tray-chip="settings"] {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+  /* Narrow, the readout steps aside; the Settings tray still holds it. */
+  .chat-composer .composer-readout {
+    display: none;
+  }
 }
 
-.chat-composer .parakeet-slash-hint {
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
+/* Context, tokens and cost read as quiet text beside Send, not a chip. */
+.chat-composer .composer-readout {
+  margin-inline-start: auto;
   color: var(--stipe-fg-muted);
+  font-size: var(--text-xs);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* Send sits at the row's end, like Generate in Prints. */
+.chat-composer .composer-send-key {
+  margin-inline-start: auto;
+}
+.chat-composer .composer-readout + .composer-send-key {
+  margin-inline-start: var(--spacing-sm);
+}
+
+/* A decision that took the composer over sits on the same surface: its
+   choices are rows on the composer, not a floating list box inside it. */
+.chat-composer .parakeet-decision {
+  padding: var(--spacing-xs) var(--spacing-sm) 0;
+}
+/* The options are the composer's own rows, not a box inside it. Rows and
+ * the Details trigger keep a small hover inset and pull out by it, so their
+ * text shares the title's left edge. */
+.chat-composer .parakeet-decision-list {
+  width: auto;
+  margin-inline: calc(-1 * var(--spacing-xs));
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+.chat-composer .parakeet-decision .caps-disclosure-trigger {
+  width: auto;
+  margin-inline: calc(-1 * var(--spacing-xs));
+  padding-inline: var(--spacing-xs);
+}
+.chat-composer .composer-model-key {
+  --caps-keycap-justify: space-between;
 }
 
-.chat-composer [data-disabled="true"] {
-  opacity: 0.5;
+/* A decision's highlight is the reducer's, not the list's own active row. */
+.parakeet-decision .parakeet-decision-list [role="option"] {
+  padding-inline: var(--spacing-xs);
+  background: transparent;
+}
+
+.parakeet-decision > [data-highlight],
+.parakeet-decision
+  .parakeet-decision-list
+  [role="option"]:has([data-highlight]) {
+  background: var(--color-base-200);
 }
 
 .chat-composer .parakeet-command-notice[data-tone="error"] {
@@ -113,13 +232,6 @@
   color: var(--color-success);
 }
 
-.chat-composer .footer-divider {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: var(--stipe-fg-muted);
-}
-
 /* TanStack Highlight's retained Catppuccin theme. The token selectors are
    emitted here with Parakeet's browser CSS instead of injected by a host. */
 html:not([data-theme]),
@@ -261,3 +373,19 @@ pre.th-code {
 .th-code {
   font-family: var(--font-mono);
 }
+
+/* The decision's Later and Send sit on the composer's bottom edge, Send as the
+   same keycap the composer sends with. */
+.parakeet-decision-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  --caps-keycap-width: auto;
+  --caps-keycap-justify: center;
+  --caps-keycap-padding: 0 var(--spacing-md);
+  --caps-keycap-height: calc(var(--size-field) * 8);
+}
+.parakeet-decision-actions > .caps-keycap-button {
+  height: var(--caps-keycap-height);
+}