@opencode-ai/ui 0.0.0-dev-19004 → 0.0.0-dev-19005

package/dist/actions/button/button.d.ts

@@ -4,7 +4,7 @@ import { type IconProps } from "@opencode-ai/ui/icon";
 import "./button.css";
 export interface ButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
     size?: "small" | "normal" | "large";
-    variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading";
+    variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "ghost-faint" | "loading";
     icon?: IconProps["name"];
 }
 export declare function Button(props: ButtonProps): import("solid-js").JSX.Element;

package/dist/i18n/en.d.ts

@@ -64,6 +64,8 @@ declare const source: {
     "ui.sessionTurn.retry.inSeconds": string;
     "ui.sessionTurn.retry.attempt": string;
     "ui.sessionTurn.retry.attemptLine": string;
+    "ui.sessionTurn.retry.attemptLabel": string;
+    "ui.sessionTurn.retry.attemptRetrying": string;
     "ui.sessionTurn.retry.geminiHot": string;
     "ui.sessionTurn.error.freeUsageExceeded": string;
     "ui.sessionTurn.error.addCredits": string;
@@ -132,6 +134,7 @@ declare const source: {
     "ui.promptInput.chooseVariant": string;
     "ui.promptInput.send": string;
     "ui.promptInput.stop": string;
+    "ui.promptInput.exitShell": string;
     "ui.promptInput.steer": string;
     "ui.promptInput.queue": string;
     "ui.promptInput.steerHint": string;
@@ -204,6 +207,7 @@ declare const source: {
     "ui.message.interrupted": string;
     "ui.sessionTimeline.notice.model": string;
     "ui.sessionTimeline.notice.modelSwitched": string;
+    "ui.sessionTimeline.notice.agentChanged": string;
     "ui.sessionTimeline.notice.movedTo": string;
     "ui.sessionTimeline.notice.movedTooltip": string;
     "ui.sessionTimeline.notice.failed": string;

package/dist/icons/icon/icon.d.ts

@@ -150,6 +150,14 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "outline-arrow-to-corner-top-right": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-hexagonal-warning": {
+        viewBox: string;
+        body: string;
+    };
     "outline-share": {
         viewBox: string;
         body: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-19004",
+  "version": "0.0.0-dev-19005",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/actions/button/button.css

@@ -260,3 +260,32 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* Ghost faint */
+[data-component="button-v2"][data-variant="ghost-faint"] {
+  background-color: transparent;
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"] [data-slot="icon-svg"] {
+  color: var(--v2-icon-icon-faint);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"]:is(:hover, [data-state="hover"]):not(:disabled):not(
+    [data-expanded]
+  ) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/actions/button/button.tsx

@@ -7,7 +7,16 @@ export interface ButtonProps
   extends ComponentProps<typeof Root>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
+  variant?:
+    | "neutral"
+    | "danger"
+    | "warning"
+    | "outline"
+    | "contrast"
+    | "ghost"
+    | "ghost-muted"
+    | "ghost-faint"
+    | "loading"
   icon?: IconProps["name"]
 }
 

package/src/forms/text-input/text-input.css

@@ -13,7 +13,7 @@
   outline: 1px solid transparent;
   outline-offset: 0;
   background:
-    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+    linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
   box-shadow: var(--v2-elevation-button-neutral);
   flex: none;
   align-self: stretch;
@@ -30,7 +30,7 @@
 [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
   background:
     linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+    linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
 }
 
 [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {

package/src/i18n/en.ts

@@ -69,6 +69,8 @@ const source = {
   "ui.sessionTurn.retry.inSeconds": "in {{seconds}}s",
   "ui.sessionTurn.retry.attempt": "attempt #{{attempt}}",
   "ui.sessionTurn.retry.attemptLine": "{{line}} - attempt #{{attempt}}",
+  "ui.sessionTurn.retry.attemptLabel": "Attempt {{attempt}}",
+  "ui.sessionTurn.retry.attemptRetrying": "Attempt {{attempt}} - {{line}}",
   "ui.sessionTurn.retry.geminiHot": "gemini is way too hot right now",
   "ui.sessionTurn.error.freeUsageExceeded": "Free usage exceeded",
   "ui.sessionTurn.error.addCredits": "Add credits",
@@ -146,6 +148,7 @@ const source = {
   "ui.promptInput.chooseVariant": "Choose model variant",
   "ui.promptInput.send": "Send",
   "ui.promptInput.stop": "Stop",
+  "ui.promptInput.exitShell": "Exit",
   "ui.promptInput.steer": "Steer",
   "ui.promptInput.queue": "Queue",
   "ui.promptInput.steerHint": "Send without interrupting",
@@ -227,6 +230,7 @@ const source = {
   "ui.message.interrupted": "Interrupted",
   "ui.sessionTimeline.notice.model": "Model",
   "ui.sessionTimeline.notice.modelSwitched": "Switched to {{model}}",
+  "ui.sessionTimeline.notice.agentChanged": "Agent changed",
   "ui.sessionTimeline.notice.movedTo": "Moved to",
   "ui.sessionTimeline.notice.movedTooltip": "Session working directory changed",
   "ui.sessionTimeline.notice.failed": "{{actor}} failed",

package/src/icons/icon/icon.tsx

@@ -152,6 +152,14 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M13.5555 6.66656V2.44434H9.33326M13.5555 2.44434L7.99993 7.99989M13.5555 9.33324V13.5555C13.5555 13.5555 12.7599 13.5555 11.7777 13.5555H2.44438C2.44438 13.5555 2.44438 12.7599 2.44438 11.7777V4.22213C2.44438 3.2399 2.44434 2.44435 2.44434 2.44435H6.66661" stroke="currentColor"/>`,
   },
+  "outline-arrow-to-corner-top-right": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M2 8.5V2H14V14H8M5 5.66667H10.3333V11M3.66797 12.333L9.94292 6.05806" stroke="currentColor" stroke-linecap="square"/>`,
+  },
+  "outline-hexagonal-warning": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M10.6667 1.33325H5.33272L1.33334 5.33325L1.33342 10.6917L5.3327 14.691L10.6667 14.6909L14.6911 10.6917V5.33255L10.6667 1.33325Z" stroke="currentColor"/><path d="M8 10.6667H8.00667" stroke="currentColor" stroke-linecap="square"/><path d="M8 7.99992V5.33325" stroke="currentColor" stroke-linecap="square"/>`,
+  },
   "outline-share": {
     viewBox: "0 0 16 16",
     body: `<path d="M13.5554 10.4445V13.5556C13.5554 13.5556 12.7599 13.5556 11.7777 13.5556H4.22211C3.23989 13.5556 2.44434 13.5556 2.44434 13.5556V10.4445M4.88878 5.55557L7.99989 2.44446L11.111 5.55557M7.99989 2.44446L7.99989 9.11112" stroke="currentColor"/>`,
@@ -187,10 +195,18 @@ function getIcon(name: IconName) {
   return { body, viewBox: additionalIconViewBox(name as keyof typeof additionalIcons) }
 }
 
+function spriteContent() {
+  return Array.from(new Set<IconName>([...Object.keys(additionalIcons), ...Object.keys(icons)] as IconName[]))
+    .map((name) => `<symbol id="${symbol(name)}" viewBox="${getIcon(name).viewBox}">${getIcon(name).body}</symbol>`)
+    .join("")
+}
+
 function ensureSprite() {
   if (spriteInserted) return
   if (typeof document === "undefined") return
-  if (document.getElementById(spriteID)) {
+  const existing = document.getElementById(spriteID)
+  if (existing) {
+    existing.innerHTML = spriteContent()
     spriteInserted = true
     return
   }
@@ -202,9 +218,7 @@ function ensureSprite() {
   svg.setAttribute("height", "0")
   svg.style.position = "absolute"
   svg.style.overflow = "hidden"
-  svg.innerHTML = Array.from(new Set<IconName>([...Object.keys(additionalIcons), ...Object.keys(icons)] as IconName[]))
-    .map((name) => `<symbol id="${symbol(name)}" viewBox="${getIcon(name).viewBox}">${getIcon(name).body}</symbol>`)
-    .join("")
+  svg.innerHTML = spriteContent()
   document.body.insertBefore(svg, document.body.firstChild)
   spriteInserted = true
 }