paseo-tab-namer 0.1.0 → 0.2.0

package/OVERVIEW.md

@@ -1,6 +1,6 @@
 # Tab Namer
 
-Tab Namer gives an existing workspace a new name based on what its Tabs are about. Open it from the ✨ button in the workspace header or from the command center. You can preview the input, choose which Tabs to use, and generate again. A generated name is applied right away. To apply a name you edited by hand, click "应用手动修改" (Apply manual edit).
+Tab Namer gives an existing workspace a new name based on what its Tabs are about. Open it from the ✨ button in the workspace header or from the command center. You can preview the input, choose which Tabs to use, and generate again. A generated name is applied right away. To apply a name you edited by hand, click "应用" (Apply) next to the name field.
 
 The settings screen holds one naming prompt, model, maximum input budget, name length, and timeout for all workspaces. You pick the provider and model from the providers already enabled on this Paseo host. The plugin has no endpoint of its own and never handles API keys.
 

package/OVERVIEW.zh-CN.md

@@ -1,6 +1,6 @@
 # Tab Namer
 
-根据 Tab 内容为已有 workspace 生成新名称。通过顶部 ✨ 按钮或命令中心打开。可以预览输入、选择 Tab 范围和反复生成；生成成功后立即自动应用。手动编辑时可点击“应用手动修改”。
+根据 Tab 内容为已有 workspace 生成新名称。通过顶部 ✨ 按钮或命令中心打开。可以预览输入、选择 Tab 范围和反复生成；生成成功后立即自动应用。手动编辑后可点击输入框旁的“应用”。
 
 设置页统一配置命名提示词、模型、最大输入预算、名称长度和超时。服务和模型从此主机 Paseo 已启用的服务列表中选择，不绑定特定接口，插件不接触任何密钥。
 

package/README.md

@@ -3,7 +3,7 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/stv1024/paseo-tab-namer/releases"><img alt="Version" src="https://img.shields.io/badge/version-0.1.0-20744a?style=flat-square" /></a>
+  <a href="https://github.com/stv1024/paseo-tab-namer/releases"><img alt="Version" src="https://img.shields.io/badge/version-0.2.0-20744a?style=flat-square" /></a>
   <img alt="Paseo" src="https://img.shields.io/badge/paseo-%E2%89%A5%200.11.2-7ccba0?style=flat-square" />
   <img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-strict-3178c6?style=flat-square&logo=typescript&logoColor=white" />
   <img alt="Tests" src="https://img.shields.io/badge/tests-node%3Atest-555?style=flat-square" />
@@ -57,11 +57,11 @@ On first use, open **Settings → Tab Namer**, pick a **provider** and a **model
 ## Usage
 
 1. Click the **✨ Tab Namer** button in a workspace header.
-2. Pick the scope: **最近 Tab** (most recent), **全部 Tab** (all) or **指定 Tab** (a specific Tab).
-3. Click **生成名称** (Generate). The name is applied right away. **再次生成** (Regenerate) gives you another one.
-4. To fine-tune by hand, edit the field and click **应用手动修改** (Apply manual edit).
+2. Click the large **生成名称** (Generate) button at the top of the popover, right below the header button. It works as soon as the popover opens. The name is applied right away. **再次生成** (Regenerate), in the same place, gives you another one.
+3. To change what the name is based on, pick a scope first: **最近 Tab** (most recent), **全部 Tab** (all) or **指定 Tab** (a specific Tab).
+4. To fine-tune by hand, edit the field and click **应用** (Apply) or press Enter.
 
-Under **更多** (More), **预览输入** (Preview input) shows exactly what will be sent and how much of the budget it uses, without calling the model.
+At the bottom of the popover, **设置** (Settings) opens the settings. Under **更多** (More), **预览输入** (Preview input) shows exactly what will be sent and how much of the budget it uses, without calling the model.
 
 Other entry points:
 

package/README.zh-CN.md

@@ -3,7 +3,7 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/stv1024/paseo-tab-namer/releases"><img alt="Version" src="https://img.shields.io/badge/version-0.1.0-20744a?style=flat-square" /></a>
+  <a href="https://github.com/stv1024/paseo-tab-namer/releases"><img alt="Version" src="https://img.shields.io/badge/version-0.2.0-20744a?style=flat-square" /></a>
   <img alt="Paseo" src="https://img.shields.io/badge/paseo-%E2%89%A5%200.11.2-7ccba0?style=flat-square" />
   <img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-strict-3178c6?style=flat-square&logo=typescript&logoColor=white" />
   <img alt="Tests" src="https://img.shields.io/badge/tests-node%3Atest-555?style=flat-square" />
@@ -54,11 +54,11 @@ paseo plugin install git:stv1024/paseo-tab-namer
 ## 使用
 
 1. 点击 workspace 顶部的 **✨ Tab Namer** 按钮。
-2. 选择范围：**最近 Tab**、**全部 Tab** 或 **指定 Tab**。
-3. 点击 **生成名称**，名称会立即应用；点 **再次生成** 可换一个。
-4. 如需手动微调，修改输入框后点击 **应用手动修改**。
+2. 点击弹窗最上方的大按钮 **生成名称**（就在顶部按钮正下方，弹窗一打开就能点），名称会立即应用；在同一位置点 **再次生成** 可换一个。
+3. 如需改变命名依据，先选择范围：**最近 Tab**、**全部 Tab** 或 **指定 Tab**。
+4. 如需手动微调，修改输入框后点击 **应用** 或按回车。
 
-展开 **更多** 后点 **预览输入**，可查看将要发送的内容和预算占用，不调用模型。
+弹窗底部的 **设置** 可打开设置。展开 **更多** 后点 **预览输入**，可查看将要发送的内容和预算占用，不调用模型。
 
 其他入口：
 

package/client/rename.tsx

@@ -72,21 +72,32 @@ export function RenameForm({
   const [prompt, setPrompt] = useState("");
   const [previousTitle, setPreviousTitle] = useState("");
   const [showMore, setShowMore] = useState(false);
+  // Until the user picks a scope, follow the saved default. Generating does
+  // not need the workspace detail, so a click only waits for these settings.
+  const scope =
+    scopeTouched || preferences.status !== "ready"
+      ? selection.scope
+      : preferences.values.scope;
+  const scopeReady = scopeTouched || preferences.status !== "loading";
+  const [queued, setQueued] = useState(false);
   useEffect(() => {
-    if (!scopeTouched && preferences.status === "ready")
-      setSelection((s) => ({ ...s, scope: preferences.values.scope }));
-  }, [
-    preferences.status === "ready" ? preferences.values.scope : null,
-    scopeTouched,
-  ]);
+    if (queued && scopeReady) {
+      setQueued(false);
+      void act("generate");
+    }
+  }, [queued, scopeReady]);
+  // A generation can finish before the first detail load does.
+  const generated = useRef<string | null>(null);
   useEffect(() => {
     let active = true;
     void load({ workspaceId })
       .then((d) => {
-        if (active) {
-          setDetail(d);
-          setTitle(d.workspace.title ?? d.workspace.name);
-        }
+        if (!active) return;
+        const title = generated.current;
+        setDetail(
+          title ? { ...d, workspace: { ...d.workspace, title } } : d,
+        );
+        setTitle(title ?? d.workspace.title ?? d.workspace.name);
       })
       .catch((e) => {
         if (active) setError(e.message);
@@ -113,6 +124,7 @@ export function RenameForm({
       if (kind === "preview" || kind === "generate") {
         const { jobId } = await start({
           ...selection,
+          scope,
           kind,
           ...(previousTitle ? { previousTitle } : {}),
         });
@@ -129,6 +141,7 @@ export function RenameForm({
               setUsage(`模型：${r.model}`);
               setNotice("输入已准备好，尚未调用模型。");
             } else {
+              generated.current = r.title!;
               setTitle(r.title!);
               setDetail((current) =>
                 current
@@ -185,30 +198,43 @@ export function RenameForm({
     }
   }
   const c = theme.colors;
+  const currentTitle = detail
+    ? (detail.workspace.title ?? detail.workspace.name)
+    : "";
+  const edited = !!detail && !!title.trim() && title.trim() !== currentTitle;
   return (
     <View style={{ gap: 14, width: "100%" }}>
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 12,
+      {/* A large primary action at the very top, right under the header
+          button that opens the popover, so the second click needs no aim. */}
+      <Button
+        theme={theme}
+        large
+        primary
+        disabled={!!busy || queued || (!!detail && !detail.agents.length)}
+        onPress={() => {
+          if (scopeReady) void act("generate");
+          else setQueued(true);
         }}
       >
-        <Text style={{ color: c.foreground, fontSize: 22, fontWeight: "700" }}>
-          Tab Namer
-        </Text>
-        <Button theme={theme} disabled={!!busy} onPress={openSettings}>
-          设置
-        </Button>
-      </View>
+        {busy === "generate" || queued
+          ? "正在生成…"
+          : previousTitle
+            ? "再次生成"
+            : "生成名称"}
+      </Button>
+      <Text
+        numberOfLines={1}
+        style={{ color: c.foregroundMuted, fontSize: 13, lineHeight: 20 }}
+      >
+        Tab Namer{detail ? ` · ${detail.workspace.project}` : ""}
+      </Text>
       {detail ? (
         <>
-          <Note theme={theme}>{detail.workspace.project}</Note>
           <Choices
             theme={theme}
-            disabled={!!busy}
-            value={selection.scope}
+            small
+            disabled={!!busy || queued}
+            value={scope}
             onChange={(scope) => {
               setScopeTouched(true);
               setSelection((s) => ({
@@ -226,12 +252,7 @@ export function RenameForm({
               { value: "selected", label: "指定 Tab" },
             ]}
           />
-          {showMore && selection.scope === "latest" && (
-            <Note theme={theme}>
-              最近 Tab：{detail.agents[0]?.title ?? "无 Tab"}
-            </Note>
-          )}
-          {selection.scope === "selected" && (
+          {scope === "selected" && (
             <ScrollView style={{ maxHeight: 150 }} nestedScrollEnabled>
               {detail.agents.map((a) => (
                 <Pressable
@@ -265,59 +286,62 @@ export function RenameForm({
             value={title}
             onChange={setTitle}
             disabled={!!busy}
+            onSubmit={() => {
+              if (edited) void act("save");
+            }}
+            accessory={
+              edited ? (
+                <Button
+                  theme={theme}
+                  disabled={!!busy}
+                  onPress={() => {
+                    void act("save");
+                  }}
+                >
+                  {busy === "save" ? "正在应用…" : "应用"}
+                </Button>
+              ) : undefined
+            }
           />
-          <Note theme={theme}>生成成功后会自动应用名称。</Note>
-          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
-            <Button
-              theme={theme}
-              disabled={!!busy || !detail.agents.length}
-              primary
-              onPress={() => {
-                void act("generate");
-              }}
-            >
-              {busy === "generate"
-                ? "正在生成…"
-                : previousTitle
-                  ? "再次生成"
-                  : "生成名称"}
-            </Button>
-            {title.trim() !==
-              (detail.workspace.title ?? detail.workspace.name) && (
-              <Button
-                theme={theme}
-                disabled={
-                  !!busy ||
-                  !title.trim() ||
-                  title.trim() ===
-                    (detail.workspace.title ?? detail.workspace.name)
-                }
-                onPress={() => {
-                  void act("save");
-                }}
-              >
-                {busy === "save" ? "正在应用…" : "应用手动修改"}
-              </Button>
-            )}
-            <Pressable
-              accessibilityRole="button"
-              accessibilityLabel={showMore ? "收起更多选项" : "更多选项"}
-              accessibilityState={{ expanded: showMore }}
-              onPress={() => setShowMore((value) => !value)}
-              style={{
-                paddingHorizontal: 10,
-                paddingVertical: 10,
-                justifyContent: "center",
-              }}
-            >
-              <Text style={{ color: c.foregroundMuted }}>
-                {showMore ? "收起" : "更多"}
-              </Text>
-            </Pressable>
-          </View>
-          {showMore && (
+        </>
+      ) : null}
+      {error ? (
+        <View style={{ gap: 8, alignItems: "flex-start" }}>
+          <Note theme={theme} error>
+            {error}
+          </Note>
+          <Button
+            theme={theme}
+            small
+            disabled={!!busy}
+            onPress={() => {
+              void act("reload");
+            }}
+          >
+            {detail ? "刷新状态" : "重试"}
+          </Button>
+        </View>
+      ) : (
+        <Note theme={theme}>
+          {notice ||
+            (queued
+              ? "正在准备…"
+              : detail
+                ? "生成后会直接应用新名称。"
+                : "正在加载 workspace…")}
+        </Note>
+      )}
+      {detail && showMore && (
+        <View style={{ gap: 10 }}>
+          {scope === "latest" && (
+            <Note theme={theme}>
+              最近 Tab：{detail.agents[0]?.title ?? "无 Tab"}
+            </Note>
+          )}
+          <View style={{ alignItems: "flex-start" }}>
             <Button
               theme={theme}
+              small
               disabled={!!busy || !detail.agents.length}
               onPress={() => {
                 void act("preview");
@@ -325,8 +349,8 @@ export function RenameForm({
             >
               {busy === "preview" ? "正在读取…" : "预览输入"}
             </Button>
-          )}
-          {showMore && stats && (
+          </View>
+          {stats && (
             <View
               style={{
                 backgroundColor: c.surface1,
@@ -353,7 +377,7 @@ export function RenameForm({
               ))}
             </View>
           )}
-          {showMore && !!prompt && (
+          {!!prompt && (
             <View style={{ gap: 8 }}>
               <Note theme={theme}>
                 以下为本次准备的输入。生成时会重新读取 Tab 中的最新内容。
@@ -379,36 +403,49 @@ export function RenameForm({
                   {prompt}
                 </Text>
               </ScrollView>
-              <Button theme={theme} onPress={() => setPrompt("")}>
-                收起预览
-              </Button>
+              <View style={{ alignItems: "flex-start" }}>
+                <Button theme={theme} small onPress={() => setPrompt("")}>
+                  收起预览
+                </Button>
+              </View>
             </View>
           )}
-        </>
-      ) : (
-        <>
-          <Note theme={theme}>
-            {error ? "Workspace 加载失败。" : "正在加载 workspace…"}
-          </Note>
-        </>
+        </View>
       )}
-      {!!error && (
-        <View style={{ gap: 8 }}>
-          <Note theme={theme} error>
-            {error}
-          </Note>
+      {/* Rarely used actions stay out of the way, at the bottom. */}
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          borderTopWidth: 1,
+          borderTopColor: c.border,
+          paddingTop: 8,
+          marginHorizontal: -4,
+        }}
+      >
+        {detail ? (
           <Button
             theme={theme}
-            disabled={!!busy}
-            onPress={() => {
-              void act("reload");
-            }}
+            small
+            ghost
+            onPress={() => setShowMore((value) => !value)}
           >
-            {detail ? "刷新状态" : "重试"}
+            {showMore ? "收起" : "更多"}
           </Button>
-        </View>
-      )}
-      {!!notice && <Note theme={theme}>{notice}</Note>}
+        ) : (
+          <View />
+        )}
+        <Button
+          theme={theme}
+          small
+          ghost
+          disabled={!!busy}
+          onPress={openSettings}
+        >
+          设置
+        </Button>
+      </View>
     </View>
   );
 }

package/client/ui.tsx

@@ -8,12 +8,19 @@ export function Button({
   onPress,
   disabled = false,
   primary = false,
+  small = false,
+  large = false,
+  ghost = false,
 }: {
   theme: Theme;
   children: string;
   onPress(): void;
   disabled?: boolean;
   primary?: boolean;
+  small?: boolean;
+  /** A tall target for the main action of a surface. */
+  large?: boolean;
+  ghost?: boolean;
 }) {
   const c = theme.colors;
   return (
@@ -23,19 +30,31 @@ export function Button({
       disabled={disabled}
       onPress={onPress}
       style={{
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        borderRadius: 8,
+        paddingHorizontal: small ? 10 : 14,
+        paddingVertical: small ? 6 : 10,
+        minHeight: large ? 56 : undefined,
+        borderRadius: small ? 6 : large ? 10 : 8,
         borderWidth: 1,
-        borderColor: primary ? c.accent : c.border,
-        backgroundColor: primary ? c.accent : c.surface1,
+        borderColor: primary ? c.accent : ghost ? "transparent" : c.border,
+        backgroundColor: primary
+          ? c.accent
+          : ghost
+            ? "transparent"
+            : c.surface1,
+        alignItems: "center",
+        justifyContent: "center",
         opacity: disabled ? 0.45 : 1,
       }}
     >
       <Text
         style={{
-          color: primary ? c.accentForeground : c.foreground,
-          fontWeight: "600",
+          color: primary
+            ? c.accentForeground
+            : ghost
+              ? c.foregroundMuted
+              : c.foreground,
+          fontWeight: ghost ? "400" : "600",
+          fontSize: small ? 13 : large ? 16 : 14,
         }}
       >
         {children}
@@ -50,6 +69,8 @@ export function Field({
   onChange,
   multiline = false,
   disabled = false,
+  onSubmit,
+  accessory,
 }: {
   theme: Theme;
   label: string;
@@ -57,32 +78,40 @@ export function Field({
   onChange(v: string): void;
   multiline?: boolean;
   disabled?: boolean;
+  onSubmit?(): void;
+  /** Shown to the right of a single-line input, e.g. an apply button. */
+  accessory?: ReactNode;
 }) {
   const c = theme.colors;
   return (
     <View style={{ gap: 7 }}>
       <Text style={{ color: c.foreground, fontWeight: "600" }}>{label}</Text>
-      <TextInput
-        accessibilityLabel={label}
-        value={value}
-        onChangeText={onChange}
-        multiline={multiline}
-        editable={!disabled}
-        autoCapitalize="none"
-        autoCorrect={false}
-        style={{
-          borderWidth: 1,
-          borderColor: c.border,
-          borderRadius: 8,
-          padding: 12,
-          minHeight: multiline ? 160 : 44,
-          textAlignVertical: "top",
-          color: c.foreground,
-          backgroundColor: c.surface1,
-          fontSize: 14,
-          lineHeight: 21,
-        }}
-      />
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <TextInput
+          accessibilityLabel={label}
+          value={value}
+          onChangeText={onChange}
+          onSubmitEditing={onSubmit}
+          multiline={multiline}
+          editable={!disabled}
+          autoCapitalize="none"
+          autoCorrect={false}
+          style={{
+            flex: 1,
+            borderWidth: 1,
+            borderColor: c.border,
+            borderRadius: 8,
+            padding: 12,
+            minHeight: multiline ? 160 : 44,
+            textAlignVertical: "top",
+            color: c.foreground,
+            backgroundColor: c.surface1,
+            fontSize: 14,
+            lineHeight: 21,
+          }}
+        />
+        {accessory}
+      </View>
     </View>
   );
 }
@@ -114,20 +143,25 @@ export function Choices<T extends string>({
   options,
   onChange,
   disabled = false,
+  small = false,
 }: {
   theme: Theme;
   value: T;
   options: { value: T; label: string }[];
   onChange(value: T): void;
   disabled?: boolean;
+  small?: boolean;
 }) {
   return (
-    <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+    <View
+      style={{ flexDirection: "row", flexWrap: "wrap", gap: small ? 6 : 8 }}
+    >
       {options.map((o) => (
         <Button
           key={o.value}
           theme={theme}
           primary={value === o.value}
+          small={small}
           disabled={disabled}
           onPress={() => onChange(o.value)}
         >

package/index.client.tsx

@@ -1,4 +1,4 @@
-import { ScrollView } from "react-native";
+import { View } from "react-native";
 import type {
   PluginClientContext,
   PluginScreenProps,
@@ -11,10 +11,15 @@ export default function contribute(client: PluginClientContext) {
   const Screen = (props: PluginScreenProps) => (
     <RenameScreen {...props} openSettings={openSettings} />
   );
+  // The host surface is at most 420 wide, pads its content and scrolls it,
+  // so the popover only sets a width that fits inside that padding.
   const Popover = (props: PluginButtonContentProps) => (
-    <ScrollView
-      style={{ maxHeight: 720, width: props.layout.compact ? "100%" : 540 }}
-      contentContainerStyle={{ padding: 18 }}
+    <View
+      style={{
+        width: props.layout.compact ? "100%" : 392,
+        maxWidth: "100%",
+        padding: 2,
+      }}
     >
       <RenameForm
         key={props.workspaceId}
@@ -25,7 +30,7 @@ export default function contribute(client: PluginClientContext) {
           openSettings();
         }}
       />
-    </ScrollView>
+    </View>
   );
   client.addScreen({ id: "rename", title: "Tab Namer", Component: Screen });
   client.addSettingsScreen({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo-tab-namer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Paseo plugin: rename a workspace from what its Tabs are about, using a model from a provider already enabled in Paseo.",
   "author": "stv1024",
   "license": "MIT",