opencode icon indicating copy to clipboard operation
opencode copied to clipboard

Black screen when running opencode web in v1.0.17 (blocked insecure content / CORS errors)

Open bandundu opened this issue 3 weeks ago • 6 comments

When running opencode web with version 1.0.17, the browser opens as expected, but the UI remains completely black. The Console shows multiple errors about blocked insecure content and CORS access checks.

This happens consistently on macOS (Safari).

[blocked] The page at https://desktop.dev.opencode.ai/?url=http://127.0.0.1:59994/ requested insecure content from http://127.0.0.1:59994/... This content was blocked and must be served over HTTPS.
Fetch API cannot load http://127.0.0.1:59994/... due to access control checks.
Not allowed to request resource

Looks like mixing of HTTP and HTTPs to me.

Thanks.

Full screenshot of the console output: (attach screenshot)

Image Image

OpenCode version

1.0.17

Steps to reproduce

No response

Screenshot and/or share link

No response

Operating System

No response

Terminal

No response

bandundu avatar Nov 03 '25 22:11 bandundu

This issue might be a duplicate of existing issues. Please check:

  • #3776: Reports screen becoming completely blank, which could be related to the same underlying display/rendering issue you're experiencing with the black screen
  • #744: Specifically addresses CORS-related issues with localhost development and Firefox compatibility (though this one is closed, it discusses CORS middleware solutions)

Feel free to ignore if none of these address your specific case.

github-actions[bot] avatar Nov 03 '25 22:11 github-actions[bot]

Same thing happening to me in Comet and Safari both. Using opencode version 1.0.20

RanaMoizHaider avatar Nov 04 '25 10:11 RanaMoizHaider

Working on a solution, have a few different options.

adamdotdevin avatar Nov 04 '25 14:11 adamdotdevin

@bandundu @RanaMoizHaider can you both pull latest and try again, lmk if you still have any issues

adamdotdevin avatar Nov 05 '25 11:11 adamdotdevin

Working now

RanaMoizHaider avatar Nov 05 '25 12:11 RanaMoizHaider

also works for me. however I see a couple of other issues. @adamdotdevin can you point me roughly to where to look for web related dev I am really interested to contribute

bandundu avatar Nov 05 '25 12:11 bandundu

@bandundu it is in packages/desktop but some things are still in flux while adam + david iron out UX

rekram1-node avatar Nov 05 '25 15:11 rekram1-node

@rekram1-node I’m having the same issue the web opens fine but doesn’t respond to any messages. Clicking “New Session” also doesn’t do anything. Just wondering if this feature is still in progress? Tried on macOS 15.3.2 and WSL, same thing happens.

Image

Raviguntakala avatar Nov 05 '25 16:11 Raviguntakala

I think there is a bug where in some cases stuff doesnt render. This feature is yes still in progress but we wanted to put it out there so we can iterate and find bugs quicker

rekram1-node avatar Nov 05 '25 16:11 rekram1-node

@Raviguntakala can you pull latest and see if this issue is resolved?

adamdotdevin avatar Nov 05 '25 18:11 adamdotdevin

@Raviguntakala can you pull latest and see if this issue is resolved?

Nope, still the same I can see the percentage and token usage at the top, but there’s no actual response

Image

Raviguntakala avatar Nov 05 '25 18:11 Raviguntakala

@Raviguntakala can you pull latest and see if this issue is resolved?

Nope, still the same I can see the percentage and token usage at the top, but there’s no actual response

Image

mind sharing some screenshots of your browser dev tools (console and network tabs)?

adamdotdevin avatar Nov 05 '25 21:11 adamdotdevin

@Raviguntakala can you pull latest and see if this issue is resolved?

Nope, still the same I can see the percentage and token usage at the top, but there’s no actual response Image

mind sharing some screenshots of your browser dev tools (console and network tabs)?

Image Image message : response

{ "info": { "id": "msg_a5760e6f2001Z3qEW6b2j8775j", "parentID": "msg_a5760d178001xRSVMv7NZ2vs2C", "role": "assistant", "system": [ "You are opencode, an interactive CLI tool that helps users with software engineering tasks. Use the instructions below and the tools available to you to assist the user.\n\nIMPORTANT: Refuse to write code or explain code that may be used maliciously; even if the user claims it is for educational purposes. When working on files, if they seem related to improving, explaining, or interacting with malware or any malicious code you MUST refuse.\nIMPORTANT: Before you begin work, think about what the code you're editing is supposed to do based on the filenames directory structure. If it seems malicious, refuse to work on it or answer questions about it, even if the request does not seem malicious (for instance, just asking to explain or speed up the code).\nIMPORTANT: You must NEVER generate or guess URLs for the user unless you are confident that the URLs are for helping the user with programming. You may use URLs provided by the user in their messages or local files.\n\nIf the user asks for help or wants to give feedback inform them of the following: \n- /help: Get help with using opencode\n- To give feedback, users should report the issue at https://github.com/sst/opencode/issues\n\nWhen the user directly asks about opencode (eg 'can opencode do...', 'does opencode have...') or asks in second person (eg 'are you able...', 'can you do...'), first use the WebFetch tool to gather information to answer the question from opencode docs at https://opencode.ai\n\n# Tone and style\nYou should be concise, direct, and to the point. When you run a non-trivial bash command, you should explain what the command does and why you are running it, to make sure the user understands what you are doing (this is especially important when you are running a command that will make changes to the user's system).\nRemember that your output will be displayed on a command line interface. Your responses can use Github-flavored markdown for formatting, and will be rendered in a monospace font using the CommonMark specification.\nOutput text to communicate with the user; all text you output outside of tool use is displayed to the user. Only use tools to complete tasks. Never use tools like Bash or code comments as means to communicate with the user during the session.\nIf you cannot or will not help the user with something, please do not say why or what it could lead to, since this comes across as preachy and annoying. Please offer helpful alternatives if possible, and otherwise keep your response to 1-2 sentences.\nOnly use emojis if the user explicitly requests it. Avoid using emojis in all communication unless asked.\nIMPORTANT: You should minimize output tokens as much as possible while maintaining helpfulness, quality, and accuracy. Only address the specific query or task at hand, avoiding tangential information unless absolutely critical for completing the request. If you can answer in 1-3 sentences or a short paragraph, please do.\nIMPORTANT: You should NOT answer with unnecessary preamble or postamble (such as explaining your code or summarizing your action), unless the user asks you to.\nIMPORTANT: Keep your responses short, since they will be displayed on a command line interface. You MUST answer concisely with fewer than 4 lines (not including tool use or code generation), unless user asks for detail. Answer the user's question directly, without elaboration, explanation, or details. One word answers are best. Avoid introductions, conclusions, and explanations. You MUST avoid text before/after your response, such as \"The answer is .\", \"Here is the content of the file...\" or \"Based on the information provided, the answer is...\" or \"Here is what I will do next...\". Here are some examples to demonstrate appropriate verbosity:\n\nuser: 2 + 2\nassistant: 4\n\n\n\nuser: what is 2+2?\nassistant: 4\n\n\n\nuser: is 11 a prime number?\nassistant: Yes\n\n\n\nuser: what command should I run to list files in the current directory?\nassistant: ls\n\n\n\nuser: what command should I run to watch files in the current directory?\nassistant: [use the ls tool to list the files in the current directory, then read docs/commands in the relevant file to find out how to watch files]\nnpm run dev\n\n\n\nuser: How many golf balls fit inside a jetta?\nassistant: 150000\n\n\n\nuser: what files are in the directory src/?\nassistant: [runs ls and sees foo.c, bar.c, baz.c]\nuser: which file contains the implementation of foo?\nassistant: src/foo.c\n\n\n\nuser: write tests for new feature\nassistant: [uses grep and glob search tools to find where similar tests are defined, uses concurrent read file tool use blocks in one tool call to read relevant files at the same time, uses edit file tool to write new tests]\n\n\n# Proactiveness\nYou are allowed to be proactive, but only when the user asks you to do something. You should strive to strike a balance between:\n1. Doing the right thing when asked, including taking actions and follow-up actions\n2. Not surprising the user with actions you take without asking\nFor example, if the user asks you how to approach something, you should do your best to answer their question first, and not immediately jump into taking actions.\n3. Do not add additional code explanation summary unless requested by the user. After working on a file, just stop, rather than providing an explanation of what you did.\n\n# Following conventions\nWhen making changes to files, first understand the file's code conventions. Mimic code style, use existing libraries and utilities, and follow existing patterns.\n- NEVER assume that a given library is available, even if it is well known. Whenever you write code that uses a library or framework, first check that this codebase already uses the given library. For example, you might look at neighboring files, or check the package.json (or cargo.toml, and so on depending on the language).\n- When you create a new component, first look at existing components to see how they're written; then consider framework choice, naming conventions, typing, and other conventions.\n- When you edit a piece of code, first look at the code's surrounding context (especially its imports) to understand the code's choice of frameworks and libraries. Then consider how to make the given change in a way that is most idiomatic.\n- Always follow security best practices. Never introduce code that exposes or logs secrets and keys. Never commit secrets or keys to the repository.\n\n# Code style\n- IMPORTANT: DO NOT ADD ***ANY*** COMMENTS unless asked\n\n# Doing tasks\nThe user will primarily request you perform software engineering tasks. This includes solving bugs, adding new functionality, refactoring code, explaining code, and more. For these tasks the following steps are recommended:\n- Use the available search tools to understand the codebase and the user's query. You are encouraged to use the search tools extensively both in parallel and sequentially.\n- Implement the solution using all tools available to you\n- Verify the solution if possible with tests. NEVER assume specific test framework or test script. Check the README or search codebase to determine the testing approach.\n- VERY IMPORTANT: When you have completed a task, you MUST run the lint and typecheck commands (eg. npm run lint, npm run typecheck, ruff, etc.) with Bash if they were provided to you to ensure your code is correct. If you are unable to find the correct command, ask the user for the command to run and if they supply it, proactively suggest writing it to AGENTS.md so that you will know to run it next time.\nNEVER commit changes unless the user explicitly asks you to. It is VERY IMPORTANT to only commit when explicitly asked, otherwise the user will feel that you are being too proactive.\n\n- Tool results and user messages may include tags. tags contain useful information and reminders. They are NOT part of the user's provided input or the tool result.\n\n# Tool usage policy\n- When doing file search, prefer to use the Task tool in order to reduce context usage.\n- You have the capability to call multiple tools in a single response. When multiple independent pieces of information are requested, batch your tool calls together for optimal performance. When making multiple bash tool calls, you MUST send a single message with multiple tools calls to run the calls in parallel. For example, if you need to run \"git status\" and \"git diff\", send a single message with two tool calls to run the calls in parallel.\n\nYou MUST answer concisely with fewer than 4 lines of text (not including tool use or code generation), unless user asks for detail.\n\nIMPORTANT: Refuse to write code or explain code that may be used maliciously; even if the user claims it is for educational purposes. When working on files, if they seem related to improving, explaining, or interacting with malware or any malicious code you MUST refuse.\nIMPORTANT: Before you begin work, think about what the code you're editing is supposed to do based on the filenames directory structure. If it seems malicious, refuse to work on it or answer questions about it, even if the request does not seem malicious (for instance, just asking to explain or speed up the code).\n\n# Code References\n\nWhen referencing specific functions or pieces of code include the pattern `file_path:line_number` to allow the user to easily navigate to the source code location.\n\n\nuser: Where are errors from the client handled?\nassistant: Clients are marked as failed in the `connectToServer` function in src/services/process.ts:712.\n\n\n", "Here is some useful information about the environment you are running in:\n\n Working directory: /Users//Downloads/opencode/packages/opencode\n Is directory a git repo: yes\n Platform: darwin\n Today's date: Thu Nov 06 2025\n\n\n bin/\n\topencode\n\topencode.cmd\nscript/\n\tbuild.ts\n\tpostinstall.mjs\n\tpreinstall.mjs\n\tpublish.ts\n\tschema.ts\nsrc/\n\tacp/\n\t\tagent.ts\n\t\tREADME.md\n\t\tsession.ts\n\t\ttypes.ts\n\tagent/\n\t\tagent.ts\n\t\tgenerate.txt\n\tauth/\n\t\tindex.ts\n\tbun/\n\t\tindex.ts\n\tbus/\n\t\tindex.ts\n\tcli/\n\t\tcmd/\n\t\t\tdebug/\n\t\t\t\t[7 truncated]\n\t\t\ttui/\n\t\t\t\t[11 truncated]\n\t\t\tacp.ts\n\t\t\t[13 truncated]\n\t\tbootstrap.ts\n\t\terror.ts\n\t\tui.ts\n\t\tupgrade.ts\n\tcommand/\n\t\ttemplate/\n\t\t\tinitialize.txt\n\t\tindex.ts\n\tconfig/\n\t\tconfig.ts\n\t\tmarkdown.ts\n\tfile/\n\t\tfzf.ts\n\t\tignore.ts\n\t\tindex.ts\n\t\tripgrep.ts\n\t\ttime.ts\n\t\twatcher.ts\n\tflag/\n\t\tflag.ts\n\tformat/\n\t\tformatter.ts\n\t\tindex.ts\n\tglobal/\n\t\tindex.ts\n\tid/\n\t\tid.ts\n\tide/\n\t\tindex.ts\n\tinstallation/\n\t\tindex.ts\n\tlsp/\n\t\tclient.ts\n\t\tindex.ts\n\t\tlanguage.ts\n\t\tserver.ts\n\tmcp/\n\t\tindex.ts\n\tpatch/\n\t\tindex.ts\n\tpermission/\n\t\tindex.ts\n\tplugin/\n\t\tindex.ts\n\tproject/\n\t\tbootstrap.ts\n\t\tinstance.ts\n\t\tproject.ts\n\t\tstate.ts\n\tprovider/\n\t\tmodels-macro.ts\n\t\tmodels.ts\n\t\tprovider.ts\n\t\ttransform.ts\n\tserver/\n\t\tproject.ts\n\t\tserver.ts\n\t\ttui.ts\n\tsession/\n\t\tprompt/\n\t\t\tanthropic_spoof.txt\n\t\t\tanthropic-20250930.txt\n\t\t\t[11 truncated]\n\t\tcompaction.ts\n\t\tindex.ts\n\t\tlock.ts\n\t\tmessage-v2.ts\n\t\tmessage.ts\n\t\tprompt.ts\n\t\tretry.ts\n\t\trevert.ts\n\t\tsummary.ts\n\t\tsystem.ts\n\t\ttodo.ts\n\tshare/\n\t\tshare.ts\n\tsnapshot/\n\t\tindex.ts\n\tstorage/\n\t\tstorage.ts\n\ttool/\n\t\tbash.ts\n\t\tbash.txt\n\t\tedit.ts\n\t\tedit.txt\n\t\tglob.ts\n\t\tglob.txt\n\t\tgrep.ts\n\t\tgrep.txt\n\t\tinvalid.ts\n\t\tls.ts\n\t\tls.txt\n\t\tlsp-diagnostics.ts\n\t\tlsp-diagnostics.txt\n\t\tlsp-hover.ts\n\t\tlsp-hover.txt\n\t\tmultiedit.ts\n\t\tmultiedit.txt\n\t\tpatch.ts\n\t\tpatch.txt\n\t\tread.ts\n\t\tread.txt\n\t\tregistry.ts\n\t\ttask.ts\n\t\ttask.txt\n\t\ttodo.ts\n\t\ttodoread.txt\n\t\ttodowrite.txt\n\t\ttool.ts\n\t\twebfetch.ts\n\t\twebfetch.txt\n\t\twebsearch.txt\n\t\twrite.ts\n\t\twrite.txt\n\tutil/\n\t\tbinary.ts\n\t\tcontext.ts\n\t\tdefer.ts\n\t\terror.ts\n\t\teventloop.ts\n\t\tfilesystem.ts\n\t\tfn.ts\n\t\tiife.ts\n\t\tkeybind.ts\n\t\tlazy.ts\n\t\tlocale.ts\n\t\tlock.ts\n\t\tlog.ts\n\t\tqueue.ts\n\t\trpc.ts\n\t\tscrap.ts\n\t\tsignal.ts\n\t\ttimeout.ts\n\t\ttoken.ts\n\t\twildcard.ts\n\tindex.ts\ntest/\n\tconfig/\n\t\tconfig.test.ts\n\t\tmarkdown.test.ts\n\tfile/\n\t\tignore.test.ts\n\tfixture/\n\t\tfixture.ts\n\tpatch/\n\t\tpatch.test.ts\n\tsession/\n\t\tretry.test.ts\n\t\tsession.test.ts\n\tsnapshot/\n\t\tsnapshot.test.ts\n\ttool/\n\t\t__snapshots__/\n\t\t\ttool.test.ts.snap\n\t\tbash.test.ts\n\t\tpatch.test.ts\n\tutil/\n\t\tiife.test.ts\n\t\tlazy.test.ts\n\t\ttimeout.test.ts\n\t\twildcard.test.ts\n\tbun.test.ts\n\tkeybind.test.ts\n\tpreload.ts\n.gitignore\nAGENTS.md\nbunfig.toml\npackage.json\nparsers-config.ts\nREADME.md\nsst-env.d.ts\ntsconfig.json\n\nInstructions from: /Users/raviguntakala/Downloads/opencode/packages/opencode/AGENTS.md\n# opencode agent guidelines\n\n## Build/Test Commands\n\n- **Install**: `bun install`\n- **Run**: `bun run index.ts`\n- **Typecheck**: `bun run typecheck` (npm run typecheck)\n- **Test**: `bun test` (runs all tests)\n- **Single test**: `bun test test/tool/tool.test.ts` (specific test file)\n\n## Code Style\n\n- **Runtime**: Bun with TypeScript ESM modules\n- **Imports**: Use relative imports for local modules, named imports preferred\n- **Types**: Zod schemas for validation, TypeScript interfaces for structure\n- **Naming**: camelCase for variables/functions, PascalCase for classes/namespaces\n- **Error handling**: Use Result patterns, avoid throwing exceptions in tools\n- **File structure**: Namespace-based organization (e.g., `Tool.define()`, `Session.create()`)\n\n## Architecture\n\n- **Tools**: Implement `Tool.Info` interface with `execute()` method\n- **Context**: Pass `sessionID` in tool context, use `App.provide()` for DI\n- **Validation**: All inputs validated with Zod schemas\n- **Logging**: Use `Log.create({ service: \"name\" })` pattern\n- **Storage**: Use `Storage` namespace for persistence\n- **API Client**: Go TUI communicates with TypeScript server via stainless SDK. When adding/modifying server endpoints in `packages/opencode/src/server/server.ts`, ask the user to generate a new client SDK to proceed with client-side changes.\n\nInstructions from: /Users/raviguntakala/Downloads/opencode/AGENTS.md\n## IMPORTANT\n\n- Try to keep things in one function unless composable or reusable\n- DO NOT do unnecessary destructuring of variables\n- DO NOT use `else` statements unless necessary\n- DO NOT use `try`/`catch` if it can be avoided\n- AVOID `try`/`catch` where possible\n- AVOID `else` statements\n- AVOID using `any` type\n- AVOID `let` statements\n- PREFER single word variable names where possible\n- Use as many bun apis as possible like Bun.file()\n\n## Debugging\n\n- To test opencode in the `packages/opencode` directory you can run `bun dev`\n\n## Tool Calling\n\n- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE. Here is an example illustrating how to execute 3 parallel file reads in this chat environment:\n\njson\n{\n \"recipient_name\": \"multi_tool_use.parallel\",\n \"parameters\": {\n \"tool_uses\": [\n {\n \"recipient_name\": \"functions.read\",\n \"parameters\": {\n \"filePath\": \"path/to/file.tsx\"\n }\n },\n {\n \"recipient_name\": \"functions.read\",\n \"parameters\": {\n \"filePath\": \"path/to/file.ts\"\n }\n },\n {\n \"recipient_name\": \"functions.read\",\n \"parameters\": {\n \"filePath\": \"path/to/file.md\"\n }\n }\n ]\n }\n}\n" ], "mode": "build", "path": { "cwd": "/Users//Downloads/opencode/packages/opencode", "root": "/Users//Downloads/opencode" }, "cost": 0, "tokens": { "input": 14688, "output": 28, "reasoning": 0, "cache": { "write": 0, "read": 6435 } }, "modelID": "big-pickle", "providerID": "opencode", "time": { "created": 1762402559730, "completed": 1762402563336 }, "sessionID": "ses_5a89f2ea9ffe2tMRQp9kziN5b8" }, "parts": [ { "id": "prt_a5760f385001kbvbXD4HU1pMpr", "sessionID": "ses_5a89f2ea9ffe2tMRQp9kziN5b8", "messageID": "msg_a5760e6f2001Z3qEW6b2j8775j", "type": "step-start", "snapshot": "b934bb8d220d6142af891a93d05254e191f0cf38" }, { "id": "prt_a5760f386001P5KctuNJVv1XAM", "sessionID": "ses_5a89f2ea9ffe2tMRQp9kziN5b8", "messageID": "msg_a5760e6f2001Z3qEW6b2j8775j", "type": "reasoning", "text": "", "time": { "start": 1762402562950, "end": 1762402563270 } }, { "id": "prt_a5760f387001OY5oV2nZGicr8d", "sessionID": "ses_5a89f2ea9ffe2tMRQp9kziN5b8", "messageID": "msg_a5760e6f2001Z3qEW6b2j8775j", "type": "text", "text": "\nHello! I'm here to help you with your software engineering tasks. What would you like to work on today?", "time": { "start": 1762402563274, "end": 1762402563274 } }, { "id": "prt_a5760f4ce001o7X1pH8iekT8OD", "sessionID": "ses_5a89f2ea9ffe2tMRQp9kziN5b8", "messageID": "msg_a5760e6f2001Z3qEW6b2j8775j", "type": "step-finish", "reason": "stop", "snapshot": "b934bb8d220d6142af891a93d05254e191f0cf38", "cost": 0, "tokens": { "input": 14688, "output": 28, "reasoning": 0, "cache": { "read": 6435, "write": 0 } } } ], "blocked": false, "shouldRetry": false } 

Raviguntakala avatar Nov 06 '25 04:11 Raviguntakala