chore: format code

packages/opencode/webgui/src/components/CompactHeader.tsx

@@ -254,8 +254,9 @@ const CompactHeader = forwardRef<
         <div className="flex items-center gap-1.5" ref={dropdownRef}>
           <button
             onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-            className={`flex items-center gap-1 text-sm hover:text-gray-900 dark:hover:text-gray-100 ${currentHasDefaultTitle ? "text-gray-500 dark:text-gray-500 italic" : "text-gray-700 dark:text-gray-300"
-              }`}
+            className={`flex items-center gap-1 text-sm hover:text-gray-900 dark:hover:text-gray-100 ${
+              currentHasDefaultTitle ? "text-gray-500 dark:text-gray-500 italic" : "text-gray-700 dark:text-gray-300"
+            }`}
             title={currentTitle}
           >
             <span>{currentSession ? truncatedTitle : "No Session"}</span>
@@ -348,10 +349,11 @@ const CompactHeader = forwardRef<
                   />
                   <button
                     onClick={() => setIsSelectMode(!isSelectMode)}
-                    className={`px-2 h-[30px] flex items-center justify-center rounded border ${isSelectMode
-                      ? "bg-blue-500 text-white border-blue-500"
-                      : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600"
-                      }`}
+                    className={`px-2 h-[30px] flex items-center justify-center rounded border ${
+                      isSelectMode
+                        ? "bg-blue-500 text-white border-blue-500"
+                        : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600"
+                    }`}
                     title={isSelectMode ? "Cancel selection" : "Select multiple sessions"}
                   >
                     {isSelectMode ? (
@@ -390,12 +392,13 @@ const CompactHeader = forwardRef<
                         key={session.id}
                         ref={index === selectedSessionIndex ? selectedSessionRef : null}
                         tabIndex={-1}
-                        className={`group px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center justify-between outline-none ${index === selectedSessionIndex && !isSelectMode
-                          ? "bg-blue-50 dark:bg-blue-950"
-                          : isActive
+                        className={`group px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center justify-between outline-none ${
+                          index === selectedSessionIndex && !isSelectMode
                             ? "bg-blue-50 dark:bg-blue-950"
-                            : ""
-                          }`}
+                            : isActive
+                              ? "bg-blue-50 dark:bg-blue-950"
+                              : ""
+                        }`}
                         onClick={() => !isEditing && !isSelectMode && handleSessionSelect(session.id)}
                         onKeyDown={handleKeyDown}
                       >
@@ -444,12 +447,13 @@ const CompactHeader = forwardRef<
                                 </svg>
                               )}
                               <span
-                                className={`truncate ${hasDefaultTitle
-                                  ? "text-gray-500 dark:text-gray-500 italic"
-                                  : isActive && !isSelectMode
-                                    ? "text-blue-900 dark:text-blue-100 font-medium"
-                                    : "text-gray-700 dark:text-gray-300"
-                                  }`}
+                                className={`truncate ${
+                                  hasDefaultTitle
+                                    ? "text-gray-500 dark:text-gray-500 italic"
+                                    : isActive && !isSelectMode
+                                      ? "text-blue-900 dark:text-blue-100 font-medium"
+                                      : "text-gray-700 dark:text-gray-300"
+                                }`}
                               >
                                 {displayTitle}
                               </span>
@@ -525,8 +529,9 @@ const CompactHeader = forwardRef<
         <div className="flex items-center gap-1">
           {/* Connection status dot */}
           <div
-            className={`w-2 h-2 rounded-full ${CONNECTION_COLORS[connectionState]} ${connectionState === "connecting" || connectionState === "error" ? "animate-pulse" : ""
-              }`}
+            className={`w-2 h-2 rounded-full ${CONNECTION_COLORS[connectionState]} ${
+              connectionState === "connecting" || connectionState === "error" ? "animate-pulse" : ""
+            }`}
             title={CONNECTION_TOOLTIPS[connectionState]}
           />
 

packages/opencode/webgui/src/components/ConfirmModal.tsx

@@ -57,7 +57,10 @@ export function ConfirmModal({
   const styles = variantStyles[variant]
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all" onClick={onClose}>
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all"
+      onClick={onClose}
+    >
       <div
         className="modern-card max-w-md w-full mx-4 overflow-hidden transform transition-all scale-100"
         onClick={(e) => e.stopPropagation()}
@@ -74,18 +77,10 @@ export function ConfirmModal({
 
         {/* Footer */}
         <div className="px-4 py-3 bg-gray-50 dark:bg-gray-950/50 border-t border-gray-200 dark:border-gray-800 flex justify-end gap-2">
-          <button
-            onClick={onClose}
-            disabled={isLoading}
-            className="modern-button modern-button-secondary"
-          >
+          <button onClick={onClose} disabled={isLoading} className="modern-button modern-button-secondary">
             {cancelText}
           </button>
-          <button
-            onClick={onConfirm}
-            disabled={isLoading}
-            className={`modern-button ${styles.button}`}
-          >
+          <button onClick={onConfirm} disabled={isLoading} className={`modern-button ${styles.button}`}>
             {isLoading ? "Processing..." : confirmText}
           </button>
         </div>

packages/opencode/webgui/src/components/KeyboardShortcutsHelp.tsx

@@ -27,11 +27,7 @@ export function KeyboardShortcutsHelp({ isOpen, onClose }: KeyboardShortcutsHelp
           <h2 id="shortcuts-help-title" className="text-xl font-semibold text-gray-900 dark:text-gray-100">
             Keyboard Shortcuts
           </h2>
-          <button
-            onClick={onClose}
-            className="modern-icon-button"
-            aria-label="Close"
-          >
+          <button onClick={onClose} className="modern-icon-button" aria-label="Close">
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>

packages/opencode/webgui/src/components/MessageInput.tsx

@@ -89,16 +89,16 @@ function insertPlainWithMentionsImpl(
       const md: any = isDir
         ? { type: "directory" as const, display: token, path: token.endsWith("/") ? token : token + "/" }
         : (() => {
-          const relBase = parsed.path
-          const display = parsed.range ? `${relBase}:${parsed.range.start}-${parsed.range.end}` : relBase
-          const base: any = { type: "file" as const, display, path: relBase }
-          if (parsed.range)
-            base.range = {
-              start: { line: parsed.range.start, character: 0 },
-              end: { line: parsed.range.end, character: 0 },
-            }
-          return base
-        })()
+            const relBase = parsed.path
+            const display = parsed.range ? `${relBase}:${parsed.range.start}-${parsed.range.end}` : relBase
+            const base: any = { type: "file" as const, display, path: relBase }
+            if (parsed.range)
+              base.range = {
+                start: { line: parsed.range.start, character: 0 },
+                end: { line: parsed.range.end, character: 0 },
+              }
+            return base
+          })()
       nodes.push($createMentionNode(md))
       last = end
     }
@@ -465,26 +465,26 @@ const MessageInputInner = forwardRef<
             source:
               mention.type === "symbol"
                 ? {
-                  type: "symbol",
-                  text: {
-                    value: mention.display,
-                    start: mention.start,
-                    end: mention.end,
-                  },
-                  path: absolutePath,
-                  name: mention.metadata.name,
-                  range: mention.metadata.range,
-                  kind: mention.metadata.kind,
-                }
+                    type: "symbol",
+                    text: {
+                      value: mention.display,
+                      start: mention.start,
+                      end: mention.end,
+                    },
+                    path: absolutePath,
+                    name: mention.metadata.name,
+                    range: mention.metadata.range,
+                    kind: mention.metadata.kind,
+                  }
                 : {
-                  type: "file",
-                  text: {
-                    value: mention.display,
-                    start: mention.start,
-                    end: mention.end,
+                    type: "file",
+                    text: {
+                      value: mention.display,
+                      start: mention.start,
+                      end: mention.end,
+                    },
+                    path: absolutePath,
                   },
-                  path: absolutePath,
-                },
           })
         } else if (mention.type === "agent") {
           parts.push({
@@ -591,9 +591,9 @@ const MessageInputInner = forwardRef<
       if (response.error) {
         const errorMsg =
           "data" in response.error &&
-            response.error.data &&
-            typeof response.error.data === "object" &&
-            "message" in response.error.data
+          response.error.data &&
+          typeof response.error.data === "object" &&
+          "message" in response.error.data
             ? String(response.error.data.message)
             : "Failed to send message"
         throw new Error(errorMsg)
@@ -1006,10 +1006,7 @@ const MessageInputInner = forwardRef<
       <footer className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 flex-shrink-0">
         {/* Input area */}
         <div className="px-2 pt-1.5 pb-1">
-          <div
-            ref={containerRef}
-            className="relative modern-input bg-white dark:bg-gray-900"
-          >
+          <div ref={containerRef} className="relative modern-input bg-white dark:bg-gray-900">
             <RichTextPlugin
               contentEditable={
                 // @ts-expect-error React 19 type compatibility

packages/opencode/webgui/src/components/ModelSelector.tsx

@@ -166,10 +166,11 @@ export function ModelSelector({ selectedProviderId, selectedModelId, onSelect, d
                         <button
                           key={`${item.provider_id}:${item.model_id}:${item.last_used}`}
                           onClick={() => handleSelect(item.provider_id, item.model_id)}
-                          className={`w-full px-3 py-2 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between ${isSelected
+                          className={`w-full px-3 py-2 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between ${
+                            isSelected
                               ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
                               : "text-gray-900 dark:text-gray-100"
-                            }`}
+                          }`}
                         >
                           <div className="flex items-center gap-2 flex-1 min-w-0">
                             <span className="font-medium truncate">{item.model_id}</span>
@@ -213,10 +214,11 @@ export function ModelSelector({ selectedProviderId, selectedModelId, onSelect, d
                           <button
                             key={modelId}
                             onClick={() => handleSelect(provider.id, modelId)}
-                            className={`w-full px-3 py-2 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between ${isSelected
+                            className={`w-full px-3 py-2 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between ${
+                              isSelected
                                 ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
                                 : "text-gray-900 dark:text-gray-100"
-                              }`}
+                            }`}
                           >
                             <div className="flex items-center gap-2 flex-1 min-w-0">
                               <span className="font-medium truncate">{model.name}</span>

packages/opencode/webgui/src/components/SettingsPanel.tsx

@@ -192,11 +192,7 @@ export function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
           {/* Header */}
           <div className="px-3 py-2 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
             <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Settings</h2>
-            <button
-              onClick={handleClose}
-              className="modern-icon-button"
-              title="Close"
-            >
+            <button onClick={handleClose} className="modern-icon-button" title="Close">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
@@ -210,10 +206,11 @@ export function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
                 <button
                   key={tab.id}
                   onClick={() => setActiveTab(tab.id)}
-                  className={`px-3 py-1.5 text-sm font-medium border-b-2 transition-colors ${activeTab === tab.id
-                    ? "border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500"
-                    : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
-                    }`}
+                  className={`px-3 py-1.5 text-sm font-medium border-b-2 transition-colors ${
+                    activeTab === tab.id
+                      ? "border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500"
+                      : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
+                  }`}
                 >
                   <span className="mr-1.5">{tab.icon}</span>
                   {tab.label}
@@ -268,11 +265,7 @@ export function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
               {successMessage && <span className="text-sm text-green-600 dark:text-green-400">{successMessage}</span>}
             </div>
             <div className="flex gap-2">
-              <button
-                onClick={handleClose}
-                disabled={isSaving}
-                className="modern-button modern-button-secondary"
-              >
+              <button onClick={handleClose} disabled={isSaving} className="modern-button modern-button-secondary">
                 Cancel
               </button>
               <button

packages/opencode/webgui/src/components/settings/ApiKeysTab.tsx

@@ -328,17 +328,20 @@ export function ApiKeysTab({
             return (
               <div
                 key={provider.id}
-                className={`border transition-all duration-200 rounded-lg overflow-hidden ${isExpanded
+                className={`border transition-all duration-200 rounded-lg overflow-hidden ${
+                  isExpanded
                     ? "border-blue-200 dark:border-blue-900 bg-blue-50/30 dark:bg-blue-900/10 ring-1 ring-blue-500/20"
                     : "border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700"
-                  }`}
+                }`}
               >
                 <div
                   className="flex items-center justify-between px-3 py-2.5 cursor-pointer select-none"
                   onClick={() => setExpandedProvider(isExpanded ? null : provider.id)}
                 >
                   <div className="flex items-center gap-3">
-                    <div className={`w-2 h-2 rounded-full ${isConnected ? "bg-green-500" : "bg-gray-300 dark:bg-gray-600"}`} />
+                    <div
+                      className={`w-2 h-2 rounded-full ${isConnected ? "bg-green-500" : "bg-gray-300 dark:bg-gray-600"}`}
+                    />
                     <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{provider.name}</span>
                     {isTemporary && (
                       <span className="text-[10px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300 px-1.5 py-0.5 rounded-full">
@@ -460,7 +463,9 @@ export function ApiKeysTab({
                                 className="w-full pl-3 pr-8 py-1.5 border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-xs shadow-sm"
                               />
                               <button
-                                onClick={() => setShowApiKeys({ ...showApiKeys, [provider.id]: !showApiKeys[provider.id] })}
+                                onClick={() =>
+                                  setShowApiKeys({ ...showApiKeys, [provider.id]: !showApiKeys[provider.id] })
+                                }
                                 className="absolute right-1 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded"
                                 title={showApiKeys[provider.id] ? "Hide" : "Show"}
                               >

packages/opencode/webgui/src/index.css

@@ -88,4 +88,4 @@ body {
 
 .modern-icon-button {
   @apply p-1.5 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200;
-}
+}