Verbose logging support

packages/repl/src/App.tsx

@@ -16,7 +16,9 @@ export function App() {
   const [updating, setUpdating] = createSignal(true)
   const [showSettings, setShowSettings] = createSignal(false)
   const [settingsTab, setSettingsTab] = createSignal<SettingsTab>('accounts')
+
   const [isResizing, setIsResizing] = createSignal(false)
+  const [sizes, setSizes] = createSignal([0.5, 0.5])
 
   let workerIframe!: HTMLIFrameElement
 
@@ -61,12 +63,19 @@ export function App() {
             />
           )}
         >
-          <Resizable orientation="horizontal" class="size-full max-h-[calc(100vh-57px)]">
+          <Resizable sizes={sizes()} onSizesChange={e => setSizes(e)} orientation="horizontal" class="size-full max-h-[calc(100vh-57px)]">
             <ResizablePanel class="h-full overflow-x-auto overflow-y-hidden" minSize={0.2}>
               <EditorTabs />
               <Editor class="size-full" />
             </ResizablePanel>
-            <ResizableHandle withHandle onMouseDown={() => setIsResizing(true)} onMouseUp={() => setIsResizing(false)} />
+            <ResizableHandle
+              withHandle
+              onDblClick={() => {
+                setSizes([0.5, 0.5])
+              }}
+              onMouseDown={() => setIsResizing(true)}
+              onMouseUp={() => setIsResizing(false)}
+            />
             <ResizablePanel
               class="flex max-h-full flex-col overflow-hidden"
               minSize={0.2}

packages/repl/src/components/runner/Runner.tsx

@@ -24,6 +24,10 @@ const $enableUpdates = persistentAtom('repl:enableUpdates', true, {
   encode: String,
   decode: value => value === 'true',
 })
+const $enableVerbose = persistentAtom('repl:verboseLogs', true, {
+  encode: String,
+  decode: value => value === 'true',
+})
 
 export function Runner(props: { isResizing: boolean }) {
   const [devtoolsIframe, setDevtoolsIframe] = createSignal<HTMLIFrameElement | undefined>()
@@ -35,6 +39,7 @@ export function Runner(props: { isResizing: boolean }) {
   const currentAccountId = useStore($activeAccountId)
   const disconnectAfterSecs = useStore($disconnectAfterSecs)
   const enableUpdates = useStore($enableUpdates)
+  const enableVerbose = useStore($enableVerbose)
 
   let currentScriptId: string | undefined
   let deadTimer: timers.Timer | undefined
@@ -74,6 +79,7 @@ export function Runner(props: { isResizing: boolean }) {
         event: 'INIT',
         accountId: currentAccountId(),
         logUpdates: enableUpdates(),
+        verboseLogs: enableVerbose(),
       }, '*')
       setRunnerLoaded(true)
       deadTimer = timers.setTimeout(() => {
@@ -203,6 +209,15 @@ export function Runner(props: { isResizing: boolean }) {
     }, '*')
   }
 
+  function handleToggleVerbose() {
+    const newValue = !enableVerbose()
+    $enableVerbose.set(newValue)
+    runnerIframe()?.contentWindow?.postMessage({
+      event: 'TOGGLE_VERBOSE',
+      value: newValue,
+    }, '*')
+  }
+
   return (
     <>
       <div class="flex shrink-0 flex-row p-1">
@@ -287,6 +302,13 @@ export function Runner(props: { isResizing: boolean }) {
                 />
                 Log updates
               </DropdownMenuItem>
+              <DropdownMenuItem class="text-xs" onClick={handleToggleVerbose}>
+                <Dynamic
+                  component={enableVerbose() ? LucideCheckSquare : LucideSquare}
+                  class="mr-2 size-3"
+                />
+                Verbose logs
+              </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuGroup>
                 <DropdownMenuGroupLabel class="text-xs">

packages/worker/src/sw/iframe/script.ts

@@ -30,8 +30,9 @@ chobitsu.setOnMessage((message: string) => {
 let lastAccountId: string | undefined
 let lastConnectionState: ConnectionState | undefined
 let logUpdates = false
+let verboseLogs = false
 
-function initClient(accountId: string) {
+function initClient(accountId: string, verbose: boolean) {
   lastAccountId = accountId
 
   let extraConfig: Partial<TelegramClientOptions> | undefined
@@ -53,6 +54,7 @@ function initClient(accountId: string) {
     apiId: import.meta.env.VITE_API_ID,
     apiHash: import.meta.env.VITE_API_HASH,
     storage: `mtcute:${accountId}`,
+    logLevel: verbose ? 5 : 2,
     ...extraConfig,
   })
   window.tg.onConnectionState.add((state) => {
@@ -86,7 +88,7 @@ window.addEventListener('message', ({ data }) => {
     sendToChobitsu({ method: 'DOMStorage.enable' })
     sendToDevtools({ method: 'DOM.documentUpdated' })
 
-    initClient(data.accountId)
+    initClient(data.accountId, data.verboseLogs)
     logUpdates = data.logUpdates
 
     if (window.tg !== undefined) {
@@ -118,7 +120,7 @@ window.addEventListener('message', ({ data }) => {
     chobitsu.sendRawMessage(data.value)
   } else if (data.event === 'ACCOUNT_CHANGED') {
     window.tg?.close()
-    initClient(data.accountId)
+    initClient(data.accountId, data.verboseLogs)
 
     if (lastConnectionState !== 'offline') {
       window.parent.postMessage({ event: 'CONNECTION_STATE', value: 'offline' }, HOST_ORIGIN)
@@ -129,7 +131,7 @@ window.addEventListener('message', ({ data }) => {
     // todo: we dont have a clean way to disconnect i think
     window.tg?.close()
     if (lastAccountId) {
-      initClient(lastAccountId)
+      initClient(lastAccountId, data.verboseLogs)
     }
     window.parent.postMessage({ event: 'CONNECTION_STATE', value: 'offline' }, HOST_ORIGIN)
   } else if (data.event === 'RECONNECT') {
@@ -139,6 +141,10 @@ window.addEventListener('message', ({ data }) => {
   } else if (data.event === 'TOGGLE_UPDATES') {
     if (data.value === logUpdates) return
     logUpdates = data.value
+  } else if (data.event === 'TOGGLE_VERBOSE') {
+    if (data.value === verboseLogs) return
+    verboseLogs = data.value;
+    (window.tg.log as any).level = verboseLogs ? 5 : 2
   }
 })