Community-code notice on pg mod + moddable prompt defaults to yes

.changeset/mod-community-notice.md

@@ -0,0 +1,5 @@
+---
+"playground-cli": patch
+---
+
+`playground mod` now shows a community-code notice before downloading an app: a callout above the interactive picker list, and the same notice on the setup screen for the direct `playground mod <domain>` path. It tells users that apps are community-published open source, not reviewed, and that modding runs the app's setup script on their machine. Also, the moddable prompt in `playground deploy` now defaults its cursor to yes.

src/commands/deploy/DeployScreen.tsx

@@ -307,7 +307,7 @@ export function DeployScreen({
                         },
                         { value: true, label: "yes", hint: "publishes your source repo URL" },
                     ]}
-                    initialIndex={0}
+                    initialIndex={1}
                     onSelect={(yes) => {
                         setModdable(yes);
                         if (yes) {

src/commands/mod/AppBrowser.tsx

@@ -15,9 +15,10 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import { Box, Text, useInput, useStdout } from "ink";
-import { Mark, Hint, COLOR } from "../../utils/ui/theme/index.js";
+import { Mark, Hint, Callout, COLOR } from "../../utils/ui/theme/index.js";
 import { fetchBulletinJson, getBulletinGateway } from "../../utils/bulletinGateway.js";
 
+import { COMMUNITY_NOTICE_TITLE, COMMUNITY_NOTICE_BODY } from "./communityNotice.js";
 import { filterModdable, type AppEntry } from "./browserFilter.js";
 export type { AppEntry };
 
@@ -37,7 +38,9 @@ function pad(s: string, w: number): string {
 
 export function AppBrowser({ registry, onSelect, onCancel, moddableOnly }: Props) {
     const { stdout } = useStdout();
-    const viewH = Math.max((stdout?.rows ?? 24) - 6, 5);
+    // The community-code callout above the list takes ~8 rows (margins,
+    // borders, title, wrapped body), on top of the 6 rows of list chrome.
+    const viewH = Math.max((stdout?.rows ?? 24) - 14, 5);
 
     const [apps, setApps] = useState<AppEntry[]>([]);
     const [total, setTotal] = useState(0);
@@ -168,54 +171,59 @@ export function AppBrowser({ registry, onSelect, onCancel, moddableOnly }: Props
     const descW = Math.max((stdout?.columns ?? 80) - COL.num - COL.domain - COL.name - 10, 10);
 
     return (
-        <Box flexDirection="column" paddingLeft={2}>
-            <Box>
-                <Text dimColor>
-                    {`${pad(" #", COL.num)}  ${pad("domain", COL.domain)}  ${pad(
-                        "name",
-                        COL.name,
-                    )}  description`}
-                </Text>
-            </Box>
-            <Box>
-                <Text dimColor>{"─".repeat(COL.num + COL.domain + COL.name + descW + 6)}</Text>
-            </Box>
+        <Box flexDirection="column">
+            <Callout tone="warning" title={COMMUNITY_NOTICE_TITLE}>
+                <Text>{COMMUNITY_NOTICE_BODY}</Text>
+            </Callout>
+            <Box flexDirection="column" paddingLeft={2}>
+                <Box>
+                    <Text dimColor>
+                        {`${pad(" #", COL.num)}  ${pad("domain", COL.domain)}  ${pad(
+                            "name",
+                            COL.name,
+                        )}  description`}
+                    </Text>
+                </Box>
+                <Box>
+                    <Text dimColor>{"─".repeat(COL.num + COL.domain + COL.name + descW + 6)}</Text>
+                </Box>
 
-            {visible.map((app, i) => {
-                const idx = scroll + i;
-                const sel = idx === cursor;
-                const num = sel
-                    ? `›${String(idx + 1).padStart(COL.num - 1)}`
-                    : ` ${String(idx + 1).padStart(COL.num - 1)}`;
-                return (
-                    <Box key={idx}>
-                        <Text bold={sel} color={sel ? COLOR.accent : undefined}>
-                            {`${num}  ${pad(app.domain, COL.domain)}  ${pad(
-                                app.name ?? (app.name === null ? "…" : "—"),
-                                COL.name,
-                            )}  ${pad(app.description ?? "", descW)}`}
-                        </Text>
-                    </Box>
-                );
-            })}
+                {visible.map((app, i) => {
+                    const idx = scroll + i;
+                    const sel = idx === cursor;
+                    const num = sel
+                        ? `›${String(idx + 1).padStart(COL.num - 1)}`
+                        : ` ${String(idx + 1).padStart(COL.num - 1)}`;
+                    return (
+                        <Box key={idx}>
+                            <Text bold={sel} color={sel ? COLOR.accent : undefined}>
+                                {`${num}  ${pad(app.domain, COL.domain)}  ${pad(
+                                    app.name ?? (app.name === null ? "…" : "—"),
+                                    COL.name,
+                                )}  ${pad(app.description ?? "", descW)}`}
+                            </Text>
+                        </Box>
+                    );
+                })}
 
-            {fetching && (
-                <Box gap={1} marginTop={1} paddingLeft={0}>
-                    <Mark kind="run" />
-                    <Text dimColor>loading apps…</Text>
-                </Box>
-            )}
-            {!fetching && filtered.length === 0 && nextStart.current === null && (
-                <Box marginTop={1}>
-                    <Text dimColor>No moddable apps in the registry yet.</Text>
+                {fetching && (
+                    <Box gap={1} marginTop={1} paddingLeft={0}>
+                        <Mark kind="run" />
+                        <Text dimColor>loading apps…</Text>
+                    </Box>
+                )}
+                {!fetching && filtered.length === 0 && nextStart.current === null && (
+                    <Box marginTop={1}>
+                        <Text dimColor>No moddable apps in the registry yet.</Text>
+                    </Box>
+                )}
+                <Box marginTop={fetching ? 0 : 1}>
+                    <Hint>{`↑↓ navigate  ·  ⏎ select  ·  q quit  ·  ${
+                        moddableOnly
+                            ? `(${filtered.length} moddable, ${apps.length}/${total} scanned)`
+                            : `(${apps.length}/${total})`
+                    }`}</Hint>
                 </Box>
-            )}
-            <Box marginTop={fetching ? 0 : 1}>
-                <Hint>{`↑↓ navigate  ·  ⏎ select  ·  q quit  ·  ${
-                    moddableOnly
-                        ? `(${filtered.length} moddable, ${apps.length}/${total} scanned)`
-                        : `(${apps.length}/${total})`
-                }`}</Hint>
             </Box>
         </Box>
     );

src/commands/mod/SetupScreen.tsx

@@ -14,11 +14,12 @@
 // limitations under the License.
 
 import { useRef, useState } from "react";
-import { Box } from "ink";
+import { Box, Text } from "ink";
 import { existsSync, readFileSync, writeFileSync, appendFileSync } from "node:fs";
 import { resolve } from "node:path";
 import { StepRunner, type Step } from "../../utils/ui/components/StepRunner.js";
-import { Header, Hint, Row, Section } from "../../utils/ui/theme/index.js";
+import { Header, Hint, Row, Section, Callout } from "../../utils/ui/theme/index.js";
+import { COMMUNITY_NOTICE_TITLE, COMMUNITY_NOTICE_BODY } from "./communityNotice.js";
 import { runCommand } from "../../utils/git.js";
 import { createOptionalGitBaseline } from "../../utils/mod/git-baseline.js";
 import { downloadGitHubTarball, parseGitHubRepoUrl } from "../../utils/mod/source.js";
@@ -140,6 +141,15 @@ export function SetupScreen({ domain, metadata: initial, registry, targetDir, on
                 right={VERSION_LABEL}
             />
 
+            {/* The interactive picker already showed this notice above the
+                app list; only the direct `playground mod <domain>` path
+                (no pre-fetched metadata) needs it here. */}
+            {initial === null && (
+                <Callout tone="warning" title={COMMUNITY_NOTICE_TITLE}>
+                    <Text>{COMMUNITY_NOTICE_BODY}</Text>
+                </Callout>
+            )}
+
             <StepRunner
                 title={`modding ${domain}`}
                 steps={steps}

src/commands/mod/communityNotice.ts

@@ -0,0 +1,31 @@
+// Copyright (C) Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * Community-code notice shown before a mod touches the user's machine.
+ *
+ * `playground mod` downloads a publisher-controlled repo and executes its
+ * `setup.sh`, so both entry points surface the same light disclaimer first:
+ * the interactive picker renders it above the app list, and the direct
+ * `playground mod <domain>` path renders it on the setup screen. The wording
+ * follows the marketplace-standard pair (unreviewed community content + use
+ * at your own risk) without license-text legalese.
+ */
+export const COMMUNITY_NOTICE_TITLE = "Community Code";
+
+export const COMMUNITY_NOTICE_BODY =
+    "Apps here are open source, published by the community, and not reviewed. " +
+    "Modding downloads the source and runs its setup script on your machine. " +
+    "Review anything you don't trust first and use at your own risk.";