@sayknow-cli/coding-agent 0.3.5 → 0.3.7

package/src/modes/components/skill-message.ts

@@ -13,18 +13,20 @@ import {
 import { getMarkdownTheme, theme } from "../../modes/theme/theme";
 import type { CustomMessage, SkillPromptDetails } from "../../session/messages";
 
-const COLLAPSED_ARGS_PREVIEW_WIDTH = 96;
+const DEFAULT_COLLAPSED_ARGS_PREVIEW_WIDTH = 96;
 const COLLAPSED_ARGS_PREVIEW_LINES = 6;
+const SKILL_BOX_HORIZONTAL_PADDING = 1;
 export class SkillMessageComponent extends Container {
 	#box: Box;
 	#contentComponent?: Component;
 	#expanded = false;
+	#argsPreviewWidth = DEFAULT_COLLAPSED_ARGS_PREVIEW_WIDTH;
 
 	constructor(private readonly message: CustomMessage<SkillPromptDetails>) {
 		super();
 		this.addChild(new Spacer(1));
 
-		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+		this.#box = new Box(SKILL_BOX_HORIZONTAL_PADDING, 1, t => theme.bg("customMessageBg", t));
 		this.#rebuild();
 	}
 
@@ -40,6 +42,15 @@ export class SkillMessageComponent extends Container {
 		this.#rebuild();
 	}
 
+	override render(width: number): string[] {
+		const contentWidth = Math.max(1, width - SKILL_BOX_HORIZONTAL_PADDING * 2);
+		if (this.#argsPreviewWidth !== contentWidth) {
+			this.#argsPreviewWidth = contentWidth;
+			this.#rebuild();
+		}
+		return super.render(width);
+	}
+
 	#rebuild(): void {
 		if (this.#contentComponent) {
 			this.removeChild(this.#contentComponent);
@@ -57,7 +68,7 @@ export class SkillMessageComponent extends Container {
 		// Collapsed view keeps args readable without exposing the full prompt body.
 		// Each visual line is bounded, but multi-line arguments remain multi-line so
 		// the invocation context is not mistaken for a one-line truncated payload.
-		const argsPreview = args ? this.#formatArgsPreview(args) : [];
+		const argsPreview = args ? this.#formatArgsPreview(args, this.#argsPreviewWidth) : [];
 		const header = `${theme.fg("customMessageLabel", theme.bold("[skill]"))} ${theme.fg("customMessageText", name)}`;
 		this.#box.addChild(new Text(header, 0, 0));
 		if (argsPreview.length > 0) {
@@ -111,19 +122,19 @@ export class SkillMessageComponent extends Container {
 		this.#box.addChild(this.#contentComponent);
 	}
 
-	#formatArgsPreview(args: string): string[] {
+	#formatArgsPreview(args: string, width: number): string[] {
 		const preview: string[] = [];
 		let omitted = false;
 		const sourceLines = replaceTabs(args).split(/\r?\n/);
 		for (let index = 0; index < sourceLines.length; index += 1) {
 			const sourceLine = sourceLines[index]?.trimEnd() ?? "";
-			const wrapped = wrapTextWithAnsi(sourceLine.length > 0 ? sourceLine : " ", COLLAPSED_ARGS_PREVIEW_WIDTH);
+			const wrapped = wrapTextWithAnsi(sourceLine.length > 0 ? sourceLine : " ", width);
 			for (const line of wrapped.length > 0 ? wrapped : [""]) {
 				if (preview.length >= COLLAPSED_ARGS_PREVIEW_LINES) {
 					omitted = true;
 					break;
 				}
-				preview.push(truncateToWidth(line, COLLAPSED_ARGS_PREVIEW_WIDTH));
+				preview.push(truncateToWidth(line, width));
 			}
 			if (omitted) break;
 		}
@@ -132,10 +143,7 @@ export class SkillMessageComponent extends Container {
 			omitted ||= replaceTabs(args).trimEnd().length > visibleSource.trimEnd().length;
 		}
 		if (omitted && preview.length > 0) {
-			preview[preview.length - 1] = truncateToWidth(
-				`${preview[preview.length - 1]} …`,
-				COLLAPSED_ARGS_PREVIEW_WIDTH,
-			);
+			preview[preview.length - 1] = truncateToWidth(`${preview[preview.length - 1]} …`, width);
 		}
 		return preview;
 	}

package/src/modes/components/status-line/presets.ts

@@ -24,6 +24,17 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 		},
 	},
 
+	"default-usage": {
+		leftSegments: ["model", "mode", "git", "pr", "path"],
+		rightSegments: ["session_name", "jobs", "token_rate", "usage", "context_pct", "cost"],
+		separator: "slash",
+		segmentOptions: {
+			model: { showThinkingLevel: true },
+			path: { abbreviate: true, maxLength: 32, stripWorkPrefix: true },
+			git: { showBranch: true, showStaged: true, showUnstaged: true, showUntracked: true },
+		},
+	},
+
 	minimal: {
 		leftSegments: ["path", "git"],
 		rightSegments: ["session_name", "jobs", "mode", "context_pct"],

package/src/modes/components/status-line/segments.ts

@@ -495,7 +495,12 @@ const sessionNameSegment: StatusLineSegment = {
 	},
 };
 
-function pickUsageColor(percent: number): "muted" | "warning" | "error" {
+function pickUsageColor(percent: number, mode: "used" | "remaining"): "muted" | "warning" | "error" {
+	if (mode === "remaining") {
+		if (percent <= 20) return "error";
+		if (percent <= 50) return "warning";
+		return "muted";
+	}
 	if (percent >= 80) return "error";
 	if (percent >= 50) return "warning";
 	return "muted";
@@ -520,28 +525,20 @@ const usageSegment: StatusLineSegment = {
 	id: "usage",
 	render(ctx) {
 		const u = ctx.usage;
-		if (!u || (!u.fiveHour && !u.sevenDay)) {
+		if (!u || u.windows.length === 0) {
 			return { content: "", visible: false };
 		}
-		const parts: string[] = [];
-		if (u.fiveHour) {
-			const pct = u.fiveHour.percent;
-			const pctText = theme.fg(pickUsageColor(pct), `${Math.round(pct)}%`);
-			const reset =
-				u.fiveHour.resetMinutes !== undefined
-					? theme.fg("muted", ` (${formatUsageReset(u.fiveHour.resetMinutes, "m")})`)
-					: "";
-			parts.push(`5h ${pctText}${reset}`);
-		}
-		if (u.sevenDay) {
-			const pct = u.sevenDay.percent;
-			const pctText = theme.fg(pickUsageColor(pct), `${Math.round(pct)}%`);
+		const mode = ctx.options.usage?.mode === "remaining" ? "remaining" : "used";
+		const parts = u.windows.map(window => {
+			const displayPercent =
+				mode === "remaining" ? Math.max(0, Math.min(100, 100 - window.percent)) : window.percent;
+			const pctText = theme.fg(pickUsageColor(displayPercent, mode), `${Math.round(displayPercent)}%`);
 			const reset =
-				u.sevenDay.resetHours !== undefined
-					? theme.fg("muted", ` (${formatUsageReset(u.sevenDay.resetHours, "h")})`)
+				window.resetValue !== undefined && window.resetUnit !== undefined
+					? theme.fg("muted", ` (${formatUsageReset(window.resetValue, window.resetUnit)})`)
 					: "";
-			parts.push(`7d ${pctText}${reset}`);
-		}
+			return `${window.label} ${pctText}${reset}`;
+		});
 		const content = withIcon(theme.icon.time, parts.join(theme.sep.dot));
 		return { content, visible: true };
 	},

package/src/modes/components/status-line/types.ts

@@ -51,8 +51,12 @@ export interface SegmentContext {
 		pr: { number: number; url: string } | null;
 	};
 	usage: {
-		fiveHour?: { percent: number; resetMinutes?: number };
-		sevenDay?: { percent: number; resetHours?: number };
+		windows: Array<{
+			label: string;
+			percent: number;
+			resetValue?: number;
+			resetUnit?: "m" | "h";
+		}>;
 	} | null;
 }