Flash red when entering a malformed command in the command panel

spec/atom/command-panel-spec.coffee

@@ -55,6 +55,19 @@ describe "CommandPanel", ->
 
       expect(commandPanel.execute).toHaveBeenCalled()
 
+    describe "if the command is malformed", ->
+      it "adds and removes an error class to the command panel and does not close it", ->
+        rootView.trigger 'command-panel:toggle'
+        commandPanel.editor.insertText 'garbage-command!!'
+
+        commandPanel.editor.trigger keydownEvent('enter')
+        expect(commandPanel.parent()).toExist()
+        expect(commandPanel).toHaveClass 'error'
+
+        advanceClock 400
+
+        expect(commandPanel).not.toHaveClass 'error'
+
   describe ".execute()", ->
     it "executes the command and closes the command panel", ->
       rootView.activeEditor().setText("i hate love")

src/atom/command-panel.coffee

@@ -1,6 +1,7 @@
 {View} = require 'space-pen'
 CommandInterpreter = require 'command-interpreter'
 Editor = require 'editor'
+{SyntaxError} = require('pegjs').parser
 
 module.exports =
 class CommandPanel extends View
@@ -41,7 +42,17 @@ class CommandPanel extends View
     @rootView.activeEditor().focus()
 
   execute: ->
-    @commandInterpreter.eval(@rootView.activeEditor(), @editor.getText())
+    try
+      @commandInterpreter.eval(@rootView.activeEditor(), @editor.getText())
+    catch error
+      if error instanceof SyntaxError
+        @addClass 'error'
+        removeErrorClass = => @removeClass 'error'
+        window.setTimeout(removeErrorClass, 200)
+        return
+      else
+        throw error
+
     @hide()
 
   repeatRelativeAddress: ->

static/command-panel.css

@@ -4,6 +4,11 @@
   background: #515151;
   display: -webkit-box;
   padding: 3px;
+  -webkit-transition: background 200ms ease-out;
+}
+
+.command-panel.error {
+  background: #991212;
 }
 
 .command-panel .prompt {