ai-space/goose
3
0
Fork 0
mirror of https://github.com/aaif-goose/goose.git synced 2026-07-03 14:10:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(tui): add extension management screen (#8536)

Browse Source
This commit is contained in:
Alex Hancock
2026-04-15 13:39:01 -04:00
committed by GitHub
parent c9507ba672
commit ea236ab664
13 changed files with 753 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/goose-acp/acp-meta.json
+5
View File
@@ -35,6 +35,11 @@
"requestType": "GetExtensionsRequest",
"responseType": "GetExtensionsResponse"
},
{
"method": "_goose/session/extensions",
"requestType": "GetSessionExtensionsRequest",
"responseType": "GetSessionExtensionsResponse"
},
{
"method": "_goose/session/provider/update",
"requestType": "UpdateProviderRequest",
crates/goose-acp/acp-schema.json
+44
View File
@@ -168,6 +168,33 @@
"x-side": "agent",
"x-method": "_goose/config/extensions"
},
"GetSessionExtensionsRequest": {
"type": "object",
"properties": {
"sessionId": {
"type": "string"
}
},
"required": [
"sessionId"
],
"x-side": "agent",
"x-method": "_goose/session/extensions"
},
"GetSessionExtensionsResponse": {
"type": "object",
"properties": {
"extensions": {
"type": "array",
"items": {}
}
},
"required": [
"extensions"
],
"x-side": "agent",
"x-method": "_goose/session/extensions"
},
"UpdateProviderRequest": {
"type": "object",
"properties": {
@@ -710,6 +737,15 @@
"description": "Params for _goose/config/extensions",
"title": "GetExtensionsRequest"
},
{
"allOf": [
{
"$ref": "#/$defs/GetSessionExtensionsRequest"
}
],
"description": "Params for _goose/session/extensions",
"title": "GetSessionExtensionsRequest"
},
{
"allOf": [
{
@@ -898,6 +934,14 @@
],
"title": "GetExtensionsResponse"
},
{
"allOf": [
{
"$ref": "#/$defs/GetSessionExtensionsResponse"
}
],
"title": "GetSessionExtensionsResponse"
},
{
"allOf": [
{
crates/goose-acp/src/server.rs
+28
View File
@@ -2291,6 +2291,34 @@ impl GooseAcpAgent {
})
}
#[custom_method(GetSessionExtensionsRequest)]
async fn on_get_session_extensions(
&self,
req: GetSessionExtensionsRequest,
) -> Result<GetSessionExtensionsResponse, sacp::Error> {
let internal_id = self.internal_session_id(&req.session_id).await?;
let session = self
.session_manager
.get_session(&internal_id, false)
.await
.map_err(|e| sacp::Error::internal_error().data(e.to_string()))?;
let extensions = EnabledExtensionsState::extensions_or_default(
Some(&session.extension_data),
goose::config::Config::global(),
);
let extensions_json = extensions
.into_iter()
.map(|e| serde_json::to_value(&e))
.collect::<Result<Vec<_>, _>>()
.map_err(|e| sacp::Error::internal_error().data(e.to_string()))?;
Ok(GetSessionExtensionsResponse {
extensions: extensions_json,
})
}
#[custom_method(UpdateProviderRequest)]
async fn on_update_provider(
&self,
crates/goose-sdk/src/custom_requests.rs
+12
View File
@@ -104,6 +104,18 @@ pub struct GetExtensionsResponse {
pub warnings: Vec<String>,
}
#[derive(Debug, Default, Clone, Serialize, Deserialize, JsonSchema, JsonRpcRequest)]
#[request(method = "_goose/session/extensions", response = GetSessionExtensionsResponse)]
#[serde(rename_all = "camelCase")]
pub struct GetSessionExtensionsRequest {
pub session_id: String,
}
#[derive(Debug, Default, Clone, Serialize, Deserialize, JsonSchema, JsonRpcResponse)]
pub struct GetSessionExtensionsResponse {
pub extensions: Vec<serde_json::Value>,
}
/// Atomically update the provider for a live session.
#[derive(Debug, Default, Clone, Serialize, Deserialize, JsonSchema, JsonRpcRequest)]
#[request(method = "_goose/session/provider/update", response = UpdateProviderResponse)]
ui/sdk/src/generated/client.gen.ts
+12
View File
@@ -21,6 +21,8 @@ import type {
GetProviderDetailsResponse,
GetProviderModelsRequest,
GetProviderModelsResponse,
GetSessionExtensionsRequest,
GetSessionExtensionsResponse,
GetToolsRequest,
GetToolsResponse,
ImportSessionRequest,
@@ -47,6 +49,7 @@ import {
zGetExtensionsResponse,
zGetProviderDetailsResponse,
zGetProviderModelsResponse,
zGetSessionExtensionsResponse,
zGetToolsResponse,
zImportSessionResponse,
zListProvidersResponse,
@@ -93,6 +96,15 @@ export class GooseExtClient {
return zGetExtensionsResponse.parse(raw) as GetExtensionsResponse;
}
async GooseSessionExtensions(
params: GetSessionExtensionsRequest,
): Promise<GetSessionExtensionsResponse> {
const raw = await this.conn.extMethod("_goose/session/extensions", params);
return zGetSessionExtensionsResponse.parse(
raw,
) as GetSessionExtensionsResponse;
}
async GooseSessionProviderUpdate(
params: UpdateProviderRequest,
): Promise<UpdateProviderResponse> {
ui/sdk/src/generated/index.ts
+6 -1
View File
@@ -1,6 +1,6 @@
// This file is auto-generated by @hey-api/openapi-ts
export type { AddExtensionRequest, ArchiveSessionRequest, CheckSecretRequest, CheckSecretResponse, DeleteSessionRequest, EmptyResponse, ExportSessionRequest, ExportSessionResponse, ExtRequest, ExtResponse, GetExtensionsRequest, GetExtensionsResponse, GetProviderDetailsRequest, GetProviderDetailsResponse, GetProviderModelsRequest, GetProviderModelsResponse, GetToolsRequest, GetToolsResponse, ImportSessionRequest, ImportSessionResponse, ListProvidersRequest, ListProvidersResponse, ModelEntry, ProviderConfigKey, ProviderDetailEntry, ProviderListEntry, ReadConfigRequest, ReadConfigResponse, ReadResourceRequest, ReadResourceResponse, RemoveConfigRequest, RemoveExtensionRequest, RemoveSecretRequest, UnarchiveSessionRequest, UpdateProviderRequest, UpdateProviderResponse, UpdateWorkingDirRequest, UpsertConfigRequest, UpsertSecretRequest } from './types.gen.js';
export type { AddExtensionRequest, ArchiveSessionRequest, CheckSecretRequest, CheckSecretResponse, DeleteSessionRequest, EmptyResponse, ExportSessionRequest, ExportSessionResponse, ExtRequest, ExtResponse, GetExtensionsRequest, GetExtensionsResponse, GetProviderDetailsRequest, GetProviderDetailsResponse, GetProviderModelsRequest, GetProviderModelsResponse, GetSessionExtensionsRequest, GetSessionExtensionsResponse, GetToolsRequest, GetToolsResponse, ImportSessionRequest, ImportSessionResponse, ListProvidersRequest, ListProvidersResponse, ModelEntry, ProviderConfigKey, ProviderDetailEntry, ProviderListEntry, ReadConfigRequest, ReadConfigResponse, ReadResourceRequest, ReadResourceResponse, RemoveConfigRequest, RemoveExtensionRequest, RemoveSecretRequest, UnarchiveSessionRequest, UpdateProviderRequest, UpdateProviderResponse, UpdateWorkingDirRequest, UpsertConfigRequest, UpsertSecretRequest } from './types.gen.js';
export const GOOSE_EXT_METHODS = [
{
@@ -38,6 +38,11 @@ export const GOOSE_EXT_METHODS = [
requestType: "GetExtensionsRequest",
responseType: "GetExtensionsResponse",
},
{
method: "_goose/session/extensions",
requestType: "GetSessionExtensionsRequest",
responseType: "GetSessionExtensionsResponse",
},
{
method: "_goose/session/provider/update",
requestType: "UpdateProviderRequest",
ui/sdk/src/generated/types.gen.ts
+10 -2
View File
@@ -96,6 +96,14 @@ export type GetExtensionsResponse = {
warnings: Array<string>;
};
export type GetSessionExtensionsRequest = {
sessionId: string;
};
export type GetSessionExtensionsResponse = {
extensions: Array<unknown>;
};
/**
* Atomically update the provider for a live session.
*/
@@ -299,14 +307,14 @@ export type UnarchiveSessionRequest = {
export type ExtRequest = {
id: string;
method: string;
params?: AddExtensionRequest | RemoveExtensionRequest | GetToolsRequest | ReadResourceRequest | UpdateWorkingDirRequest | DeleteSessionRequest | GetExtensionsRequest | UpdateProviderRequest | ListProvidersRequest | GetProviderDetailsRequest | GetProviderModelsRequest | ReadConfigRequest | UpsertConfigRequest | RemoveConfigRequest | CheckSecretRequest | UpsertSecretRequest | RemoveSecretRequest | ExportSessionRequest | ImportSessionRequest | ArchiveSessionRequest | UnarchiveSessionRequest | {
params?: AddExtensionRequest | RemoveExtensionRequest | GetToolsRequest | ReadResourceRequest | UpdateWorkingDirRequest | DeleteSessionRequest | GetExtensionsRequest | GetSessionExtensionsRequest | UpdateProviderRequest | ListProvidersRequest | GetProviderDetailsRequest | GetProviderModelsRequest | ReadConfigRequest | UpsertConfigRequest | RemoveConfigRequest | CheckSecretRequest | UpsertSecretRequest | RemoveSecretRequest | ExportSessionRequest | ImportSessionRequest | ArchiveSessionRequest | UnarchiveSessionRequest | {
[key: string]: unknown;
} | null;
};
export type ExtResponse = {
id: string;
result?: EmptyResponse | GetToolsResponse | ReadResourceResponse | GetExtensionsResponse | UpdateProviderResponse | ListProvidersResponse | GetProviderDetailsResponse | GetProviderModelsResponse | ReadConfigResponse | CheckSecretResponse | ExportSessionResponse | ImportSessionResponse | unknown;
result?: EmptyResponse | GetToolsResponse | ReadResourceResponse | GetExtensionsResponse | GetSessionExtensionsResponse | UpdateProviderResponse | ListProvidersResponse | GetProviderDetailsResponse | GetProviderModelsResponse | ReadConfigResponse | CheckSecretResponse | ExportSessionResponse | ImportSessionResponse | unknown;
} | {
error: {
code: number;
ui/sdk/src/generated/zod.gen.ts
+10
View File
@@ -81,6 +81,14 @@ export const zGetExtensionsResponse = z.object({
warnings: z.array(z.string())
});
export const zGetSessionExtensionsRequest = z.object({
sessionId: z.string()
});
export const zGetSessionExtensionsResponse = z.object({
extensions: z.array(z.unknown())
});
/**
* Atomically update the provider for a live session.
*/
@@ -302,6 +310,7 @@ export const zExtRequest = z.object({
zUpdateWorkingDirRequest,
zDeleteSessionRequest,
zGetExtensionsRequest,
zGetSessionExtensionsRequest,
zUpdateProviderRequest,
zListProvidersRequest,
zGetProviderDetailsRequest,
@@ -333,6 +342,7 @@ export const zExtResponse = z.union([
zGetToolsResponse,
zReadResourceResponse,
zGetExtensionsResponse,
zGetSessionExtensionsResponse,
zUpdateProviderResponse,
zListProvidersResponse,
zGetProviderDetailsResponse,
ui/text/src/components/Header.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export const Header = React.memo(function Header({
{turnInfo.current}/{turnInfo.total}{" "}
</Text>
)}
<Text color={TEXT_DIM}>^G configure · ^C exit</Text>
<Text color={TEXT_DIM}>^E exts · ^M models · ^P providers</Text>
</Box>
</Box>
<Rule width={constrainedWidth} />
ui/text/src/configure.tsx
+167 -104
View File
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
import { Box, Text, useInput, useStdout } from "ink";
import type { GooseClient, ProviderDetailEntry } from "@aaif/goose-sdk";
import {
CRANBERRY,
TEAL,
GOLD,
TEXT_PRIMARY,
@@ -23,6 +24,8 @@ type Phase =
| "saving"
| "error";
export type ConfigureIntent = "provider" | "model";
interface ConfigureProps {
client: GooseClient;
sessionId: string;
@@ -30,6 +33,7 @@ interface ConfigureProps {
height: number;
onComplete: () => void;
onCancel: () => void;
initialIntent?: ConfigureIntent;
}
interface ModelSelectorProps {
@@ -180,10 +184,16 @@ const ModelSelector = React.memo(function ModelSelector({
if (loading) {
return (
<Box flexDirection="column" justifyContent="center" alignItems="center" width={columns} height={height}>
<Spinner idx={0} />
<Box marginTop={1}>
<Text color={TEXT_DIM}>loading models…</Text>
<Box flexDirection="column" height={height} width={columns} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Select model ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>Loading models for {provider.displayName}…</Text>
</Box>
<Box justifyContent="center" flexGrow={1} alignItems="center">
<Spinner idx={0} />
</Box>
</Box>
);
@@ -191,15 +201,21 @@ const ModelSelector = React.memo(function ModelSelector({
if (error) {
return (
<Box flexDirection="column" justifyContent="center" alignItems="center" width={columns} height={height}>
<Box flexDirection="column" alignItems="center" width={maxWidth}>
<Box flexDirection="column" height={height} width={columns} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Select model ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={GOLD}>⚠ Failed to load models</Text>
<Box marginTop={1} width={maxWidth}>
</Box>
<Box justifyContent="center">
<Box width={maxWidth}>
<Text color={TEXT_DIM} wrap="wrap">{error}</Text>
</Box>
<Box marginTop={2}>
<Text color={TEXT_DIM}>m manual entry · esc back</Text>
</Box>
</Box>
<Box justifyContent="center" marginTop={2}>
<Text color={TEXT_DIM}>m manual entry · esc back</Text>
</Box>
</Box>
);
@@ -213,32 +229,32 @@ const ModelSelector = React.memo(function ModelSelector({
: displayText;
return (
<Box flexDirection="column" justifyContent="center" alignItems="center" height={height} width={columns}>
<Box flexDirection="column" width={maxWidth} paddingX={2}>
<Text color={TEXT_PRIMARY} bold>
Enter model name manually
</Text>
<Box flexDirection="column" height={height} width={columns} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Enter model name ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>Type a model identifier for {provider.displayName}</Text>
</Box>
<Box marginTop={1}>
<Box
borderStyle="round"
borderColor={GOLD}
paddingX={2}
width={inputWidth}
>
<Text color={GOLD} bold>{"❯ "}</Text>
<Text color={searchQuery ? TEXT_PRIMARY : TEXT_DIM}>
{truncatedText}
</Text>
</Box>
</Box>
<Box marginTop={2}>
<Text color={TEXT_DIM}>
enter confirm · esc cancel
<Box justifyContent="center">
<Box
borderStyle="round"
borderColor={GOLD}
paddingX={2}
width={inputWidth}
>
<Text color={GOLD} bold>{"❯ "}</Text>
<Text color={searchQuery ? TEXT_PRIMARY : TEXT_DIM}>
{truncatedText}
</Text>
</Box>
</Box>
<Box justifyContent="center" marginTop={2}>
<Text color={TEXT_DIM}>enter confirm · esc cancel</Text>
</Box>
</Box>
);
}
@@ -247,71 +263,87 @@ const ModelSelector = React.memo(function ModelSelector({
const searchBoxWidth = Math.min(60, maxWidth - 4);
return (
<Box flexDirection="column" justifyContent="center" alignItems="center" height={height} width={columns}>
<Box flexDirection="column" width={maxWidth} paddingX={2}>
<Text color={TEXT_PRIMARY} bold>
Select model for {provider.displayName}
</Text>
<Box flexDirection="column" height={height} width={columns} paddingX={2}>
{/* Header */}
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Select model ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>Choose a model for {provider.displayName}</Text>
</Box>
<Box marginTop={1}>
<Box
borderStyle="round"
borderColor={RULE_COLOR}
paddingX={2}
width={searchBoxWidth}
>
<Text color={GOLD} bold>{"❯ "}</Text>
<Box width={searchBoxWidth - 8}>
<Text color={searchQuery ? TEXT_PRIMARY : TEXT_DIM} wrap="truncate">
{searchQuery || "search models…"}
</Text>
</Box>
{/* Search Bar */}
<Box justifyContent="center" marginBottom={2}>
<Box
borderStyle="round"
borderColor={RULE_COLOR}
paddingX={2}
width={searchBoxWidth}
>
<Text color={CRANBERRY} bold>{"❯ "}</Text>
<Box width={searchBoxWidth - 8}>
<Text color={searchQuery ? TEXT_PRIMARY : TEXT_DIM} wrap="truncate">
{searchQuery || "search models…"}
</Text>
</Box>
</Box>
</Box>
<Box marginTop={1} flexDirection="column" height={listHeight}>
{filtered.length === 0 ? (
{/* Model List */}
<Box flexDirection="column" flexGrow={1} justifyContent="flex-start">
{filtered.length === 0 ? (
<Box justifyContent="center" alignItems="center" height={Math.max(listHeight, 1)}>
<Text color={TEXT_DIM}>No matching models</Text>
) : (
<>
{scrollOffset > 0 && (
</Box>
) : (
<>
{scrollOffset > 0 && (
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_DIM}>▲ {scrollOffset} more above</Text>
)}
{visible.map((model, vi) => {
const idx = vi + scrollOffset;
const active = idx === selectedIdx;
const isDefault = model === provider.defaultModel;
const modelWidth = maxWidth - 8;
const truncatedModel = model.length > modelWidth
? model.slice(0, modelWidth - 1) + "…"
: model;
</Box>
)}
<Box justifyContent="center">
<Box flexDirection="column" width={maxWidth}>
{visible.map((model, vi) => {
const idx = vi + scrollOffset;
const active = idx === selectedIdx;
const isDefault = model === provider.defaultModel;
const modelWidth = maxWidth - 8;
const truncatedModel = model.length > modelWidth
? model.slice(0, modelWidth - 1) + "…"
: model;
return (
<Box key={model}>
<Text color={active ? GOLD : TEXT_DIM}>
{active ? "▸ " : " "}
</Text>
<Text color={active ? TEXT_PRIMARY : TEXT_DIM} bold={active}>
{truncatedModel}
</Text>
{isDefault && <Text color={TEAL}> (default)</Text>}
</Box>
);
})}
{scrollOffset + listHeight < filtered.length && (
return (
<Box key={model}>
<Text color={active ? GOLD : TEXT_DIM}>
{active ? "▸ " : " "}
</Text>
<Text color={active ? TEXT_PRIMARY : TEXT_DIM} bold={active}>
{truncatedModel}
</Text>
{isDefault && <Text color={TEAL}> (default)</Text>}
</Box>
);
})}
</Box>
</Box>
{scrollOffset + listHeight < filtered.length && (
<Box justifyContent="center" marginTop={1}>
<Text color={TEXT_DIM}>
▼ {filtered.length - scrollOffset - listHeight} more below
</Text>
)}
</>
)}
</Box>
</Box>
)}
</>
)}
</Box>
<Box marginTop={1}>
<Text color={TEXT_DIM}>
↑↓ navigate · enter select · m manual · esc back
</Text>
</Box>
{/* Footer */}
<Box justifyContent="center" marginTop={2}>
<Text color={TEXT_DIM}>
↑↓ navigate · enter select · m manual · esc back
</Text>
</Box>
</Box>
);
@@ -324,6 +356,7 @@ export default function ConfigureScreen({
height,
onComplete,
onCancel,
initialIntent,
}: ConfigureProps) {
const [phase, setPhase] = useState<Phase>("loading");
const [providers, setProviders] = useState<ProviderDetailEntry[]>([]);
@@ -346,16 +379,32 @@ export default function ConfigureScreen({
(async () => {
try {
const resp = await client.goose.GooseProvidersDetails({});
if (!cancelled) {
const sorted = [...resp.providers].sort((a, b) => {
const aP = a.providerType === "Preferred" ? 0 : 1;
const bP = b.providerType === "Preferred" ? 0 : 1;
if (aP !== bP) return aP - bP;
return a.displayName.localeCompare(b.displayName);
});
setProviders(sorted);
setPhase("select_provider");
if (cancelled) return;
const sorted = [...resp.providers].sort((a, b) => {
const aP = a.providerType === "Preferred" ? 0 : 1;
const bP = b.providerType === "Preferred" ? 0 : 1;
if (aP !== bP) return aP - bP;
return a.displayName.localeCompare(b.displayName);
});
setProviders(sorted);
if (initialIntent === "model") {
try {
const cfg = await client.goose.GooseConfigRead({ key: "GOOSE_PROVIDER" });
if (cancelled) return;
const current = sorted.find((p) => p.name === cfg.value);
if (current) {
setSelectedProvider(current);
setPendingConfigValues({});
setPhase("select_model");
return;
}
} catch {
// fall through to provider selector
}
}
if (!cancelled) setPhase("select_provider");
} catch (e: unknown) {
if (!cancelled) {
setErrorMsg(e instanceof Error ? e.message : String(e));
@@ -367,7 +416,7 @@ export default function ConfigureScreen({
return () => {
cancelled = true;
};
}, [client, fetchKey]);
}, [client, fetchKey, initialIntent]);
const applyProviderModel = useCallback(
async (provider: ProviderDetailEntry, model: string, configValues: Record<string, string>) => {
@@ -440,22 +489,32 @@ export default function ConfigureScreen({
if (phase === "loading" || phase === "loading_models" || phase === "saving") {
const label =
phase === "loading" ? "loading providers…" :
phase === "loading_models" ? "loading models…" :
"applying changes…";
phase === "loading" ? "Loading providers…" :
phase === "loading_models" ? "Loading models…" :
"Applying changes…";
return (
<Box flexDirection="column" justifyContent="center" alignItems="center" width={width} height={height}>
<Spinner idx={spinIdx} />
<Box marginTop={1}>
<Box flexDirection="column" height={height} width={width} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Configure provider ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>{label}</Text>
</Box>
<Box justifyContent="center" flexGrow={1} alignItems="center">
<Spinner idx={spinIdx} />
</Box>
</Box>
);
}
if (phase === "error") {
return (
<Box flexDirection="column" height={height} alignItems="center" width={width}>
<Box flexDirection="column" height={height} width={width} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Configure provider ◆</Text>
</Box>
<ErrorScreen errorMsg={errorMsg} onRetry={handleRetry} />
</Box>
);
@@ -483,7 +542,11 @@ export default function ConfigureScreen({
height={height}
onSelect={handleModelSelected}
onBack={() => {
setPhase("select_provider");
if (initialIntent === "model") {
onCancel();
} else {
setPhase("select_provider");
}
}}
/>
);
ui/text/src/extensions.tsx
+409
View File
@@ -0,0 +1,409 @@
import React, {useCallback, useEffect, useState} from "react";
import {Box, Text, useInput, useStdout} from "ink";
import {TextInput} from "@inkjs/ui";
import type {GooseClient} from "@aaif/goose-acp";
import {CRANBERRY, GOLD, RULE_COLOR, TEAL, TEXT_DIM, TEXT_PRIMARY} from "./colors.js";
import {Spinner, SPINNER_FRAMES} from "./components/Spinner.js";
import {ErrorScreen} from "./components/ErrorScreen.js";
type ExtEntry = {
enabled: boolean;
type: string;
name: string;
description: string;
[key: string]: unknown;
};
function isExtEntry(v: unknown): v is ExtEntry {
return !!v && typeof v === "object" && "enabled" in v && "type" in v && "name" in v
&& typeof (v as ExtEntry).enabled === "boolean"
&& typeof (v as ExtEntry).type === "string"
&& typeof (v as ExtEntry).name === "string";
}
type AddType = "stdio" | "streamable_http";
type Phase = "loading" | "list" | "add_type" | "add_value" | "add_name" | "add_desc" | "saving" | "error";
function deriveNameFromValue(addType: AddType, value: string): string {
if (addType === "stdio") {
const cmd = value.trim().split(/\s+/)[0] ?? "";
return cmd.split("/").pop() ?? cmd;
}
try { return new URL(value.trim()).hostname; } catch { return value.trim(); }
}
function keyFromName(name: string): string {
return name.replace(/[^A-Za-z0-9_-]/g, "_").toLowerCase();
}
function buildConfig(addType: AddType, value: string, name: string, description: string): ExtEntry {
if (addType === "stdio") {
const parts = value.trim().split(/\s+/);
return {type: "stdio", enabled: true, name, description, cmd: parts[0] ?? "", args: parts.slice(1)};
}
return {type: "streamable_http", enabled: true, name, description, uri: value.trim()};
}
export default function ExtensionsManager({
client,
sessionId,
height,
onClose,
}: {
client: GooseClient;
sessionId: string;
height: number;
onClose: () => void;
}) {
const {stdout} = useStdout();
const columns = stdout?.columns ?? 80;
const [phase, setPhase] = useState<Phase>("loading");
const [spinIdx, setSpinIdx] = useState(0);
const [errorMsg, setErrorMsg] = useState("");
const [entries, setEntries] = useState<ExtEntry[]>([]);
const [warnings, setWarnings] = useState<string[]>([]);
const [selectedIdx, setSelectedIdx] = useState(0);
const [addType, setAddType] = useState<AddType>("stdio");
const [addValue, setAddValue] = useState("");
const [addName, setAddName] = useState("");
const [addDesc, setAddDesc] = useState("");
const [inputKey, setInputKey] = useState(0);
useEffect(() => {
const t = setInterval(() => setSpinIdx(i => (i + 1) % SPINNER_FRAMES.length), 300);
return () => clearInterval(t);
}, []);
const reload = useCallback(async () => {
setPhase("loading");
try {
const [configResp, sessionResp] = await Promise.all([
client.goose.GooseConfigExtensions({}),
client.goose.GooseSessionExtensions({sessionId}),
]);
const allExtensions = (configResp.extensions as unknown[]).filter(isExtEntry);
const activeNames = new Set(
(sessionResp.extensions as Array<{name?: string}>).map(e => e.name),
);
setEntries(allExtensions.map(ext => ({...ext, enabled: activeNames.has(ext.name)})));
setWarnings(configResp.warnings ?? []);
setPhase("list");
} catch (e: unknown) {
setErrorMsg(e instanceof Error ? e.message : String(e));
setPhase("error");
}
}, [client, sessionId]);
useEffect(() => { reload(); }, [reload]);
const withSaving = useCallback(async (fn: () => Promise<void>) => {
setPhase("saving");
try {
await fn();
await reload();
} catch (e: unknown) {
setErrorMsg(e instanceof Error ? e.message : String(e));
setPhase("error");
}
}, [reload]);
const toggleSelected = useCallback(() => {
const sel = entries[selectedIdx];
if (!sel) return;
withSaving(async () => {
if (sel.enabled) {
await client.goose.GooseExtensionsRemove({sessionId, name: sel.name});
} else {
await client.goose.GooseExtensionsAdd({sessionId, config: sel as any});
}
});
}, [entries, selectedIdx, client, sessionId, withSaving]);
const saveNewExtension = useCallback((description: string) => {
const config = buildConfig(addType, addValue, addName, description);
const key = keyFromName(config.name);
withSaving(async () => {
let extMap: Record<string, unknown> = {};
try {
const raw = await client.goose.GooseConfigRead({key: "extensions"});
if (raw.value && typeof raw.value === "object") extMap = raw.value as Record<string, unknown>;
} catch { }
extMap[key] = config;
await client.goose.GooseConfigUpsert({key: "extensions", value: extMap as any});
await client.goose.GooseExtensionsAdd({sessionId, config: config as any});
});
}, [addType, addValue, addName, client, sessionId, withSaving]);
useInput((ch, key) => {
if (phase === "list") {
if (key.escape) { onClose(); return; }
if (key.upArrow) { setSelectedIdx(i => Math.max(i - 1, 0)); return; }
if (key.downArrow) { setSelectedIdx(i => Math.min(i + 1, entries.length - 1)); return; }
if (ch === " " || key.return) { toggleSelected(); return; }
if (ch === "a") { setAddType("stdio"); setPhase("add_type"); return; }
}
if (phase === "add_type") {
if (key.escape) { setPhase("list"); return; }
if (key.upArrow || key.downArrow) { setAddType(t => t === "stdio" ? "streamable_http" : "stdio"); return; }
if (key.return) { setAddValue(""); setInputKey(k => k + 1); setPhase("add_value"); return; }
}
if (key.escape) {
if (phase === "add_value") { setPhase("add_type"); return; }
if (phase === "add_name") { setInputKey(k => k + 1); setPhase("add_value"); return; }
if (phase === "add_desc") { setInputKey(k => k + 1); setPhase("add_name"); return; }
}
});
if (phase === "loading" || phase === "saving") {
return (
<Box flexDirection="column" height={height} width={columns} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Manage extensions ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>{phase === "loading" ? "Loading extensions…" : "Saving…"}</Text>
</Box>
<Box justifyContent="center" flexGrow={1} alignItems="center">
<Spinner idx={spinIdx} />
</Box>
</Box>
);
}
if (phase === "error") {
return (
<Box flexDirection="column" height={height} width={columns} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Manage extensions ◆</Text>
</Box>
<ErrorScreen errorMsg={errorMsg} onRetry={() => reload()} />
</Box>
);
}
const maxW = Math.min(columns - 4, 80);
const inputW = Math.min(maxW - 10, 70);
if (phase === "add_type") {
const types: {value: AddType; label: string; hint: string}[] = [
{value: "stdio", label: "Command (stdio)", hint: "run a local command"},
{value: "streamable_http", label: "Endpoint (HTTP)", hint: "connect to a remote server"},
];
return (
<Box flexDirection="column" width={columns} height={height} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Add extension ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>Choose a connection type</Text>
</Box>
<Box justifyContent="center">
<Box flexDirection="column">
{types.map(t => {
const active = addType === t.value;
return (
<Box key={t.value}>
<Text color={active ? GOLD : TEXT_DIM}>{active ? "▸ " : " "}</Text>
<Text color={active ? TEXT_PRIMARY : TEXT_DIM} bold={active}>{t.label}</Text>
<Text color={TEXT_DIM}> {t.hint}</Text>
</Box>
);
})}
</Box>
</Box>
<Box justifyContent="center" marginTop={2}>
<Text color={TEXT_DIM}>↑↓ select · enter confirm · esc cancel</Text>
</Box>
</Box>
);
}
if (phase === "add_value") {
const isStdio = addType === "stdio";
const placeholder = isStdio
? "npx -y @modelcontextprotocol/server-filesystem /tmp"
: "http://localhost:8080/mcp";
return (
<Box flexDirection="column" width={columns} height={height} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ {isStdio ? "Enter command" : "Enter endpoint URL"} ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>{isStdio ? "The command to launch the extension" : "URL of the remote MCP server"}</Text>
</Box>
<Box justifyContent="center">
<Box borderStyle="round" borderColor={RULE_COLOR} paddingX={2} width={inputW}>
<Text color={CRANBERRY} bold>{"❯ "}</Text>
<TextInput
key={`value-${inputKey}`}
placeholder={placeholder}
onChange={setAddValue}
onSubmit={(v) => {
if (!v.trim()) return;
setAddValue(v);
setAddName(deriveNameFromValue(addType, v));
setInputKey(k => k + 1);
setPhase("add_name");
}}
/>
</Box>
</Box>
<Box justifyContent="center" marginTop={2}>
<Text color={TEXT_DIM}>enter continue · esc back</Text>
</Box>
</Box>
);
}
if (phase === "add_name") {
return (
<Box flexDirection="column" width={columns} height={height} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Name this extension ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>A short name to identify this extension</Text>
</Box>
<Box justifyContent="center">
<Box borderStyle="round" borderColor={RULE_COLOR} paddingX={2} width={inputW}>
<Text color={CRANBERRY} bold>{"❯ "}</Text>
<TextInput
key={`name-${inputKey}`}
defaultValue={addName}
placeholder="extension name"
onChange={setAddName}
onSubmit={(v) => {
if (!v.trim()) return;
setAddName(v.trim());
setAddDesc("");
setInputKey(k => k + 1);
setPhase("add_desc");
}}
/>
</Box>
</Box>
<Box justifyContent="center" marginTop={2}>
<Text color={TEXT_DIM}>enter continue · esc back</Text>
</Box>
</Box>
);
}
if (phase === "add_desc") {
return (
<Box flexDirection="column" width={columns} height={height} paddingX={2}>
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Description ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>What does this extension do? (optional)</Text>
</Box>
<Box justifyContent="center">
<Box borderStyle="round" borderColor={RULE_COLOR} paddingX={2} width={inputW}>
<Text color={CRANBERRY} bold>{"❯ "}</Text>
<TextInput
key={`desc-${inputKey}`}
placeholder="what does this extension do?"
onChange={setAddDesc}
onSubmit={(v) => saveNewExtension(v.trim())}
/>
</Box>
</Box>
<Box justifyContent="center" marginTop={2}>
<Text color={TEXT_DIM}>enter save (leave empty to skip) · esc back</Text>
</Box>
</Box>
);
}
const layoutW = maxW;
const GUTTER = 2;
const STATUS_W = 10;
const nameW = Math.max(16, Math.floor(layoutW * 0.30));
const descW = Math.max(8, layoutW - 2 - STATUS_W - nameW - 2 * GUTTER);
const rows = Math.max(height - 9, 4);
const maxStart = Math.max(0, entries.length - rows);
const start = Math.min(maxStart, Math.max(0, selectedIdx - Math.floor(rows / 2)));
const end = Math.min(entries.length, start + rows);
const windowed = entries.slice(start, end);
return (
<Box flexDirection="column" width={columns} height={height} paddingX={2}>
{/* Header */}
<Box marginTop={1} />
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>◆ Manage extensions ◆</Text>
</Box>
<Box justifyContent="center" marginBottom={2}>
<Text color={TEXT_DIM}>Toggle, add, or remove extensions for this session</Text>
</Box>
{/* Extension List */}
<Box flexDirection="column" flexGrow={1} justifyContent="flex-start">
{entries.length === 0 ? (
<Box justifyContent="center" alignItems="center" height={Math.max(rows - 1, 1)}>
<Text color={TEXT_DIM}>No extensions configured — press a to add one</Text>
</Box>
) : (
<>
{start > 0 && (
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_DIM}>▲ {start} more above</Text>
</Box>
)}
<Box justifyContent="center">
<Box flexDirection="column" width={layoutW}>
{windowed.map((ext, i) => {
const globalIdx = start + i;
const active = globalIdx === selectedIdx;
return (
<Box key={`${ext.type}:${ext.name}`} width={layoutW}>
<Text color={active ? GOLD : TEXT_DIM}>{active ? "▸ " : " "}</Text>
<Box width={nameW}><Text color={active ? TEXT_PRIMARY : TEXT_DIM} bold={active} wrap="truncate">{ext.name}</Text></Box>
<Box width={GUTTER}><Text>{" ".repeat(GUTTER)}</Text></Box>
<Box width={descW}><Text color={TEXT_DIM} wrap="truncate">{ext.description || ""}</Text></Box>
<Box width={GUTTER}><Text>{" ".repeat(GUTTER)}</Text></Box>
<Box width={STATUS_W}><Text color={ext.enabled ? TEAL : TEXT_DIM} wrap="truncate">{ext.enabled ? "enabled" : "disabled"}</Text></Box>
</Box>
);
})}
</Box>
</Box>
{end < entries.length && (
<Box justifyContent="center" marginTop={1}>
<Text color={TEXT_DIM}>▼ {entries.length - end} more below</Text>
</Box>
)}
</>
)}
</Box>
{warnings.length > 0 && (
<Box justifyContent="center" marginTop={1}>
<Box width={layoutW} flexDirection="column">
<Text color={GOLD}>Warnings</Text>
{warnings.map((w, i) => (
<Box key={i} width={layoutW}><Text color={TEXT_DIM} wrap="truncate">• {w}</Text></Box>
))}
</Box>
</Box>
)}
{/* Footer */}
<Box justifyContent="center" marginTop={2}>
<Text color={TEXT_DIM}>space/enter toggle · a add · esc back</Text>
</Box>
</Box>
);
}
ui/text/src/onboarding.tsx
+11 -7
View File
@@ -381,12 +381,16 @@ export const ProviderConfigurator = React.memo(function ProviderConfigurator({ p
{topPad > 0 && <Box height={topPad} />}
<Box flexDirection="column" width={maxWidth} paddingX={2}>
{/* Header */}
<Text color={TEXT_PRIMARY} bold>
Configure {provider.displayName}
</Text>
<Box justifyContent="center" marginBottom={1}>
<Text color={TEXT_PRIMARY} bold>
◆ Configure {provider.displayName} ◆
</Text>
</Box>
{provider.description && (
<Box marginTop={1} width={maxWidth - 4}>
<Text color={TEXT_DIM} wrap="wrap">{provider.description}</Text>
<Box justifyContent="center" marginBottom={1}>
<Box width={maxWidth - 4}>
<Text color={TEXT_DIM} wrap="wrap">{provider.description}</Text>
</Box>
</Box>
)}
<Box marginTop={1} />
@@ -436,10 +440,10 @@ export const ProviderConfigurator = React.memo(function ProviderConfigurator({ p
<Box marginTop={1}>
<Box width={maxWidth - 4}>
<Text color={TEXT_DIM} wrap="wrap">
enter to confirm · esc to go back
enter confirm · esc back
{currentKey.secret && (
<>
{" · tab to "}
{" · tab "}
{masked ? "reveal" : "hide"}
</>
)}
ui/text/src/tui.tsx
+38 -26
View File
@@ -20,7 +20,8 @@ import type {
import { ndJsonStream } from "@agentclientprotocol/sdk";
import { GooseClient } from "@aaif/goose-sdk";
import Onboarding from "./onboarding.js";
import ConfigureScreen from "./configure.js";
import ConfigureScreen, { ConfigureIntent } from "./configure.js";
import ExtensionsManager from "./extensions.js";
import type { PendingPermission, ResponseItem, Turn } from "./types.js";
import {
emptyLine,
@@ -483,7 +484,8 @@ function App({
const [scrollOffset, setScrollOffset] = useState(0);
const [pastedFull, setPastedFull] = useState<string | null>(null);
const [needsOnboarding, setNeedsOnboarding] = useState(false);
const [configuring, setConfiguring] = useState(false);
type Overlay = { screen: "configure"; intent: ConfigureIntent } | { screen: "extensions" };
const [overlay, setOverlay] = useState<Overlay | null>(null);
const clientRef = useRef<GooseClient | null>(null);
const sessionIdRef = useRef<string | null>(null);
@@ -805,9 +807,11 @@ function App({
exit();
}
if (ch === "g" && key.ctrl && !loading && !pendingPermission && sessionIdRef.current) {
setConfiguring(true);
return;
if (!loading && !pendingPermission && sessionIdRef.current) {
if (key.ctrl && (ch === "p" || ch === "P")) { setOverlay({ screen: "configure", intent: "provider" }); return; }
if (key.ctrl && (ch === "m" || ch === "M")) { setOverlay({ screen: "configure", intent: "model" }); return; }
if (key.ctrl && (ch === "e" || ch === "E")) { setOverlay({ screen: "extensions" }); return; }
if (ch === "g" && key.ctrl) { setOverlay({ screen: "configure", intent: "provider" }); return; }
}
if (pendingPermission) {
@@ -875,7 +879,7 @@ function App({
});
return;
}
}, { isActive: !needsOnboarding && !configuring });
}, { isActive: !needsOnboarding && !overlay });
const PAD_X = 2;
const PAD_Y = 1;
@@ -935,26 +939,34 @@ function App({
);
}
if (configuring && clientRef.current && sessionIdRef.current) {
return (
<Box
flexDirection="column"
width={safeTermWidth}
height={safeTermHeight}
>
<ConfigureScreen
client={clientRef.current}
sessionId={sessionIdRef.current}
width={safeTermWidth}
height={safeTermHeight}
onComplete={() => {
setConfiguring(false);
setStatus("ready");
}}
onCancel={() => setConfiguring(false)}
/>
</Box>
);
if (overlay && clientRef.current && sessionIdRef.current) {
if (overlay.screen === "configure") {
const intent = overlay.intent;
return (
<Box flexDirection="column" width={safeTermWidth} height={safeTermHeight}>
<ConfigureScreen
client={clientRef.current}
sessionId={sessionIdRef.current}
width={safeTermWidth}
height={safeTermHeight}
onComplete={() => { setOverlay(null); setStatus("ready"); }}
onCancel={() => setOverlay(null)}
initialIntent={intent}
/>
</Box>
);
} else if (overlay.screen === "extensions") {
return (
<Box flexDirection="column" width={safeTermWidth} height={safeTermHeight}>
<ExtensionsManager
client={clientRef.current}
sessionId={sessionIdRef.current}
height={safeTermHeight}
onClose={() => setOverlay(null)}
/>
</Box>
);
}
}
return (