- {regularImages.map((image: ChatImageAttachment) => (
+ {regularImages.map((image) => (
))}
+ {userFiles.length > 0 || unknownAttachments.length > 0 ? (
+
+ {userFiles.map((file) => {
+ const content = (
+ <>
+
+
{file.name}
+ {file.downloadable === false ? null : (
+
+ )}
+
+ );
+ return file.previewUrl ? (
+
+ {content}
+
+ ) : file.downloadable === false ? (
+
+ {content}
+
+ ) : (
+
+ );
+ })}
+ {unknownAttachments.map((attachment) => (
+
+
+ {attachment.name}
+
+ ))}
+
{elementContexts.map((context) => (
diff --git a/apps/web/src/components/chat/composerAttachmentFiles.test.ts b/apps/web/src/components/chat/composerAttachmentFiles.test.ts
new file mode 100644
index 000000000..d650e0b10
--- /dev/null
+++ b/apps/web/src/components/chat/composerAttachmentFiles.test.ts
@@ -0,0 +1,280 @@
+import { EnvironmentId, PROVIDER_SEND_TURN_MAX_FILE_BYTES } from "@t3tools/contracts";
+import { describe, expect, it } from "vite-plus/test";
+
+import type { ComposerFileAttachment, ComposerImageAttachment } from "../../composerDraftStore";
+import {
+ attachmentsToReleaseOnUploadCapabilityLoss,
+ classifyComposerAttachmentFile,
+ fileAttachmentCapabilityBlockReason,
+ fileAttachmentStagingLimit,
+ inferImageMimeTypeFromName,
+ normalizeComposerImageFileMimeType,
+ shouldHandleComposerAttachmentPaste,
+} from "./composerAttachmentFiles";
+
+describe("composer attachment files", () => {
+ it("keeps supported images and HEIC photos on the image path", () => {
+ expect(classifyComposerAttachmentFile({ name: "photo.png", type: "image/png" })).toBe("image");
+ expect(classifyComposerAttachmentFile({ name: "photo.heic", type: "" })).toBe("image");
+ });
+
+ it("rejects unsupported image types instead of attaching them as generic files", () => {
+ expect(classifyComposerAttachmentFile({ name: "diagram.svg", type: "image/svg+xml" })).toBe(
+ "unsupported-image",
+ );
+ expect(classifyComposerAttachmentFile({ name: "photo.tiff", type: "image/tiff" })).toBe(
+ "unsupported-image",
+ );
+ expect(classifyComposerAttachmentFile({ name: "report.pdf", type: "application/pdf" })).toBe(
+ "file",
+ );
+ });
+
+ it("preserves text paste when an application adds a synthetic generic file", () => {
+ const file = new File(["clipboard"], "clipboard.rtf", { type: "application/rtf" });
+
+ expect(
+ shouldHandleComposerAttachmentPaste({
+ files: [file],
+ plainText: "Copied text",
+ }),
+ ).toBe(false);
+ });
+
+ it("claims unsupported image pastes so the composer can report them", () => {
+ const images = [
+ new File(["svg"], "diagram.svg", { type: "image/svg+xml" }),
+ new File(["tiff"], "photo.tiff", { type: "image/tiff" }),
+ ];
+
+ for (const image of images) {
+ expect(
+ shouldHandleComposerAttachmentPaste({
+ files: [image],
+ plainText: "Image caption",
+ }),
+ ).toBe(true);
+ }
+ });
+
+ it("claims generic file-only pastes so the composer can report validation errors", () => {
+ const file = new File(["report"], "report.pdf", { type: "application/pdf" });
+
+ expect(shouldHandleComposerAttachmentPaste({ files: [file], plainText: "" })).toBe(true);
+ });
+
+ it("routes empty and oversized generic files to composer feedback", () => {
+ const empty = new File([], "empty.txt", { type: "text/plain" });
+ const oversized = new File([new Uint8Array(1024)], "large.zip", {
+ type: "application/zip",
+ });
+
+ expect(shouldHandleComposerAttachmentPaste({ files: [empty], plainText: "" })).toBe(true);
+ expect(shouldHandleComposerAttachmentPaste({ files: [oversized], plainText: "" })).toBe(true);
+ });
+
+ it("ignores an empty clipboard", () => {
+ expect(shouldHandleComposerAttachmentPaste({ files: [], plainText: "" })).toBe(false);
+ });
+
+ it("falls back to the extension when an image arrives without a MIME type", () => {
+ expect(classifyComposerAttachmentFile({ name: "photo.jpg", type: "" })).toBe("image");
+ expect(classifyComposerAttachmentFile({ name: "shot.PNG", type: "" })).toBe("image");
+ expect(classifyComposerAttachmentFile({ name: "archive.zip", type: "" })).toBe("file");
+ expect(classifyComposerAttachmentFile({ name: "no-extension", type: "" })).toBe("file");
+ expect(inferImageMimeTypeFromName("photo.jpg")).toBe("image/jpeg");
+ expect(inferImageMimeTypeFromName("archive.zip")).toBeNull();
+ });
+
+ it("infers supported image types from octet-stream files", () => {
+ const jpeg = new File(["jpeg"], "photo.jpg", { type: "application/octet-stream" });
+ const png = new File(["png"], "shot.PNG", { type: "application/octet-stream" });
+
+ expect(classifyComposerAttachmentFile(jpeg)).toBe("image");
+ expect(classifyComposerAttachmentFile(png)).toBe("image");
+ expect(normalizeComposerImageFileMimeType(jpeg).type).toBe("image/jpeg");
+ expect(normalizeComposerImageFileMimeType(png).type).toBe("image/png");
+ });
+
+ it("does not infer images for unknown extensions or specific conflicting MIME types", () => {
+ const binary = new File(["binary"], "archive.bin", { type: "application/octet-stream" });
+ const unknownDocument = new File(["pdf"], "report.pdf", {
+ type: "application/octet-stream",
+ });
+ const document = new File(["pdf"], "photo.jpg", { type: "application/pdf" });
+ const explicitImage = new File(["png"], "photo.jpg", { type: "image/png" });
+
+ expect(classifyComposerAttachmentFile(binary)).toBe("file");
+ expect(classifyComposerAttachmentFile(unknownDocument)).toBe("file");
+ expect(classifyComposerAttachmentFile(document)).toBe("file");
+ expect(classifyComposerAttachmentFile(explicitImage)).toBe("image");
+ expect(normalizeComposerImageFileMimeType(binary)).toBe(binary);
+ expect(normalizeComposerImageFileMimeType(document)).toBe(document);
+ expect(normalizeComposerImageFileMimeType(explicitImage)).toBe(explicitImage);
+ });
+
+ it("uses the hard local limit while server config is unknown", () => {
+ expect(
+ fileAttachmentStagingLimit({
+ attachmentUploadsCapabilityKnown: false,
+ supportsAttachmentUploads: false,
+ maxFileAttachmentBytes: null,
+ }),
+ ).toBe(PROVIDER_SEND_TURN_MAX_FILE_BYTES);
+ expect(
+ fileAttachmentCapabilityBlockReason({
+ files: [{ name: "pending.zip", sizeBytes: PROVIDER_SEND_TURN_MAX_FILE_BYTES }],
+ attachmentUploadsCapabilityKnown: false,
+ supportsAttachmentUploads: false,
+ maxFileAttachmentBytes: null,
+ }),
+ ).toBe("Waiting for the server before file attachments can send");
+ });
+
+ it("rejects local staging and send when known config has no file support", () => {
+ const unsupportedReason =
+ "This server does not accept file attachments right now. Remove the files to send.";
+ expect(
+ fileAttachmentStagingLimit({
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: true,
+ maxFileAttachmentBytes: null,
+ }),
+ ).toBeNull();
+ expect(
+ fileAttachmentStagingLimit({
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: false,
+ maxFileAttachmentBytes: 50 * 1024 * 1024,
+ }),
+ ).toBeNull();
+ expect(
+ fileAttachmentCapabilityBlockReason({
+ files: [{ name: "report.pdf", sizeBytes: 1024 }],
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: true,
+ maxFileAttachmentBytes: null,
+ }),
+ ).toBe(unsupportedReason);
+ expect(
+ fileAttachmentCapabilityBlockReason({
+ files: [{ name: "report.pdf", sizeBytes: 1024 }],
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: false,
+ maxFileAttachmentBytes: 50 * 1024 * 1024,
+ }),
+ ).toBe(unsupportedReason);
+ });
+
+ it("blocks retained files that exceed a newly lower server limit", () => {
+ expect(
+ fileAttachmentCapabilityBlockReason({
+ files: [{ name: "large.zip", sizeBytes: 2 * 1024 * 1024 }],
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: true,
+ maxFileAttachmentBytes: 1024 * 1024,
+ }),
+ ).toBe("'large.zip' exceeds the 1 MB attachment limit.");
+ });
+
+ it("uses the confirmed server limit without exceeding the hard cap", () => {
+ expect(
+ fileAttachmentStagingLimit({
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: true,
+ maxFileAttachmentBytes: 1024 * 1024,
+ }),
+ ).toBe(1024 * 1024);
+ expect(
+ fileAttachmentStagingLimit({
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: true,
+ maxFileAttachmentBytes: PROVIDER_SEND_TURN_MAX_FILE_BYTES * 2,
+ }),
+ ).toBe(PROVIDER_SEND_TURN_MAX_FILE_BYTES);
+ expect(
+ fileAttachmentCapabilityBlockReason({
+ files: [{ name: "report.pdf", sizeBytes: 1024 }],
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: true,
+ maxFileAttachmentBytes: 50 * 1024 * 1024,
+ }),
+ ).toBeNull();
+ });
+
+ it("does not block empty or image-only composers on legacy servers", () => {
+ expect(
+ fileAttachmentCapabilityBlockReason({
+ files: [],
+ attachmentUploadsCapabilityKnown: true,
+ supportsAttachmentUploads: false,
+ maxFileAttachmentBytes: null,
+ }),
+ ).toBeNull();
+ expect(
+ fileAttachmentCapabilityBlockReason({
+ files: [],
+ attachmentUploadsCapabilityKnown: false,
+ supportsAttachmentUploads: false,
+ maxFileAttachmentBytes: null,
+ }),
+ ).toBeNull();
+ });
+
+ it("keeps draft-persisted file uploads when the upload capability flips off", () => {
+ const environmentId = EnvironmentId.make("environment-1");
+ const image: ComposerImageAttachment = {
+ type: "image",
+ id: "image-1",
+ name: "photo.png",
+ mimeType: "image/png",
+ sizeBytes: 3,
+ previewUrl: "blob:photo",
+ file: new File([new Uint8Array([1, 2, 3])], "photo.png", { type: "image/png" }),
+ };
+ const uploadingFile: ComposerFileAttachment = {
+ type: "file",
+ id: "file-uploading",
+ name: "fresh.pdf",
+ mimeType: "application/pdf",
+ sizeBytes: 3,
+ file: new File([new Uint8Array([1, 2, 3])], "fresh.pdf", { type: "application/pdf" }),
+ };
+ const hydratedFile: ComposerFileAttachment = {
+ type: "file",
+ id: "file-hydrated",
+ name: "report.pdf",
+ mimeType: "application/pdf",
+ sizeBytes: 3,
+ file: null,
+ uploadedAttachmentId: "pending-report-pdf",
+ uploadEnvironmentId: environmentId,
+ };
+ const uploadedLocalFile: ComposerFileAttachment = {
+ ...uploadingFile,
+ id: "file-uploaded-local",
+ uploadedAttachmentId: "pending-fresh-pdf",
+ uploadEnvironmentId: environmentId,
+ };
+
+ const released = attachmentsToReleaseOnUploadCapabilityLoss([
+ image,
+ uploadingFile,
+ hydratedFile,
+ uploadedLocalFile,
+ ]);
+
+ expect(released.map((attachment) => attachment.id)).toEqual(["image-1", "file-uploading"]);
+ });
+
+ it("claims image pastes even when clipboard text is present", () => {
+ const image = new File(["image"], "photo.heic", { type: "image/heic" });
+
+ expect(
+ shouldHandleComposerAttachmentPaste({
+ files: [image],
+ plainText: "Image caption",
+ }),
+ ).toBe(true);
+ });
+});
diff --git a/apps/web/src/components/chat/composerAttachmentFiles.ts b/apps/web/src/components/chat/composerAttachmentFiles.ts
new file mode 100644
index 000000000..58ca40508
--- /dev/null
+++ b/apps/web/src/components/chat/composerAttachmentFiles.ts
@@ -0,0 +1,153 @@
+import {
+ isProviderSendTurnSupportedImageMimeType,
+ PROVIDER_SEND_TURN_MAX_FILE_BYTES,
+} from "@t3tools/contracts";
+import {
+ clampFileAttachmentUploadBytes,
+ fileAttachmentTooLargeMessage,
+} from "@t3tools/client-runtime/state/attachments";
+
+import type { ComposerFileAttachment, ComposerImageAttachment } from "../../composerDraftStore";
+import { isHeicImageFile } from "../../lib/imageCompression";
+
+type ComposerAttachmentFileKind = "image" | "file" | "unsupported-image";
+
+interface FileAttachmentCapabilityState {
+ readonly attachmentUploadsCapabilityKnown: boolean;
+ readonly supportsAttachmentUploads: boolean;
+ readonly maxFileAttachmentBytes: number | null;
+}
+
+const IMAGE_MIME_TYPE_BY_EXTENSION: Readonly
> = {
+ gif: "image/gif",
+ jpeg: "image/jpeg",
+ jpg: "image/jpeg",
+ png: "image/png",
+ webp: "image/webp",
+};
+
+/**
+ * Some sources (drags from other apps, files piped through a shell) hand over
+ * a `File` with an empty or generic MIME type. Maps the extension to a
+ * provider-supported image type so a plain `photo.jpg` still lands on the
+ * image path; anything unrecognized stays a generic file.
+ */
+export function inferImageMimeTypeFromName(name: string): string | null {
+ const dotIndex = name.lastIndexOf(".");
+ if (dotIndex <= 0) {
+ return null;
+ }
+ return IMAGE_MIME_TYPE_BY_EXTENSION[name.slice(dotIndex + 1).toLowerCase()] ?? null;
+}
+
+function inferImageMimeTypeForUnknownFile(file: Pick): string | null {
+ const mimeType = file.type.toLowerCase();
+ if (mimeType !== "" && mimeType !== "application/octet-stream") {
+ return null;
+ }
+ return inferImageMimeTypeFromName(file.name);
+}
+
+/** Give extension-recognized images a concrete type before compression. */
+export function normalizeComposerImageFileMimeType(file: File): File {
+ const inferredMimeType = inferImageMimeTypeForUnknownFile(file);
+ if (!inferredMimeType) {
+ return file;
+ }
+ return new File([file], file.name, {
+ type: inferredMimeType,
+ lastModified: file.lastModified,
+ });
+}
+
+export function classifyComposerAttachmentFile(
+ file: Pick,
+): ComposerAttachmentFileKind {
+ if (isHeicImageFile(file)) {
+ return "image";
+ }
+ if (inferImageMimeTypeForUnknownFile(file)) {
+ return "image";
+ }
+ if (!file.type.toLowerCase().startsWith("image/")) {
+ return "file";
+ }
+ return isProviderSendTurnSupportedImageMimeType(file.type) ? "image" : "unsupported-image";
+}
+
+/** Byte limit for adding a generic file to the local composer draft. */
+export function fileAttachmentStagingLimit(input: FileAttachmentCapabilityState): number | null {
+ if (!input.attachmentUploadsCapabilityKnown) {
+ return PROVIDER_SEND_TURN_MAX_FILE_BYTES;
+ }
+ if (!input.supportsAttachmentUploads || input.maxFileAttachmentBytes === null) {
+ return null;
+ }
+ return clampFileAttachmentUploadBytes(input.maxFileAttachmentBytes);
+}
+
+/** Why retained generic files cannot send with the current server config. */
+export function fileAttachmentCapabilityBlockReason(
+ input: FileAttachmentCapabilityState & {
+ readonly files: ReadonlyArray<{ readonly name: string; readonly sizeBytes: number }>;
+ },
+): string | null {
+ if (input.files.length === 0) {
+ return null;
+ }
+ if (!input.attachmentUploadsCapabilityKnown) {
+ return "Waiting for the server before file attachments can send";
+ }
+ const maxFileAttachmentBytes = fileAttachmentStagingLimit(input);
+ if (maxFileAttachmentBytes === null) {
+ return "This server does not accept file attachments right now. Remove the files to send.";
+ }
+ const oversizedFile = input.files.find((file) => file.sizeBytes > maxFileAttachmentBytes);
+ if (oversizedFile) {
+ return fileAttachmentTooLargeMessage(oversizedFile.name, maxFileAttachmentBytes);
+ }
+ return null;
+}
+
+/**
+ * When `capabilities.attachmentUploads` flips off (reconnect, version skew),
+ * tear down only uploads that have not been persisted onto a draft file.
+ * Once `uploadedAttachmentId` is stamped, the draft references that server
+ * copy after reload even if its local `File` is still available in memory.
+ * Explicit attachment removal releases persisted uploads through
+ * `releaseDraftAttachment`.
+ */
+export function attachmentsToReleaseOnUploadCapabilityLoss(
+ attachments: ReadonlyArray,
+): Array {
+ return attachments.filter(
+ (attachment) => !(attachment.type === "file" && attachment.uploadedAttachmentId !== undefined),
+ );
+}
+
+/**
+ * Whether a paste's files should be claimed as composer attachments instead of
+ * falling through to the default text paste. Deliberately no capacity or
+ * pending-plan-question gate here: `addComposerAttachments` owns those limits
+ * and reports them, while a gate at this layer would swallow the paste with no
+ * feedback.
+ */
+export function shouldHandleComposerAttachmentPaste(input: {
+ readonly files: ReadonlyArray;
+ readonly plainText: string;
+}): boolean {
+ if (
+ input.files.some((file) => {
+ const classification = classifyComposerAttachmentFile(file);
+ return classification === "image" || classification === "unsupported-image";
+ })
+ ) {
+ return true;
+ }
+
+ if (input.plainText.length > 0) {
+ return false;
+ }
+
+ return input.files.some((file) => classifyComposerAttachmentFile(file) === "file");
+}
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index ccbd1f065..10a7b7e66 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -3,7 +3,6 @@ import {
CircleXIcon,
EllipsisIcon,
FileJsonIcon,
- InfoIcon,
MinusIcon,
PlusIcon,
SearchIcon,
@@ -44,12 +43,12 @@ import {
serverEnvironment,
} from "../../state/server";
import { usePrimaryEnvironment } from "../../state/environments";
+import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Kbd, KbdGroup } from "../ui/kbd";
import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { ScrollArea } from "../ui/scroll-area";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import { Toggle } from "../ui/toggle";
import { toastManager } from "../ui/toast";
@@ -69,17 +68,23 @@ import {
unknownWhenVariables,
whenAstToExpression,
} from "./KeybindingsSettings.logic";
-import { SettingsPageContainer, SettingsSection } from "./settingsLayout";
+import { SettingsPageContainer, SettingsRow, SettingsSection } from "./settingsLayout";
import { searchableSetting } from "./settingsSearch";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
import { useAtomCommand } from "../../state/use-atom-command";
function KeybindingPill({ value }: { value: string }) {
- const parts = value.split("+");
+ // Keys dedupe repeated parts; a literal "+" in a shortcut splits into empty strings.
+ const seenParts = new Map();
+ const parts = value.split("+").map((part) => {
+ const seen = seenParts.get(part) ?? 0;
+ seenParts.set(part, seen + 1);
+ return { part, key: seen === 0 ? part : `${part}-${seen}` };
+ });
return (
- {parts.map((part) => (
-
+ {parts.map(({ part, key }) => (
+
{part === "mod"
? navigator.platform.toLowerCase().includes("mac")
? "⌘"
@@ -231,19 +236,18 @@ function defaultWhenGroup(operator: BooleanOperator = "and"): KeybindingWhenNode
};
}
-function UnknownWhenVariableWarning({
- identifiers,
+/** Warning glyph whose explanation lives in a tooltip; the one owner of that affordance here. */
+function WarningTooltipIcon({
+ label,
focusable = true,
+ className,
+ children,
}: {
- identifiers: ReadonlyArray;
+ label: string;
focusable?: boolean;
+ className?: string | undefined;
+ children: ReactNode;
}) {
- if (identifiers.length === 0) return null;
- const label =
- identifiers.length === 1
- ? `Unknown condition: ${identifiers[0]}`
- : `Unknown conditions: ${identifiers.join(", ")}`;
-
return (
-
-
+ className={cn(
+ "inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-warning outline-none transition-colors hover:bg-warning/10 focus-visible:ring-[3px] focus-visible:ring-warning/25",
+ className,
+ )}
+ />
}
- />
+ >
+
+
- T3 Code does not recognize this condition yet. It can still be saved, but it may not match
- unless the runtime provides it.
+ {children}
);
}
+function UnknownWhenVariableWarning({
+ identifiers,
+ focusable = true,
+}: {
+ identifiers: ReadonlyArray;
+ focusable?: boolean;
+}) {
+ if (identifiers.length === 0) return null;
+ const label =
+ identifiers.length === 1
+ ? `Unknown condition: ${identifiers[0]}`
+ : `Unknown conditions: ${identifiers.join(", ")}`;
+
+ return (
+
+ T3 Code does not recognize this condition yet. It can still be saved, but it may not match
+ unless the runtime provides it.
+
+ );
+}
+
function KeybindingConflictWarning({ labels }: { labels: ReadonlyArray }) {
if (labels.length === 0) return null;
const description =
@@ -273,22 +300,9 @@ function KeybindingConflictWarning({ labels }: { labels: ReadonlyArray }
: `Conflicts with ${labels.slice(0, 3).join(", ")}${labels.length > 3 ? ", and more" : ""}.`;
return (
-
-
-
-
- }
- />
-
- {description} The most recent matching binding wins when both conditions can apply.
-
-
+
+ {description} The most recent matching binding wins when both conditions can apply.
+
);
}
@@ -733,32 +747,20 @@ function rowKeybindingTarget(row: KeybindingRow): ServerRemoveKeybindingInput {
};
}
-function KeybindingTableRow({
+/** Draft state and actions for editing one existing binding; layouts decide how to render it. */
+function useKeybindingRowEditor({
row,
allRows,
- variables,
- isSaving,
onSave,
- onReset,
- onRemove,
}: {
row: KeybindingRow;
allRows: ReadonlyArray;
- variables: ReadonlyArray;
- isSaving: boolean;
onSave: (input: ServerUpsertKeybindingInput) => void;
- onReset: (row: KeybindingRow) => void;
- onRemove: (row: KeybindingRow) => void;
}) {
const [draft, setDraft] = useReducer(keybindingRowDraftReducer, row, createKeybindingRowDraft);
const { keyDraft, whenDraft, isRecording, isWhenDraftValid } = draft;
const whenDraftExpression = whenAstToExpression(whenDraft);
const isDirty = keyDraft !== row.key || whenDraftExpression !== row.when;
- const displayShortcut = formatShortcutLabel(row.binding.shortcut);
- const canReset = row.source === "Custom" && row.defaultKey !== null;
- const canRemove = row.source !== "Default";
- const hasRowActions = canReset || canRemove;
- const showPill = !isRecording && keyDraft === row.key && row.key.length > 0 && !isDirty;
const conflictLabels = keybindingConflictLabels(allRows, {
rowId: row.id,
key: keyDraft,
@@ -786,139 +788,277 @@ function KeybindingTableRow({
setDraft({ keyDraft: next, isRecording: false });
};
+ return {
+ keyDraft,
+ whenDraft,
+ isRecording,
+ isWhenDraftValid,
+ whenDraftExpression,
+ isDirty,
+ conflictLabels,
+ setDraft,
+ save,
+ captureKeybinding,
+ };
+}
+
+type KeybindingRowEditor = ReturnType;
+
+interface KeybindingRowActions {
+ allRows: ReadonlyArray;
+ variables: ReadonlyArray;
+ onSave: (input: ServerUpsertKeybindingInput) => void;
+ onReset: (row: KeybindingRow) => void;
+ onRemove: (row: KeybindingRow) => void;
+}
+
+type KeybindingRowProps = KeybindingRowActions & { row: KeybindingRow; isSaving: boolean };
+
+/** Shortcut pill that turns into a capture input when clicked, plus Save once the draft changes. */
+function KeybindingKeyControl({
+ row,
+ editor,
+ isSaving,
+ pillClassName,
+}: {
+ row: KeybindingRow;
+ editor: KeybindingRowEditor;
+ isSaving: boolean;
+ pillClassName?: string | undefined;
+}) {
+ const { keyDraft, isRecording, isDirty, isWhenDraftValid, setDraft, save, captureKeybinding } =
+ editor;
+ const showPill = !isRecording && keyDraft === row.key && row.key.length > 0 && !isDirty;
+
return (
-
-
-
-
-
- }
- >
- {commandLabel(row.command)}
-
- {row.command}
-
-
-
-
- {showPill ? (
-
- ) : (
-
setDraft({ isRecording: true })}
- onBlur={() => setDraft({ isRecording: false })}
- onChange={(event) => setDraft({ keyDraft: event.currentTarget.value })}
- onKeyDown={captureKeybinding}
+ <>
+ {isDirty ? (
+
+ ) : null}
+ {showPill ? (
+
+ ) : (
+
setDraft({ isRecording: true })}
+ onBlur={() => setDraft({ isRecording: false })}
+ onChange={(event) => setDraft({ keyDraft: event.currentTarget.value })}
+ onKeyDown={captureKeybinding}
+ />
+ )}
+
+ );
+}
+
+/** Quiet inline trigger showing the when clause; opens the expression builder. */
+function WhenClauseControl({
+ label,
+ expression,
+ value,
+ variables,
+ onChange,
+ onValidityChange,
+}: {
+ label: string;
+ expression: string;
+ value: KeybindingWhenNode | undefined;
+ variables: ReadonlyArray
;
+ onChange: (value: KeybindingWhenNode | undefined) => void;
+ onValidityChange: (valid: boolean) => void;
+}) {
+ return (
+
+
- )}
- {isDirty ? (
+ }
+ aria-label={`Edit when clause for ${label}`}
+ >
+ {expression || "Always"}
+
+
+
+
+
+
+ );
+}
+
+function KeybindingRowMenu({
+ row,
+ isSaving,
+ onReset,
+ onRemove,
+}: {
+ row: KeybindingRow;
+ isSaving: boolean;
+ onReset: (row: KeybindingRow) => void;
+ onRemove: (row: KeybindingRow) => void;
+}) {
+ const canReset = row.source === "Custom" && row.defaultKey !== null;
+ const canRemove = row.source !== "Default";
+ if (!canReset && !canRemove) return null;
+
+ return (
+
-
-
-
- {whenDraftExpression || "Always"}
-
-
-
- setDraft({ whenDraft: nextWhenDraft })}
- onValidityChange={(nextIsValid) => setDraft({ isWhenDraftValid: nextIsValid })}
- />
-
-
-
-
-
- {hasRowActions ? (
-
+ {canRemove ? (
+
) : null}
- {displayShortcut}
-
-
+
+
+
+
+ }
+ />
+ );
+}
+
+/** Draft state for a binding that does not exist yet. */
+function useNewKeybindingDraft({
+ allRows,
+ onSave,
+}: {
+ allRows: ReadonlyArray;
onSave: (input: ServerUpsertKeybindingInput) => void;
- onCancel: () => void;
}) {
const [commandDraft, setCommandDraft] = useState("");
const [draft, setDraft] = useReducer(keybindingRowDraftReducer, {
@@ -935,6 +1075,7 @@ function NewKeybindingTableRow({
when: whenDraftExpression,
});
const commandLabelText = commandDraft ? commandLabel(commandDraft) : "new keybinding";
+ const canSave = Boolean(commandDraft) && keyDraft.trim().length > 0 && isWhenDraftValid;
const save = () => {
if (!commandDraft) return;
@@ -957,93 +1098,222 @@ function NewKeybindingTableRow({
setDraft({ keyDraft: next, isRecording: false });
};
+ return {
+ commandDraft,
+ setCommandDraft,
+ keyDraft,
+ whenDraft,
+ whenDraftExpression,
+ isRecording,
+ conflictLabels,
+ commandLabelText,
+ canSave,
+ setDraft,
+ save,
+ captureKeybinding,
+ };
+}
+
+type NewKeybindingDraft = ReturnType;
+
+interface NewKeybindingProps {
+ commandOptions: ReadonlyArray;
+ allRows: ReadonlyArray;
+ variables: ReadonlyArray;
+ isSaving: boolean;
+ onSave: (input: ServerUpsertKeybindingInput) => void;
+ onCancel: () => void;
+}
+
+function NewKeybindingCommandSelect({
+ draft,
+ commandOptions,
+ className,
+}: {
+ draft: NewKeybindingDraft;
+ commandOptions: ReadonlyArray;
+ className?: string | undefined;
+}) {
return (
-
-
-
-
-
-
setDraft({ isRecording: true })}
- onBlur={() => setDraft({ isRecording: false })}
- onChange={(event) => setDraft({ keyDraft: event.currentTarget.value })}
- onKeyDown={captureKeybinding}
+
+ );
+}
+
+function NewKeybindingKeyInput({
+ draft,
+ autoFocus = false,
+ className,
+}: {
+ draft: NewKeybindingDraft;
+ autoFocus?: boolean;
+ className?: string | undefined;
+}) {
+ return (
+
draft.setDraft({ isRecording: true })}
+ onBlur={() => draft.setDraft({ isRecording: false })}
+ onChange={(event) => draft.setDraft({ keyDraft: event.currentTarget.value })}
+ onKeyDown={draft.captureKeybinding}
+ />
+ );
+}
+
+function NewKeybindingWhen({
+ draft,
+ variables,
+}: {
+ draft: NewKeybindingDraft;
+ variables: ReadonlyArray
;
+}) {
+ return (
+ draft.setDraft({ whenDraft })}
+ onValidityChange={(isWhenDraftValid) => draft.setDraft({ isWhenDraftValid })}
+ />
+ );
+}
+
+function NewKeybindingCancelIcon({
+ isSaving,
+ onCancel,
+}: {
+ isSaving: boolean;
+ onCancel: () => void;
+}) {
+ return (
+
+
+ }
+ >
+
+
+ Cancel
+
+ );
+}
+
+/** Add-binding form shaped like the binding rows below it. */
+function NewKeybindingSettingsRow(props: NewKeybindingProps) {
+ const { commandOptions, allRows, variables, isSaving, onSave, onCancel } = props;
+ const draft = useNewKeybindingDraft({ allRows, onSave });
+
+ return (
+
+ When
+
+
+ }
+ control={
+
+
+
+
+
+
+
+ }
+ />
+ );
+}
+
+interface KeybindingsListProps extends KeybindingRowActions {
+ rows: ReadonlyArray;
+ commandOptions: ReadonlyArray;
+ savingCommand: KeybindingCommand | null;
+ isAddingBinding: boolean;
+ onCancelAdd: () => void;
+}
+
+/** The add-binding row, one settings row per binding, and the empty state. */
+function KeybindingsList(props: KeybindingsListProps) {
+ const { rows, commandOptions, savingCommand, isAddingBinding, onCancelAdd, ...rowActions } =
+ props;
+ const newProps: NewKeybindingProps = {
+ commandOptions,
+ allRows: rows,
+ variables: rowActions.variables,
+ isSaving: savingCommand !== null,
+ onSave: rowActions.onSave,
+ onCancel: onCancelAdd,
+ };
+ return (
+
+ {isAddingBinding ? : null}
+ {rows.map((row) => (
+
-
-
-
-
-
- {whenDraftExpression || "Always"}
-
-
-
- setDraft({ whenDraft: nextWhenDraft })}
- onValidityChange={(nextIsValid) => setDraft({ isWhenDraftValid: nextIsValid })}
- />
-
-
-
-
-
-
- }
- >
-
-
- Cancel
-
-
+ ))}
+ {rows.length === 0 && !isAddingBinding ? (
+
+ No keybindings match your search.
+
+ ) : null}
+
+ );
+}
+
+/** Shown in the browser build only; the desktop app receives every shortcut. */
+function BrowserKeybindingNotice() {
+ return (
+
+
+
+ Some shortcuts may be claimed by the browser before T3 Code sees them. Use the desktop app
+ for better keybinding support.
+
);
}
@@ -1187,6 +1457,8 @@ export function KeybindingsSettingsPanel() {
[saveKeybinding],
);
+ const cancelAdd = useCallback(() => setIsAddingBinding(false), []);
+
const bindingsCount = (
{rows.length + (isAddingBinding ? 1 : 0)}{" "}
@@ -1194,8 +1466,21 @@ export function KeybindingsSettingsPanel() {
);
+ const listProps: KeybindingsListProps = {
+ rows,
+ allRows: rows,
+ commandOptions,
+ variables: whenVariables,
+ savingCommand,
+ isAddingBinding,
+ onCancelAdd: cancelAdd,
+ onSave: saveKeybinding,
+ onReset: resetKeybinding,
+ onRemove: removeKeybinding,
+ };
+
return (
-
+
}
>
- {!isElectron ? (
-
-
-
- Some shortcuts may be claimed by the browser before T3 Code sees them. Use the desktop
- app for better keybinding support.
-
-
-
Command
-
Keybinding
-
When
-
Status
-
- {isAddingBinding ? (
-
setIsAddingBinding(false)}
- />
- ) : null}
- {rows.map((row) => (
-
- ))}
- {rows.length === 0 && !isAddingBinding ? (
-
- No keybindings match your search.
-
- ) : null}
- {versionLabel}
) : null;
+ // Healthy and disabled rows read fine from their text; only trouble gets a dot.
+ const statusDotNode =
+ statusKey === "warning" || statusKey === "error" ? (
+
+ ) : null;
+ const statusHeadlineNode = {summary.headline};
+ // Trouble states carry the server's explanation (a failed probe, a shadow
+ // home entry that is not a symlink, a missing binary). Show it wherever the
+ // headline shows so the user can act without opening the editor.
+ const needsAttention = statusKey === "warning" || statusKey === "error";
+ const statusLineClassName =
+ "flex min-w-0 flex-wrap items-center gap-x-1.5 text-[13px] leading-[1.45] text-muted-foreground/80";
+
if (mode === "list") {
return (
- {selected ?
: null}
-
updateEnabled(Boolean(checked))}
- aria-label={`Enable ${displayName}`}
- />
+
+ updateEnabled(Boolean(checked))}
+ aria-label={`Enable ${displayName}`}
+ />
+
-
+
{titleHeadNode}
{versionCodeNode}
- {versionAdvisory ? (
-
-
-
-
- }
- />
-
-
-
-
- Update available
-
-
+ {versionAdvisory ? (
+
+
- {versionAdvisory.detail}
-
-
- {onRunUpdate ? (
-
- ) : null}
- {onRunUpdate && updateCommand ? (
-
-
- or, update manually using
-
-
- ) : null}
- {updateCommand ? (
-
-
-
- {updateCommand}
-
-
-
-
- copyToClipboard(updateCommand, {
- providerName: displayName,
- })
- }
- aria-label="Copy update command"
- >
-
-
- }
- />
- Copy command
-
+ }
+ />
+
+
+
+
+ Update available
+
+
+ {versionAdvisory.detail}
+
- ) : null}
-
-
- ) : null}
- {titleTailNode}
+ {onRunUpdate ? (
+
+ ) : null}
+ {onRunUpdate && updateCommand ? (
+
+
+ or, update manually using
+
+
+ ) : null}
+ {updateCommand ? (
+
+
+
+ {updateCommand}
+
+
+
+
+ copyToClipboard(updateCommand, {
+ providerName: displayName,
+ })
+ }
+ aria-label="Copy update command"
+ >
+
+
+ }
+ />
+ Copy command
+
+
+ ) : null}
+
+
+
+ ) : null}
+ {titleTailNode}
+
- {summary.headline}
- {summary.detail ? · {summary.detail} : null}
+
+ {statusDotNode}
+ {isAuthenticated && authEmail ? (
+ <>
+ Authenticated as
+
+ {authLabel ? · {authLabel} : null}
+
+ ) : (
+ statusHeadlineNode
+ )}
+ {summary.detail && !needsAttention ? · {summary.detail} : null}
+
+ {summary.detail && needsAttention ? (
+
+ {summary.detail}
) : null}
+
{driverOption !== undefined ? (
-
-
+
- {authEmail?.trim() ? (
-
-
Account email
-
+
+
+
- ) : null}
-
-
-
-
-
-
-
-
- {driverOption ? (
-
- ) : null}
+
- {driverOption === undefined ? (
-
- This instance uses a driver (
- {String(instance.driver)}) that is not
- shipped with the current build. Configuration values are preserved but cannot be
- edited from this surface.
-
+
- ) : null}
-
+
+ This instance uses a driver (
+ {String(instance.driver)}) that is not
+ shipped with the current build. Configuration values are preserved but cannot be
+ edited from this surface.
+
+
+
{driverOption !== undefined ? (
-
+
>;
}
+function isAddProviderButton(element: ReactElement>): boolean {
+ return element.props["aria-label"] === "Add provider";
+}
+
async function flushPromises(): Promise {
await Promise.resolve();
await Promise.resolve();
@@ -212,14 +216,10 @@ describe("EnvironmentProviderSettings routing", () => {
const notice = visitElements(panel, (element) => element.props.title === "Limited permissions");
expect(notice).not.toBeNull();
- const providersSection = visitElements(
- panel,
- (element) => element.props.title === "Providers" && "headerAction" in element.props,
- );
- expect(providersSection?.props.headerAction).toBeNull();
expect(
visitElements(panel, (element) => element.props["aria-label"] === "Refresh provider status"),
).toBeNull();
+ expect(visitElements(panel, isAddProviderButton)).toBeNull();
});
it("keeps the editable layout interactive when not read only", () => {
@@ -229,11 +229,10 @@ describe("EnvironmentProviderSettings routing", () => {
expect(
visitElements(panel, (element) => element.props.title === "Limited permissions"),
).toBeNull();
- const providersSection = visitElements(
- panel,
- (element) => element.props.title === "Providers" && "headerAction" in element.props,
- );
- expect(providersSection?.props.headerAction).not.toBeNull();
+ expect(
+ visitElements(panel, (element) => element.props["aria-label"] === "Refresh provider status"),
+ ).not.toBeNull();
+ expect(visitElements(panel, isAddProviderButton)).not.toBeNull();
});
it("deletes and resets provider configuration without erasing shared preferences", () => {
diff --git a/apps/web/src/components/settings/ProviderSettingsPanel.tsx b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
index 395aa7c61..3fb193fe1 100644
--- a/apps/web/src/components/settings/ProviderSettingsPanel.tsx
+++ b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
@@ -220,11 +220,11 @@ export function ProviderSettingsPanel() {
options.length === 1 && options[0]?.entry.target._tag === "PrimaryConnectionTarget";
const deviceTabs =
!onlyPrimaryDevice && options.length > 0 ? (
-
+
{options.map((environment) => {
const Icon = providerEnvironmentIcon(environment);
@@ -243,10 +243,12 @@ export function ProviderSettingsPanel() {
>
{environment.label}
-
+ {environment.connection.phase !== "connected" ? (
+
+ ) : null}
{detail}, {statusText}
@@ -264,7 +266,7 @@ export function ProviderSettingsPanel() {
) : null;
return (
-
+
{options.length === 0 ? (
(null);
const [advancedOpen, setAdvancedOpen] = useState(false);
- const advancedVisible = readOnly || advancedOpen;
const [updatingProviderDrivers, setUpdatingProviderDrivers] = useState<
ReadonlySet
>(() => new Set());
@@ -817,16 +819,56 @@ export function EnvironmentProviderSettings({
setIsAddInstanceDialogOpen(true)}
- >
-
- Add provider
-
- ) : null
+
+ {/*
+ The 11px size must sit on this flex item, not just the span
+ inside: the item's line box is struck from its own font size,
+ and an inherited 16px strut hangs the smaller text below the
+ vertical center of the row.
+ */}
+
+
+
+ {!readOnly ? (
+ <>
+
+ void refreshProviders()}
+ aria-label="Refresh provider status"
+ >
+ {isRefreshingProviders ? (
+
+ ) : (
+
+ )}
+
+ }
+ />
+ Refresh provider status
+
+
+ setIsAddInstanceDialogOpen(true)}
+ aria-label="Add provider"
+ >
+
+
+ }
+ />
+ Add provider
+
+
+ ) : null}
+
-
+
-
- Provider
- On
-
-
- {rows.map((row) => renderProviderInstance(row, "list"))}
-
-
0 && "border-t border-border/60",
- )}
- >
-
- {!readOnly ? (
-
- void refreshProviders()}
- aria-label="Refresh provider status"
- >
- {isRefreshingProviders ? (
-
- ) : (
-
- )}
-
- }
- />
- Refresh provider status
-
- ) : null}
-
+
+
+ {rows.map((row) => (
+
+ {renderProviderInstance(row, "list")}
+
+ ))}
+
@@ -887,23 +901,19 @@ export function EnvironmentProviderSettings({
-
-
-
-
- Advanced
-
-
+
+
+
+ Advanced
+
+
+
@@ -915,7 +925,7 @@ export function EnvironmentProviderSettings({
}
- description="Set this to 0 seconds to use manual refresh only."
+ description="Refresh availability, versions, auth state, and models in the background. 0 seconds turns background checks off."
resetAction={
providerHealthRefreshIntervalSeconds !==
defaultProviderHealthRefreshIntervalSeconds ? (
@@ -965,9 +975,9 @@ export function EnvironmentProviderSettings({
}
/>
-
-
-
+
+
+