@ggui-ai/mcp-apps-react-native 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/mcp-apps-react-native",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "React Native SDK for ggui — components and hooks for embedding agent-generated UIs in mobile apps.",
   "keywords": [
     "ggui",
@@ -58,9 +58,9 @@
   },
   "dependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.2",
-    "@ggui-ai/iframe-runtime": "0.12.0",
-    "@ggui-ai/protocol": "0.12.0",
-    "@ggui-ai/design": "0.12.0"
+    "@ggui-ai/design": "0.14.0",
+    "@ggui-ai/iframe-runtime": "0.14.0",
+    "@ggui-ai/protocol": "0.14.0"
   },
   "devDependencies": {
     "@modelcontextprotocol/sdk": "^1.27.0",
@@ -76,7 +76,7 @@
     "url": "https://github.com/ggui-ai/ggui/issues"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22.0.0"
   },
   "author": "ggui contributors <hello@ggui.ai>",
   "scripts": {

package/src/McpAppIframe/dispatch.ts

@@ -202,10 +202,19 @@ export async function dispatchHostBridgeRequest(
     }
     case 'tools/call': {
       if (ctx.onToolCall === undefined) {
+        // In-band method refusal, spec shape (-32601 naming the
+        // method — the #600 catalog's H3 grade). Was -32000
+        // 'no-tool-handler'; retired (ggui#599 cycle-2) because
+        // -32000 collides with the MCP SDK's ErrorCode.ConnectionClosed
+        // and could never be classified as a confirmed refusal by the
+        // runtime's latch.
         return {
           jsonrpc: '2.0',
           id,
-          error: { code: -32000, message: 'no-tool-handler' },
+          error: {
+            code: -32601,
+            message: 'tools/call not supported: no tool handler wired',
+          },
         };
       }
       const tool = paramString(req.params, 'name');

package/src/McpAppIframe/types.ts

@@ -61,7 +61,7 @@ export interface McpAppIframePermissions {
  *   - `ui/initialize` replies carry ONLY `{theme, containerDimensions,
  *     locale}` — adapter-boundary rule.
  *   - `tools/call` forwards to `onToolCall`; absent handler → reject
- *     `no-tool-handler`.
+ *     an in-band `-32601` naming `tools/call` (was `no-tool-handler`; ggui#599 cycle-2).
  *   - `ui/open-link` with `https?://` → delegates to `Linking.openURL`;
  *     other schemes → reject `unsupported-scheme`.
  *   - Unknown method → `method_not_supported`.
@@ -166,7 +166,7 @@ export interface McpAppIframeProps {
    * iframe. The host forwards `(toolName, args)` and awaits; the
    * resolved value becomes the JSON-RPC `result`, rejections become
    * `-32000` errors. Absent handler = every `tools/call` is rejected
-   * with `no-tool-handler`.
+   * with an in-band `-32601` naming `tools/call` (was `no-tool-handler`; ggui#599 cycle-2).
    */
   readonly onToolCall?: (
     toolName: string,

package/src/components/UiFeedback.tsx

@@ -3,28 +3,32 @@
  * shell chrome ("did this generated UI work for you?").
  *
  * Platform delta (vs `ggui-react/src/components/UiFeedback.tsx`):
- *   - DOM elements (`div` / `button` / `form` / `input`) become RN
- *     primitives (`View` / `Pressable` / `Text` / `TextInput`).
+ *   - DOM elements (`div` / `button`) become RN primitives
+ *     (`View` / `Pressable` / `Text`).
  *   - Inline styles with `--ggui-*` CSS-variable hooks become
  *     `StyleSheet.create` constants carrying the same neutral palette
  *     the web copy uses as its variable fallbacks (RN has no CSS
  *     variable layer).
  *   - `data-ggui-ui-feedback*` styling/test hooks become `testID`s
  *     (`ggui-ui-feedback`, `ggui-ui-feedback-verdict-<verdict>`, …).
- *   - The comment `<form>` submit becomes a Send `Pressable` plus the
- *     `TextInput`'s `onSubmitEditing` (keyboard return key).
  *   - `role` / `aria-label` become `accessibilityLabel` /
  *     `accessibilityRole` props.
+ *   - The web copy's monochrome stroked SVG thumbs become 👍 / 👎
+ *     emoji glyphs in `Text` (#653 lean call: `react-native-svg` is
+ *     not a dependency of this package and one chrome row does not
+ *     justify adding it to the lockstep wave; the glyph renders in the
+ *     platform's emoji face rather than the theme ink — revisit if a
+ *     ggui icon dependency ever lands for other reasons).
  * The exported surface is identical to the web copy — pinned by the
  * twin-parity gate (`DOCUMENTED_DELTA_TWINS`).
  *
- * Three verdicts — Love / Dislike / Other (free-text comment) — plus a
- * dismiss control. Entirely host-driven: the component renders NOTHING
- * unless the host passes `onUiFeedback`, so deployments that don't
- * collect feedback never show a dead affordance. Where the payload
- * goes is the host's choice — a logger, an analytics client, a support
- * inbox; this component only builds the typed {@link UiFeedbackPayload}
- * and hands it over.
+ * Two verdicts — thumbs up / thumbs down (#653) — plus a dismiss
+ * control. Entirely host-driven: the component renders NOTHING unless
+ * the host passes `onUiFeedback`, so deployments that don't collect
+ * feedback never show a dead affordance. Where the payload goes is
+ * the host's choice — a logger, an analytics client, a support inbox;
+ * this component only builds the typed {@link UiFeedbackPayload} and
+ * hands it over.
  *
  * Zero wire surface: feedback never crosses the agent ↔ UI contract.
  * It is host-app chrome (Data vs Behavior — the agent cannot observe
@@ -50,20 +54,17 @@
  * choice safe: omitting `onUiFeedback` fully disables this surface.
  */
 import { useCallback, useState } from 'react';
-import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-/** The three feedback verdicts the affordance can emit. */
-export type UiFeedbackVerdict = 'love' | 'dislike' | 'other';
+/** The two feedback verdicts the affordance can emit. */
+export type UiFeedbackVerdict = 'up' | 'down';
 
 /**
  * Payload handed to {@link UiFeedbackProps.onUiFeedback}. Context
- * fields are present exactly when the host supplied them as props;
- * `comment` is present only for `verdict: 'other'` with a non-empty
- * trimmed comment.
+ * fields are present exactly when the host supplied them as props.
  */
 export interface UiFeedbackPayload {
   verdict: UiFeedbackVerdict;
-  comment?: string;
   /** GguiSession id of the render the feedback is about. */
   sessionId?: string;
   /** Tool that produced the render (e.g. `ggui_render`). */
@@ -82,19 +83,26 @@ export interface UiFeedbackProps {
   toolName?: string;
 }
 
-type Phase = 'idle' | 'comment' | 'sent' | 'dismissed';
+type Phase = 'idle' | 'sent' | 'dismissed';
+
+const VERDICT_GLYPHS: Record<UiFeedbackVerdict, string> = {
+  up: '👍',
+  down: '👎',
+};
+
+const VERDICT_LABELS: Record<UiFeedbackVerdict, string> = {
+  up: 'Thumbs up',
+  down: 'Thumbs down',
+};
 
 export function UiFeedback({ onUiFeedback, sessionId, toolName }: UiFeedbackProps) {
   const [phase, setPhase] = useState<Phase>('idle');
-  const [comment, setComment] = useState('');
 
   const emit = useCallback(
-    (verdict: UiFeedbackVerdict, commentText?: string) => {
+    (verdict: UiFeedbackVerdict) => {
       if (!onUiFeedback) return;
-      const trimmed = commentText?.trim();
       onUiFeedback({
         verdict,
-        ...(trimmed !== undefined && trimmed.length > 0 ? { comment: trimmed } : {}),
         ...(sessionId !== undefined ? { sessionId } : {}),
         ...(toolName !== undefined ? { toolName } : {}),
       });
@@ -103,10 +111,6 @@ export function UiFeedback({ onUiFeedback, sessionId, toolName }: UiFeedbackProp
     [onUiFeedback, sessionId, toolName],
   );
 
-  const onCommentSubmit = useCallback(() => {
-    emit('other', comment);
-  }, [emit, comment]);
-
   // Hidden entirely: no sink wired, or the user dismissed it.
   if (!onUiFeedback || phase === 'dismissed') return null;
 
@@ -120,54 +124,19 @@ export function UiFeedback({ onUiFeedback, sessionId, toolName }: UiFeedbackProp
         <Text testID="ggui-ui-feedback-thanks" style={styles.thanksText}>
           Thanks for the feedback
         </Text>
-      ) : phase === 'comment' ? (
-        <View style={styles.commentForm} testID="ggui-ui-feedback-comment-form">
-          <TextInput
-            value={comment}
-            onChangeText={setComment}
-            onSubmitEditing={onCommentSubmit}
-            placeholder="What happened?"
-            accessibilityLabel="Feedback comment"
-            testID="ggui-ui-feedback-comment"
-            style={styles.commentInput}
-            autoFocus
-          />
-          <Pressable
-            accessibilityRole="button"
-            style={styles.verdictButton}
-            testID="ggui-ui-feedback-send"
-            onPress={onCommentSubmit}
-          >
-            <Text style={styles.verdictText}>Send</Text>
-          </Pressable>
-        </View>
       ) : (
-        <>
+        (['up', 'down'] as const).map((verdict) => (
           <Pressable
+            key={verdict}
             accessibilityRole="button"
+            accessibilityLabel={VERDICT_LABELS[verdict]}
             style={styles.verdictButton}
-            testID="ggui-ui-feedback-verdict-love"
-            onPress={() => emit('love')}
+            testID={`ggui-ui-feedback-verdict-${verdict}`}
+            onPress={() => emit(verdict)}
           >
-            <Text style={styles.verdictText}>Love</Text>
+            <Text style={styles.verdictText}>{VERDICT_GLYPHS[verdict]}</Text>
           </Pressable>
-          <Pressable
-            accessibilityRole="button"
-            style={styles.verdictButton}
-            testID="ggui-ui-feedback-verdict-dislike"
-            onPress={() => emit('dislike')}
-          >
-            <Text style={styles.verdictText}>Dislike</Text>
-          </Pressable>
-          <Pressable
-            accessibilityRole="button"
-            style={styles.verdictButton}
-            testID="ggui-ui-feedback-verdict-other"
-            onPress={() => setPhase('comment')}
-          >
-            <Text style={styles.verdictText}>Other…</Text>
-          </Pressable>
-        </>
+        ))
       )}
       <Pressable
         accessibilityRole="button"
@@ -199,12 +168,12 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#e5e7eb',
     borderRadius: 4,
-    paddingVertical: 2,
-    paddingHorizontal: 8,
+    paddingVertical: 3,
+    paddingHorizontal: 7,
   },
   verdictText: {
     fontSize: 12,
-    color: '#4b5563',
+    lineHeight: 14,
   },
   dismissButton: {
     paddingVertical: 2,
@@ -214,20 +183,4 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: '#9ca3af',
   },
-  commentForm: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-  },
-  commentInput: {
-    fontSize: 12,
-    paddingVertical: 2,
-    paddingHorizontal: 6,
-    minWidth: 140,
-    borderWidth: 1,
-    borderColor: '#e5e7eb',
-    borderRadius: 4,
-    backgroundColor: '#ffffff',
-    color: '#1f2937',
-  },
 });