opencode-island 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-island",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A macOS Dynamic Island for OpenCode: live status of every session and agent on your machine, plus permission prompts you can answer without leaving your work.",
   "keywords": [
     "opencode",

package/src/gui.tsx

@@ -32,6 +32,9 @@ export default Plugin.define({
       },
       onBlur: () => {
         if (!open) return
+        // An island that is asking for an answer stays up: the window never
+        // has focus, so the app taking focus back would close it mid-question.
+        if (state.sessions.some((session) => session.permission)) return
         open = false
         island.send(message())
       },

package/src/island/app/components/island.tsx

@@ -16,13 +16,19 @@ import {
 import type { IslandMessage, PermissionDecision, SessionView } from "../../../state"
 import { Button } from "@/components/ui/button"
 import { Toggle } from "@/components/ui/toggle"
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import { cn } from "@/lib/utils"
 
 const EMPTY: IslandMessage = { sessions: [], working: 0, waiting: 0, open: false }
 
 type Theme = "light" | "dark" | "system"
 
+/** The appearance button cycles through the three, one click each. */
+const THEMES: Theme[] = ["light", "dark", "system"]
+
+function nextTheme(theme: Theme): Theme {
+  return THEMES[(THEMES.indexOf(theme) + 1) % THEMES.length]
+}
+
 function elapsed(ms: number) {
   if (!ms || ms < 0) return ""
   const seconds = Math.floor(ms / 1000)
@@ -357,26 +363,22 @@ export function Island() {
           ) : null}
 
           <div className="flex items-center gap-1 border-t px-2 py-1.5">
-            <ToggleGroup
-              type="single"
-              size="sm"
+            <Button
               variant="outline"
-              value={theme}
-              onValueChange={(value) => {
-                if (value) setTheme(value as Theme)
-              }}
-              aria-label="Theme"
+              size="icon-sm"
+              onClick={() => setTheme(nextTheme(theme))}
+              aria-label={`Appearance: ${theme}. Click for ${nextTheme(theme)}.`}
+              title={`Appearance: ${theme}`}
+              className={cn(alert && "border-warning-foreground/30 bg-transparent hover:bg-warning-foreground/10")}
             >
-              <ToggleGroupItem value="light" aria-label="Light" title="Light">
+              {theme === "light" ? (
                 <Sun weight="duotone" />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="dark" aria-label="Dark" title="Dark">
+              ) : theme === "dark" ? (
                 <Moon weight="duotone" />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="system" aria-label="System" title="System">
+              ) : (
                 <Monitor weight="duotone" />
-              </ToggleGroupItem>
-            </ToggleGroup>
+              )}
+            </Button>
 
             <span className="flex-1" />
 
@@ -387,6 +389,7 @@ export function Island() {
               onPressedChange={setClickThrough}
               aria-label="Click through"
               title="Click through"
+              className={cn(alert && "border-warning-foreground/30 bg-transparent hover:bg-warning-foreground/10")}
             >
               <CursorClick weight="duotone" />
             </Toggle>
@@ -397,6 +400,7 @@ export function Island() {
               onPressedChange={setShowLatest}
               aria-label="Show latest work"
               title="Show latest work"
+              className={cn(alert && "border-warning-foreground/30 bg-transparent hover:bg-warning-foreground/10")}
             >
               <ListDashes weight="duotone" />
             </Toggle>

package/src/island/app/components/ui/toggle-group.tsx

@@ -1,83 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
-
-import { toggleVariants } from "@/components/ui/toggle"
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }
->({
-  size: "default",
-  variant: "default",
-  spacing: 0,
-})
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  spacing = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      style={{ "--gap": spacing } as React.CSSProperties}
-      className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
-        className
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  )
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
-}
-
-export { ToggleGroup, ToggleGroupItem }