As a follow-up to yesterday’s agentic coding experiment, I wanted to try a more robust code endeavor with the various Claude Code models. Instead of a simple refactoring, this experiment includes creating a new page from scratch that doesn’t follow any of the prior art in the application. It’s an internal “log viewer” that only runs in the local development environment.
The Prompt
Unlike yesterday’s experiment, which needed a very short prompt, this experiment has a much longer prompt. In fact, it took me a solid 45-minutes to write the prompt. Which is probably longer than it would have taken me to write the actual code.
This is the funny thing about the agentic coding — the more I care about what actually gets produced, the more time I spend writing the prompt. Which, in turn, makes it harder to get that sweet return-on-investment (ROI). I’m hoping that at some point the scales begin to tip in my favor.
Here’s the prompt that I fed into each model (line-breaks added for readability):
# Create Local Development Log-Viewer
In the local development environment, the error logger (`Logger.cfc`) writes a
copy of each processed error to the @cfml/app/log folder. These text (`.txt`)
files are named based on a timestamp + counter such that they are listed in
lexicographical order (with the newest error logs at the bottom). Right now, in
order to look at these logs, I have to open the `log` folder in my IDE and then
click on each file individually. I want to streamline this process with a web-
based interface that is only accessible during local development.
## Implementation Plan
The local-development-only log viewer will be a single-page experience (one
`index.cfm` file) located in the directory @cfml/app/wwwroot/internal/logs/. It
will be built outside of the main client-asset pipeline and routing system; and
will embed its own CSS directly in its own `index.cfm` file `` tag. In
other words, this is a mostly self-contained experience that will sit adjacent
to the application (but should still use application best practices and
stylistic preferences).
- Update `sendToDevLog()` to write `.json` files instead of `.txt` files.
- Update the `N Logs` label in the `localDevelopment.cfm` module to be a link to
`/internal/logs` (opens in a new tab).
- Create `/internal/logs/index.cfm` as a self-contained CFML page with some
`` processing at the top (including `cfmlx.cfm` inclusion) and the
CFML/HTML markup below.
- If `config.isLive` this page should throw an `App.Forbidden` error.
- This new page should do a directory list for `*.json` files in the `/log`
directory (system mapping).
- Each log `.json` file should be deserialized into a struct (OK to assume
struct is the result).
- Logs (all of them) should be output to the page in descending filename order
(lexicographically puts newest logs at the top).
- Each log entry should be rendered to the page as a `` disclosure
element. The `` should contain one of the following in order of
preference (you can use `coalesceTruthy()` with safe-navigation operators):
- `.error.message`
- `.error.type`
- `.message`
- filename of `.json` file
- The content of the disclosure element should be a `` that contains a
`dump()` of the whole log entry.
- All `` should be closed by default; except the first (newest) one,
which should be `open` by default.
- At the bottom of the page, there should be a `Delete Logs` form/button that
should `POST` the page back to itself. If the page `isPost()` (see
`RequestMetadata.cfc`) and `form.deleteLogs` == `true`, all the `.json` log
files should be deleted and the page should be refreshed to show the empty
state.
- Page title should be "Local Development Logs".
- The content of this page `` should have a `max-width` of `1000px`.
- You can use `ui.less` for inspiration; but DO NOT assume that these styles are
available. If you want to use any of them, you have top reproduce the CSS
properties in a `
As you can see, the prompt is quite detailed and leaves very little the imagination. At least as far as back-end logic goes — I give it almost no direction about the UI other than it can borrow from the rest of the application for inspiration.
The Results
All three models generated similar code. Though each model had different stylistic and implementation choices. The timing differences were much bigger in today’s experiment:
- Haiku 4.5 – 1m 56s
- Sonnet 4.6 – 3m 49s
- Opus 4.6 – 3m 36s
Haiku was 2x faster than Sonnet; and still very much faster than Opus. That said, Sonnet was the only model that produced code that worked on the first try – the other two models required debugging (not shown in the video).
Here’s the full git diff of the Sonnet version so you can get a sense of how big the experiment was in scope:
diff --git a/cfml/app/client/_shared/tag/localDevelopment.cfm b/cfml/app/client/_shared/tag/localDevelopment.cfm
index ae206d1..f08e4f3 100644
--- a/cfml/app/client/_shared/tag/localDevelopment.cfm
+++ b/cfml/app/client/_shared/tag/localDevelopment.cfm
@@ -85,7 +85,7 @@
var fileList = directoryList(
path = expandPath( "/log" ),
listInfo = "name",
- filter = "*.txt"
+ filter = "*.json"
);
return fileList.len();
diff --git a/cfml/app/client/_shared/tag/localDevelopment.view.cfm b/cfml/app/client/_shared/tag/localDevelopment.view.cfm
index 4132ed6..7b346b4 100644
--- a/cfml/app/client/_shared/tag/localDevelopment.view.cfm
+++ b/cfml/app/client/_shared/tag/localDevelopment.view.cfm
@@ -14,9 +14,9 @@
-
+
#numberFormat( logCount )# Logs
-
+
diff –git a/cfml/app/core/lib/util/Logger.cfc b/cfml/app/core/lib/util/Logger.cfc
index 9c9f10e..f7e2c50 100644
— a/cfml/app/core/lib/util/Logger.cfc
+++ b/cfml/app/core/lib/util/Logger.cfc
@@ -332,10 +332,9 @@ component hint = “I provide logging methods for errors and arbitrary data.” {
var stub = now().dateTimeFormat( “yyyy-mm-dd-HH-nn-ss” );
var suffix = lcase( payload.error.type ?: payload.level ?: “unknown” );
– writeDump(
– var = payload,
– format = “text”,
– output = expandPath( “/log/#stub#-#suffix#.txt” )
+ fileWrite(
+ expandPath( “/log/#stub#-#suffix#.json” ),
+ serializeJSON( payload )
);
}
diff –git a/cfml/app/wwwroot/internal/logs/index.cfm b/cfml/app/wwwroot/internal/logs/index.cfm
new file mode 100644
index 0000000..bba755a
— /dev/null
+++ b/cfml/app/wwwroot/internal/logs/index.cfm
@@ -0,0 +1,223 @@
+
+
+ // Define properties for dependency-injection.
+ config = request.ioc.get( “config” );
+ requestMetadata = request.ioc.get( “core.lib.web.RequestMetadata” );
+
+ // ColdFusion language extensions (global functions).
+ include “/core/cfmlx.cfm”;
+
+ // ——————————————————————————- //
+ // ——————————————————————————- //
+
+ // LOCAL DEVELOPMENT ONLY.
+ if ( config.isLive ) {
+
+ throw( type = “App.Forbidden” );
+
+ }
+
+ param name=”form.deleteLogs” type=”string” default=””;
+
+ if ( requestMetadata.isPost() && ( form.deleteLogs == “true” ) ) {
+
+ deleteAllLogs();
+ location( url = cgi.script_name, addToken = false );
+
+ }
+
+ logEntries = getLogEntries();
+
+ // ——————————————————————————- //
+ // ——————————————————————————- //
+
+ /**
+ * I delete all JSON log files in the /log directory.
+ */
+ private void function deleteAllLogs() {
+
+ var fileNames = directoryList(
+ path = expandPath( “/log” ),
+ listInfo = “name”,
+ filter = “*.json”
+ );
+
+ for ( var fileName in fileNames ) {
+
+ fileDelete( expandPath( “/log/#fileName#” ) );
+
+ }
+
+ }
+
+
+ /**
+ * I get the deserialized log entries from the /log directory, sorted newest-first.
+ */
+ private array function getLogEntries() {
+
+ var fileNames = directoryList(
+ path = expandPath( “/log” ),
+ listInfo = “name”,
+ filter = “*.json”,
+ sort = “name desc”
+ );
+
+ var entries = [];
+
+ for ( var fileName in fileNames ) {
+
+ entries.append({
+ filename: fileName,
+ data: deserializeJSON( fileRead( expandPath( “/log/#fileName#” ) ) )
+ });
+
+ }
+
+ return entries;
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ #e( coalesceTruthy( entry.data?.error?.message, entry.data?.error?.type, entry.data?.message, entry.filename ) )#
+
+
+
+
+
+
+
+
+
+ No log entries found.
+
+
+
+
+
+
+
+
+
+
+
+
+
Source link
